Critical CSS (ook wel "above-the-fold CSS") is de minimale hoeveelheid CSS die nodig is om het eerste zichtbare deel van je pagina correct weer te geven, voordat de gebruiker scrollt.
Waarom belangrijk:
• Normale CSS is render-blocking
• Door critical CSS inline te plaatsen, kan de browser direct renderen
• Verbetert LCP en First Contentful Paint significant
Implementatie:
1. Identificeer welke CSS nodig is voor above-the-fold content
2. Plaats deze CSS inline in een <style> tag in de <head>
3. Laad de rest van de CSS asynchroon (defer)
Tools zoals Critical, Penthouse en WordPress plugins (WP Rocket, LiteSpeed Cache) kunnen critical CSS automatisch genereren en injecteren.