Krytyczna ścieżka renderowania (critical rendering path) to sekwencja kroków, które przeglądarka wykonuje, aby zamienić HTML, CSS i JS w piksele na ekranie. Wszystko, co musi się zakończyć przed pierwszym malowaniem, jest blokujące renderowanie (render-blocking).
<script> zatrzymuje parsowanie HTML na czas pobierania i wykonania.<!-- Blokuje parsowanie: przeglądarka czeka tutaj przed kontynuacją -->
<script src="/app.js"></script>
<!-- defer: pobierz równolegle, uruchom po sparsowaniu HTML, w kolejności -->
<script src="/app.js" defer></script>
<!-- async: pobierz równolegle, uruchom gdy tylko gotowe (kolejność nie gwarantowana) -->
<script src="/analytics.js" async></script>
Użyj defer dla kodu aplikacji, który dotyka DOM, i async dla niezależnych skryptów, takich jak analytics. Wstaw krytyczny CSS w linii, a resztę ładuj bez blokowania.
To model mentalny stojący za niemal każdą poprawką czasu ładowania: blokujący renderowanie CSS/JS to główna przyczyna wolnego pierwszego malowania i słabego LCP. Wiedza, dlaczego istnieją defer/async, pokazuje, że rozumiesz przeglądarkę, a nie tylko składnię.
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
Wesprzyj