Critical rendering path je posloupnost kroků, které prohlížeč provede, aby proměnil HTML, CSS a JS v pixely na obrazovce. Cokoli, co musí skončit před prvním vykreslením (paint), je render-blocking.
Critical rendering path je posloupnost kroků, které prohlížeč provede, aby proměnil HTML, CSS a JS v pixely na obrazovce. Cokoli, co musí skončit před prvním vykreslením (paint), je render-blocking.
<script> zastaví parsování HTML, dokud se nestáhne a nespustí.<!-- Blokuje parsování: prohlížeč zde čeká, než pokračuje -->
<script src="/app.js"></script>
<!-- defer: stáhni paralelně, spusť po naparsování HTML, v pořadí -->
<script src="/app.js" defer></script>
<!-- async: stáhni paralelně, spusť jakmile je připraven (pořadí není zaručeno) -->
<script src="/analytics.js" async></script>
Použijte defer pro kód aplikace, který se dotýká DOM, a async pro nezávislé skripty jako analytika. Kritické CSS vložte inline a zbytek načtěte bez blokování.
Toto je mentální model za téměř každou opravou doby načítání: render-blocking CSS/JS je nejčastější příčinou pomalého prvního vykreslení a špatného LCP. Znalost toho, proč defer/async existují, ukazuje, že rozumíte prohlížeči, ne jen syntaxi.
Knihovna IT otázek k pohovoru s podrobnými odpověďmi — od Junior po Senior.
Přispět