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.


Andere blogartikelen

  • Waarom developers het zo leuk vinden bij ons

    Geschreven door: op woensdag 13 november 2019

    Bij ons op kantoor werkt een team van betrokken specialisten, waaronder 4 backend developers en 4 UX developers. Zij zorgen voor een belangrijk fundament binnen dit bedrijf. Een goede reden om te zorg ...

    Bekijk het artikel »
  • Beachvolleyballen voor het goede doel!

    Geschreven door: op vrijdag 25 oktober 2019

    Afgelopen vrijdag 11 oktober  hebben diverse betrokken specialisten uit ons team de handen ineen geslagen met een van onze opdrachtgevers. Samen met De Monchy International B.V. hebben we meegeda ...

    Bekijk het artikel »
  • Het gebruik van een Photoslider

    Geschreven door: op maandag 7 oktober 2019

    Ze zijn er in alle soorten en maten en staan meestal bovenaan een websitepagina. Dan heb ik het natuurlijk over photosliders. Zo bent u vast bekend met de traditionele foto die langzaam vervaagd en wa ...

    Bekijk het artikel »
Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten