Wat is CriticalCSS en wat doet dit voor SEO?

Tegenwoordig maakt bijna elke site gebruik van externe CSS-bestanden voor de stijling van de site. Waar in de code dit bestand wordt opgehaald is van belang. Wanneer de CSS onderaan de code wordt aangeroepen zal de stijling van de site getoond worden pas ná dat alle elementen ingeladen zijn dit zorgt ervoor dat de pagina verspringt tijdens openen en verversen. Het is dus belangrijk dat de CSS vóór alle elementen wordt aangeroepen; in de <head>-tag. Maar wat doet dit voor pagespeed?

Wanneer de CSS in de head wordt aangeroepen wordt eerst alle CSS uit het bestand opgehaald. Dit geldt dus ook voor alle afbeeldingen. Dit gebeurd telkens wanneer een gebruiker een pagina opent of ververst. Wanneer CSS-bestanden groot worden zal dit impact hebben op de laadtijd van een pagina en dus van de site. Wanneer een site bekeken wordt in “Google PageSpeed Insights” kan er gezien worden of CSS-bestanden blokkerend werken. Google houdt hier rekening mee en zal sites ‘pluspunten’ geven wanneer er rekening gehouden wordt met laadtijden van een site.

Een manier om rekening te houden te houden met blokkerende CSS-bestanden is om deze aan het einde van de pagina te plaatsen. Zoals eerder aangegeven zal de stijling pas later worden toegevoegd, maar dit kan opgelost worden met “CriticalCSS”. CriticalCSS is de minimale CSS die bij het laden van een pagina van belang is: Alles wat in het scherm zichtbaar is bij het openen van een pagina. Dit wordt ook “boven de vouw” genoemd.

CriticalCSS genereren kan handmatig gedaan worden, maar zal veel tijd kosten omdat het voor elke pagina gedaan moet worden. Om dit werk gemakkelijker te maken zijn er veel manier om dit te laten genereren. Hierover zal binnenkort een blog over verschijnen.

Wanneer de CriticalCSS is toegevoegd aan een site, zal deze sneller laden en daardoor gebruiksvriendelijke werken voor bezoekers. Daarnaast zal dit ook impact hebben op de PageSpeed-score die Google aan sites geeft en kan dit zorgen voor een positievere ‘score’ binnen Google én dus de zoekresultaten binnen Google. In de volgende blog zal er toegelicht worden wat negatieve SEO is en wat voor impact dit kan hebben op een site.