Critical rendering path je slijed koraka koje preglednik izvodi da pretvori HTML, CSS i JS u piksele na ekranu. Sve što mora završiti prije prvog iscrtavanja (paint) je render-blocking.
Critical rendering path je slijed koraka koje preglednik izvodi da pretvori HTML, CSS i JS u piksele na ekranu. Sve što mora završiti prije prvog iscrtavanja (paint) je render-blocking.
<script> zaustavlja parsiranje HTML-a dok se preuzima i izvodi.<!-- Blokira parsiranje: preglednik ovdje čeka prije nastavka -->
<script src="/app.js"></script>
<!-- defer: preuzmi paralelno, pokreni nakon što je HTML parsiran, redom -->
<script src="/app.js" defer></script>
<!-- async: preuzmi paralelno, pokreni čim je spreman (redoslijed nije zajamčen) -->
<script src="/analytics.js" async></script>
Koristite defer za kod aplikacije koji dodiruje DOM, a async za neovisne skripte poput analitike. Ugradite kritični CSS inline i ostatak učitajte bez blokiranja.
Ovo je mentalni model iza gotovo svakog popravka vremena učitavanja: render-blocking CSS/JS glavni je uzrok sporog prvog iscrtavanja i lošeg LCP-a. Znanje zašto postoje defer/async pokazuje da razumijete preglednik, a ne samo sintaksu.
Knjižnica IT pitanja za razgovore za posao s detaljnim odgovorima — od Juniora do Seniora.
Doniraj