Zasoby blokujące renderowanie to pliki, zwykle CSS i skrypty JavaScript w sekcji head, które przeglądarka musi pobrać i przetworzyć, zanim wyświetli stronę. Opóźniają pierwszy widoczny efekt.
Dlaczego CSS i JS blokują renderowanie?
Przeglądarka nie może narysować strony bez stylów, bo nie wie, jak ma wyglądać, a synchroniczny skrypt może zmienić strukturę dokumentu. Dlatego wstrzymuje renderowanie do ich załadowania.
Jak ograniczyć blokowanie?
- dodaj
deferlubasyncdo skryptów, - wstaw krytyczny CSS bezpośrednio do strony,
- resztę stylów ładuj asynchronicznie,
- usuń nieużywany CSS i JavaScript.
Jak znaleźć takie zasoby?
Lighthouse i PageSpeed Insights wskazują zasoby blokujące renderowanie wraz z szacowanym zyskiem czasu.
Przykład poprawki
Skrypt analityczny w sekcji head bez atrybutów wstrzymuje wyświetlanie strony. Dodanie defer lub async albo przeniesienie go na koniec body sprawia, że przeglądarka może najpierw narysować treść. Dla fontów pomaga font-display: swap, a dla stylów wydzielenie fragmentu krytycznego. Po zmianach porównaj FCP i LCP przed i po wdrożeniu.
Zobacz w praktyce
Refaktoryzacja CSS – jak usunąć 80% nieużywanego kodu i przyspieszyć renderowanie (FCP) 
Działanie strony internetowej w przeglądarce 
Core Web Vitals - poradnik jak poprawić wskaźniki