Het critical rendering path is de reeks stappen die de browser doorloopt om HTML, CSS en JS om te zetten in pixels op het scherm. Alles wat moet afronden vóór de eerste paint is render-blocking.
Het critical rendering path is de reeks stappen die de browser doorloopt om HTML, CSS en JS om te zetten in pixels op het scherm. Alles wat moet afronden vóór de eerste paint is render-blocking.
<script> stopt het parsen van HTML terwijl hij downloadt en draait.<!-- Blokkeert parsing: browser wacht hier voordat hij verdergaat -->
<script src="/app.js"></script>
<!-- defer: download parallel, draai na het parsen van HTML, in volgorde -->
<script src="/app.js" defer></script>
<!-- async: download parallel, draai zodra klaar (volgorde niet gegarandeerd) -->
<script src="/analytics.js" async></script>
Gebruik defer voor app-code die de DOM aanraakt, en async voor onafhankelijke scripts zoals analytics. Inline kritieke CSS en laad de rest zonder te blokkeren.
Dit is het mentale model achter bijna elke laadtijdfix: render-blocking CSS/JS is de belangrijkste oorzaak van een trage eerste paint en slechte LCP. Weten waarom defer/async bestaan laat zien dat je de browser begrijpt, niet alleen de syntax.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren