Wil je weten wat Critical CSS is? Dan ben je waarschijnlijk bezig met het optimaliseren van de snelheid van je website.
Zo kun je bij Google PageSpeed een melding krijgen als “Verwijder bronnen die de weergave blokkeren”, wat gaat om JavaScript en CSS.
Met Critical CSS, in het Nederlands ook wel kritieke CSS genoemd, zorg je er eigenlijk voor dat het absolute minimale aan CSS inline geladen wordt om de bovenkant van een pagina weer te geven. Hierdoor wordt alles wat zichtbaar is sneller geladen voor je bezoeker.
In dit artikel zal ik het je allemaal eenvoudiger uitleggen dan in het korte stukje hierboven en daarnaast zal ik je ook vertellen hoe je critical CSS kunt genereren voor je website.
Inhoudsopgave: Wat is Critical CSS?
Wat is Critical CSS? De eenvoudige uitleg
Om te begrijpen wat critical CSS is en waarvoor het nodig is, is het eerst handig dat je de basis weet. Ik heb dan ook al een artikel geschreven over wat CSS is. Ik zal het je hier ook in het kort uitleggen.
CSS en waarom Critical CSS nodig is
Critical CSS heeft te maken met CSS. CSS is een programmeertaal wat de opmaak van je website regelt. Alle kleuren die je ziet, hoe het menu van je website is en hoe andere elementen op je website zijn opgemaakt, is allemaal gedaan met CSS.
Het is vaak gebruikelijk om een apart CSS-bestand, ook wel CSS stylesheet genoemd, te maken en deze in te laden op je website. Dit is precies hoe software als WordPress dit altijd doet.
Dit is een hele goede methode, alleen kan het als nadeel hebben dat je bij Google PageSpeed een resultaat krijgt als “Verwijder bronnen die de weergave blokkeren”. Wanneer je er vervolgens op klikt zal je zien dat het om JavaScript en CSS-bestanden gaat.

In dit geval om 2 CSS-bestanden die de weergave blokkeren en waarbij het advies is om deze met kritieke CSS in te stellen.
Deze melding geeft eigenlijk aan dat je website sneller geladen wordt als niet direct het complete CSS-bestand geladen hoeft te worden. Dit komt omdat er anders gewacht moet worden op dit bestand, omdat CSS een hoge prioriteit heeft.
Wanneer het lang duurt om het CSS-bestand te laden, dan moet de inhoud (content) op de pagina ook wachten. Hoe groter het CSS-bestand, hoe langer dit dus duurt.
Hierdoor kan het zijn dat je voor een split seconde een witte pagina ziet. Dit lijkt niet veel, maar iedereen is ongeduldig en het kan je conversie benadelen.
Wat is Critical (Kritieke) CSS?
Het is in dit geval handig om eerst te weten wat op een website onder kritiek valt.
Het gaat hier om de inhoud die een bezoeker direct ziet wanneer een pagina bezocht wordt. Alles dus eigenlijk wat meteen in beeld is zonder dat je hoeft te scrollen. Dit staat ook wel bekend als boven de vouw of above the fold content.
Het is cruciaal dat dit zo snel mogelijk geladen wordt voor een goede gebruikerservaring.
De CSS-code die nodig is om geladen te worden voor de inhoud boven de vouw staat bekend als critical CSS. Critical CSS wordt soms ook nog genoemd om aan te duiden dat de CSS inline (tussen de HTML code) geladen wordt in plaats van via een apart CSS-bestand.
Alles wat niet direct in beeld is bij een bezoeker van je website kan asynchroon geladen worden en gewoon via een CSS-bestand. Asynchroon houdt simpel gezegd in dat een CSS-bestand op hetzelfde moment geladen mag worden als critical CSS.
Wat zijn de voordelen van Critical CSS?
Door gebruik te maken van critical CSS zorg je ervoor dat jouw website weer net iets sneller geladen kan worden. Je kunt ook de melding “Verwijder bronnen die de weergave blokkeren” oplossen. In ieder geval alle CSS punten die daarbij staan.
Het grote voordeel hiervan is dat je jouw core web vitals score kunt verbeteren, wat tegenwoordig ook een rankingsfactor is. Specifiek gezegd optimaliseer je hiermee de Largest Contentful Paint en First Input Delays score.
Wat zijn de nadelen van Critical CSS?
Critical CSS kent niet echt nadelen. Het is echter wel belangrijk om te weten dat inline CSS niet altijd cached kan worden. Dit is maar net afhankelijk van de manier waarop je jouw cache instelt.
Verder kan ik alleen maar aanraden om de critical CSS tot het minimale te halen. Zeker wanneer je geen cache gebruikt. Anders blokkeert de CSS alsnog de inhoud van je website.
Hoe kan ik Critical CSS genereren?
Nu je weet wat Critical CSS voor je kan betekenen ben je waarschijnlijk ook benieuwd naar hoe je dit kunt genereren voor je website. Want hoe weet je nou welke CSS code je nodig hebt?
Critical CSS genereren in WordPress
Wanneer je een WordPress website hebt, dan kun je dit oplossen met behulp van een WordPress plugin.
Ik je aanbevelen om de plugin WP Rocket te gebruiken. Dit is mijn absolute nummer 1 cache plugin die ik zelf ook op deze website gebruik. Je kunt hier op een eenvoudige manier jouw CSS-bestanden optimaliseren en kritieke CSS-levering optimaliseren.
Ga hiervoor naar Instellingen -> WP Rocket en vervolgens naar Bestandsoptimalisatie.

Je ziet hier dat je onder andere CSS-bestanden kunt verkleinen en combineren. Het gaat echter om de optie CSS-levering optimaliseren. Vink deze optie aan en sla de wijzigingen op.
WP Rocket zal nu kritieke CSS voor pagina’s van jouw website genereren. Zelf hoef je dus niks te doen. Eventueel kun je nog wel aangeven op welke kritieke CSS je website zou moeten terugvallen wanneer de automatisch gegenereerde niet goed werkt.
Kritieke CSS genereren voor je website
Wanneer je geen WordPress website of specifiek wilt aangeven wat de kritieke CSS van je website is, dan kun je een tool gebruiken die de kritieke CSS van je website genereert. Zo heeft Sitelocity een critical CSS generator.
Het is hier een kwestie van de URL van je website invoeren en de critical CSS zal voor je gegenereerd worden. Je kunt dit vervolgens kopieren en toevoegen aan je eigen website. Controleer daarna of het goed is gelukt door te controleren of de melding weg is in Google Pagespeed.