Den kritiske renderingsstien (critical rendering path) er sekvensen av steg nettleseren kjører for å gjøre HTML, CSS og JS om til piksler på skjermen. Alt som må fullføres før den første paint-en er render-blokkerende.
Den kritiske renderingsstien (critical rendering path) er sekvensen av steg nettleseren kjører for å gjøre HTML, CSS og JS om til piksler på skjermen. Alt som må fullføres før den første paint-en er render-blokkerende.
<script> stopper HTML-parsingen mens det lastes ned og kjøres.<!-- Blokkerer parsing: nettleseren venter her før den fortsetter -->
<script src="/app.js"></script>
<!-- defer: last ned parallelt, kjør etter at HTML er parset, i rekkefølge -->
<script src="/app.js" defer></script>
<!-- async: last ned parallelt, kjør så snart det er klart (rekkefølge ikke garantert) -->
<script src="/analytics.js" async></script>
Bruk defer for app-kode som berører DOM-en, og async for uavhengige skript som analytics. Inline kritisk CSS og last resten uten å blokkere.
Dette er den mentale modellen bak nesten hver eneste lastetids-fiks: render-blokkerende CSS/JS er den fremste årsaken til treg first paint og dårlig LCP. Å vite hvorfor defer/async finnes viser at du forstår nettleseren, ikke bare syntaksen.
Et bibliotek av IT-intervjuspørsmål med detaljerte svar — fra Junior til Senior.
Doner