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

  • Performance website hoog houden met behulp van SOLR

    Geschreven door: op maandag 3 december 2018

     Websites van onze klanten bevatten soms tienduizenden pagina’s. Dit zijn pagina’s die betrekking op de diensten die zij leveren en waar zij deze diensten leveren. Deze pagina’s worden gevuld me ...

    Bekijk het artikel »
  • HTML tips voor mail templates

    Geschreven door: op zaterdag 10 november 2018

    Bij het bouwen van een e-mail template binnen HTML komen er veel dingen kijken, ik leg in deze post een aantal basiselementen uit hoe je om moet gaan met de HTML van een mail template, en hoe wij daar ...

    Bekijk het artikel »
  • Documenteer je code

    Geschreven door: op zaterdag 27 oktober 2018

    Documenteren van je code is uiteraard een best practice. De code op zich mag zo beschrijvend mogelijk zijn, zodat de documentatie impliciet is, maar bijvoorbeeld een uitleg over het waarom van een bep ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg