--- title: "Wat is Critical CSS? Uitleg en betekenis | Keurig Online" description: "Critical CSS is de kleine set CSS-regels die een browser nodig heeft om het eerst zichtbare deel van een pagina te tonen." canonical: https://www.keurigonline.nl/begrippenlijst/critical-css last_modified: 2025-12-18 --- [Terug naar begrippenlijst](https://www.keurigonline.nl/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 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](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)). 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](https://github.com/pocketjoso/penthouse) en [Critical](https://github.com/addyosmani/critical) verschijnen - **2019:** web.dev publiceert de handleiding [Extract critical CSS](https://web.dev/articles/extract-critical-css) - **2020:** Google introduceert de [Core Web Vitals](https://web.dev/articles/vitals), met LCP als maat voor laadsnelheid ## Bronnen 1. **web.dev (2019)** - [Extract critical CSS](https://web.dev/articles/extract-critical-css) 2. **web.dev** - [Defer non-critical CSS](https://web.dev/articles/defer-non-critical-css) 3. **MDN Web Docs** - [Critical rendering path](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Critical_rendering_path) 4. **LiteSpeed** - [LiteSpeed Cache for WordPress: Page Optimization](https://docs.litespeedtech.com/lscache/lscwp/pageopt/) 5. **Addy Osmani (GitHub)** - [Critical: extract and inline critical-path CSS](https://github.com/addyosmani/critical) ## Gerelateerde artikelen SEO 22 jun 2026 [Technische SEO checklist 2026: stappenplan voor snellere rankings](https://www.keurigonline.nl/blog/technische-seo-checklist-2026) - **Server response time (TTFB) verlagen.** Als je server meer dan 600 milliseconden nodig heeft voor de eerste byte, verlies je LCP-punten voordat de browser iets heeft gerenderd. Controleer TTFB via PageSpeed Insights. Op goed geconfigureerde hostingomgevingen zoals KeurigOnline liggen waarden structureel onder de 200 ms. - **Critical CSS inline plaatsen.** Blokkerende stylesheets vertragen de render. Genereer een critical CSS-subset en laad die inline in de ``; laad de rest asynchroon via `media="print" onload`. - **LCP-afbeelding preloaden.** Voeg `` toe voor de hero-afbeelding. Gebruik WebP of AVIF en lever afbeeldingen via een CDN of serverlocatie dicht bij je gebruikers. SEO 22 jun 2026 [WordPress Core Web Vitals plugin: beste keuzes & tips 2026](https://www.keurigonline.nl/blog/wordpress-core-web-vitals-plugin) 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](https://www.keurigonline.nl/blog/cache-plugins-vergelijking-2026). ### All-in-one caching en optimalisatie | Plugin | Prijs | Beste voor | Meest impactvolle CWV-feature | |---|---|---|---| | **[WP Rocket](https://wp-rocket.me/)** | Betaald (ca. €59/jaar) | Beginners, snel resultaat | Page caching + Critical CSS + JS defer | | **[LiteSpeed Cache](https://wordpress.org/plugins/litespeed-cache/)** | Gratis | LiteSpeed/OpenLiteSpeed hosting | Server-level Full Page Cache | | **[Core Web Vitals & PageSpeed Booster](https://wordpress.org/plugins/core-web-vitals-pagespeed-booster/)** | Gratis | Lichte site, alles-in-één zonder budget | Automatische cache-clear-triggers + WebP-conversie + CSS/JS-minificatie | Hosting 27 dec 2025 [Website snelheid testen: 5 beste tools (+ wat de cijfers betekenen)](https://www.keurigonline.nl/blog/website-snelheid-testen-5-beste-tools) 1. **Verbeter server response (TTFB)** — Betere hosting, caching, CDN, database optimalisatie. 2. **Reduceer JavaScript** — Verwijder ongebruikte code, defer non-critical scripts, code splitting. 3. **Implementeer critical CSS** — Inline above-the-fold CSS, defer de rest. 4. **Enable compression** — Gzip/Brotli compressie en minification. 5. **Optimaliseer afbeeldingen** - Gebruik moderne formaten (WebP, AVIF) - Lazy loading voor off-screen afbeeldingen - Specificeer width en height attributen (voorkomt CLS) - Responsive images met srcset