Waarom is Critical CSS belangrijk?

Een goed begrip van Critical CSS is essentieel voor iedereen die werkt met websites, webhosting of online technologie. Critical CSS is de kleine set CSS-regels die een browser nodig heeft om het eerst zichtbare deel van een pagina te tonen.

Terug naar begrippenlijst

Critical CSS

Critical CSS is de kleine set CSS-regels die een browser nodig heeft om het eerst zichtbare deel van een pagina te tonen.

Critical CSS is het deel van je stylesheet dat nodig is om het bovenste, direct zichtbare stuk van een pagina op te maken, ook wel above the fold genoemd. Je zet die regels inline in de <head> van de HTML, zodat de browser kan beginnen met tekenen zonder eerst een apart CSS-bestand op te halen.

Een gewoon CSS-bestand blokkeert het renderen: de browser toont niets totdat dat bestand binnen is. Met critical CSS komt de opmaak voor het eerste scherm mee in het HTML-document, en laadt de rest van de CSS daarna asynchroon. web.dev adviseert om de inhoud boven de vouw onder ongeveer 14 kB gecomprimeerd te houden, omdat een server in de eerste netwerkronde ongeveer zoveel kan versturen.

Het effect zie je vooral aan First Contentful Paint (FCP), het moment waarop de eerste inhoud verschijnt. Er zitten ook nadelen aan. Inline CSS wordt niet apart gecachet, en een onvolledige set laat de pagina even verkeerd opgemaakt zien voordat de rest binnen is. web.dev merkt zelf op dat veel sites hun snelheidsdoelen ook zonder deze techniek halen.

Draait je WordPress-site op een LiteSpeed-server, zoals bij KeurigOnline, dan kan de plugin LiteSpeed Cache critical CSS voor je maken. Zet onder Page Optimization, tabblad CSS Settings, de optie Load CSS Asynchronously aan. De plugin laat dan via de dienst QUIC.cloud critical CSS (CCSS) genereren; voor die dienst kunnen kosten gelden. Test daarna een paar pagina's op mobiel en desktop en klik op Purge All, want LiteSpeed raadt aan deze opties eerst grondig te proberen.

Geschiedenis

Het idee achter critical CSS stamt uit de adviezen van Google PageSpeed om CSS-levering te optimaliseren: zet de CSS voor het eerste scherm inline en laad de rest later (Optimize CSS Delivery). Omdat het met de hand bijhouden van die regels foutgevoelig is, verschenen er tools die critical CSS automatisch uit een pagina halen.

Belangrijke mijlpalen:

2014: de open-source tools Penthouse en Critical verschijnen
2019: web.dev publiceert de handleiding Extract critical CSS
2020: Google introduceert de Core Web Vitals, met LCP als maat voor laadsnelheid

Bronnen

web.dev (2019) - Extract critical CSS
web.dev - Defer non-critical CSS
MDN Web Docs - Critical rendering path
LiteSpeed - LiteSpeed Cache for WordPress: Page Optimization
Addy Osmani (GitHub) - Critical: extract and inline critical-path CSS

Er is geen één-plugin-lost-alles-op. De juiste keuze hangt af van je hosting, je technische kennis en je budget. Hieronder een overzicht van de sterkste opties per categorie. Voor een uitgebreide test van acht caching-plugins inclusief benchmarks, zie onze cache-pluginvergelijking 2026.

All-in-one caching en optimalisatie

Plugin	Prijs	Beste voor	Meest impactvolle CWV-feature
WP Rocket	Betaald (ca. €59/jaar)	Beginners, snel resultaat	Page caching + Critical CSS + JS defer
LiteSpeed Cache	Gratis	LiteSpeed/OpenLiteSpeed hosting	Server-level Full Page Cache
Core Web Vitals & PageSpeed Booster	Gratis	Lichte site, alles-in-één zonder budget	Automatische cache-clear-triggers + WebP-conversie + CSS/JS-minificatie

Je winkelwagen is leeg

Je winkelwagen is leeg

Critical CSS

Geschiedenis

Bronnen

Gerelateerde artikelen

All-in-one caching en optimalisatie