Render-blocking resources
Render-blocking resources zijn CSS of JS-bestanden die het renderen van de pagina ophouden totdat ze volledig zijn gedownload en verwerkt.
Browsers pauzeren het tonen van content totdat render-blocking resources klaar zijn. Dit blokkeert de First Contentful Paint en schaadt LCP. Technieken tegen render-blocking: inline critical CSS, JavaScript defer/async-attributen, preload voor essentiële resources, en code-splitting. Lighthouse vlagt render-blocking consistent als high-priority issue.
Voorbeeld
Een site laadt 450KB CSS in de head zonder splitsing. LCP 4,2s. Na het extraheren van 14KB critical CSS inline en lazy loaden van de rest: LCP 2,1s.
Veelgestelde vragen
Wat is het verschil tussen defer en async?
Beide voorkomen dat JS de HTML-parsing blokkeert. Defer: script runs na HTML-parsing klaar, in volgorde. Async: script runs zodra gedownload, out-of-order. Gebruik defer bij afhankelijke scripts, async bij onafhankelijke (analytics).
Hoe identificeer ik render-blocking?
PageSpeed Insights + Chrome DevTools > Coverage-tab + Lighthouse performance audit. Rapporten tonen welke resources te groot of te vroeg laden.
Moet ik CSS inline zetten?
Alleen critical CSS (first-paint styling). Inline alle CSS is contraproductief — cacheable externe CSS is sneller voor recurring visits.
Gerelateerde termen
Verder lezen
- → Onze dienst: SEO