Kennisbank · Begrip

Render-blocking resources: wat de eerste weergave tegenhoudt

Render-blocking resources zijn CSS- en JavaScript-bestanden die de browser eerst moet ophalen en verwerken voordat er iets op het scherm verschijnt. Ze zijn de belangrijkste oorzaak van een trage eerste weergave.

Door , Content Strategist & GEO Editor · Laatst bijgewerkt:

Belangrijkste punten

  • CSS in de head blokkeert standaard het renderen.
  • Scripts zonder defer of async blokkeren het parsen.
  • Kritieke CSS inline, de rest uitgesteld laden.
  • Externe fonts en tagmanagers zijn veelvoorkomende boosdoeners.

Waarom het gebeurt

De browser bouwt eerst de DOM en de CSSOM voordat hij kan schilderen. Elk stylesheet in de head en elk synchroon script onderbreekt dat proces tot het bestand binnen en verwerkt is.

Herkennen

Lighthouse toont ze onder "Eliminate render-blocking resources", met per bestand de geschatte tijdwinst. Kijk daarnaast in de netwerkwatervalgrafiek naar wat er vóór de eerste weergave wordt geladen.

JavaScript oplossen

Zet defer op scripts die de DOM nodig hebben en async op onafhankelijke scripts zoals analytics. Verplaats zware bibliotheken naar interactiemoment in plaats van naar het laden.

CSS oplossen

Plaats de stijlen die nodig zijn voor het eerste scherm inline in de head en laad de rest asynchroon. Splits stylesheets per template zodat je geen ongebruikte CSS meestuurt.

Fonts

Gebruik font-display: swap, preload het belangrijkste lettertype en beperk het aantal gewichten. Wachten op een webfont is een veelvoorkomende, onzichtbare vertraging.

Veelgestelde vragen

Is inline CSS niet slecht voor caching?+

Alleen de kritieke CSS zet je inline; de rest blijft cachebaar in een extern bestand.

Wat is het verschil tussen defer en async?+

Defer voert uit na het parsen in documentvolgorde, async zodra het bestand binnen is.

Hoeveel winst levert dit op?+

Vaak enkele tienden tot hele seconden op LCP, afhankelijk van je stack.

Verder lezen

Gerelateerde artikelen

Alles in de kennisbank →

Alles over dit thema op één plek: hub AI-strategie

Ready?

Klaar om gespot te worden?

Plan een gratis kennismaking van 30 minuten. We kijken mee naar je huidige vindbaarheid en vertellen eerlijk wat we zouden doen — wel of geen samenwerking.

Stuur ons een bericht