Szybkość Wysoki wpływ Średnie 30–60 min

Zasoby blokujące (render-blocking)

CSS i JS w nagłówku, które hamują pierwsze renderowanie.

Co to jest

Zasoby render-blocking to pliki (zwykle CSS i synchroniczny JS w <head>), które przeglądarka musi pobrać i przetworzyć, zanim wyrenderuje treść. Do tego czasu użytkownik widzi pustkę.

Dlaczego warto to rozwiązać

Są najczęstszą przyczyną wolnego pierwszego renderowania i słabego LCP. Im więcej ich jest i im są większe, tym dłużej trwa, zanim pojawi się treść.

Jak to zrobić

1Skrypty odłóż przez defer/async.
2Zidentyfikuj „critical CSS” (style dla widocznej części) i wstaw je inline, resztę wczytaj asynchronicznie.
3Połącz i zminifikuj pliki CSS/JS, usuń nieużywane style.
4Zewnętrzne czcionki wczytuj z font-display: swap i wstępnie je wczytaj (preload).

Podsumowanie

Celem jest dostarczyć widoczną treść jak najwcześniej, a wszystko inne odłożyć. Zacznij od odłożenia skryptów (szybka wygrana) i optymalizacji CSS (critical CSS). Ten obszar ma bezpośredni wpływ na LCP, metrykę, którą Google śledzi.

Powiązane tematy