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

  • Css grid

    Geschreven door: op dinsdag 20 februari 2018

    Css grid is een vernieuwende manier voor het indelen van content op website pagina’s. Met behulp van css wordt de uiterlijk van een website bepaald. Doormiddel van een grid is het mogelijk om gemakkel ...

    Bekijk het artikel »
  • CSS vendor prefixes

    Geschreven door: op dinsdag 20 februari 2018

    Bij CSS is het voor een aantal stijl regels mogelijk om aan te geven in welke browser deze gebruikt moet worden. Hiervoor wordt het type browser toegevoegd voor de stijl regel. Dit wordt een prefix (o ...

    Bekijk het artikel »
  • CSS auto prefixer

    Geschreven door: op dinsdag 20 februari 2018

    In een eerder blog over vendor prefixes was te zien hoe met behulp van prefixes experimentele stijling regels voor specifieke browser toegepast kunnen worden. Hoewel het gebruik van prefixes in deze ...

    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 2017
Google analytics
Google adwords
TelefoonE-mail

whitepaper-customer-selfservice-1.png

Bedien uw klanten optimaal met customer selfservice

Download de whitepaper