SEOMaster
Zasoby blokujące renderowanie
CSS/JS, które wstrzymują wyświetlenie strony.
Co to jest Zasoby blokujące renderowanie?
Zasoby blokujące renderowanie to pliki CSS i JavaScript, które przeglądarka musi pobrać i przetworzyć, zanim pokaże treść. Ładowane synchronicznie w sekcji <head> wstrzymują pierwsze wyświetlenie strony.
Przeglądarka domyślnie czeka na cały CSS (bo inaczej nie wie, jak narysować stronę) i na skrypty bez atrybutów async/defer. Im więcej takich zasobów na starcie, tym później użytkownik cokolwiek zobaczy.
Dlaczego to ważne dla SEO
Blokady renderowania bezpośrednio opóźniają LCP i pierwsze wrażenie. Ich ograniczenie to jeden z najskuteczniejszych sposobów na szybsze ładowanie.
Jak to sprawdzić
Lighthouse wprost wymienia „zasoby blokujące renderowanie”. Sprawdź, które CSS/JS ładują się w <head> bez defer/async i czy da się je odłożyć lub wstawić krytyczny CSS inline.
Częste błędy
- Skrypty w <head> bez async/defer
- Jeden wielki plik CSS dla całej witryny
- Blokujące czcionki i biblioteki firm trzecich na starcie
Przykład
<!-- blokuje --> <script src="app.js"></script> <!-- nie blokuje --> <script src="app.js" defer></script>