Szybkość Wysoki wpływ Trudne 1–3 h

Ograniczenie blokującego CSS

Duży CSS w nagłówku opóźnia renderowanie.

Co to jest

CSS jest domyślnie blokujący, przeglądarka nie wyrenderuje niczego, dopóki nie pobierze i nie przetworzy stylów. Duże lub liczne pliki CSS opóźniają więc pierwszy obraz strony.

Dlaczego warto to rozwiązać

Wczytywanie jednego dużego CSS dla całej witryny opóźnia nawet prostą stronę. Optymalizacja wprost poprawia LCP i postrzeganą szybkość.

Jak to zrobić

1Wyodrębnij „critical CSS” dla widocznej części i wstaw go inline do <head>.
2Resztę CSS wczytaj asynchronicznie (trik media="print" lub rel="preload" + onload).
3Usuń nieużywane style (PurgeCSS / narzędzie Coverage w devtools).
4Podziel CSS na strony/komponenty zamiast jednego monolitu.

Asynchroniczne wczytanie niekrytycznego CSS

Dobrze

<link rel="preload" href="/css/style.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/style.css"></noscript>

Podsumowanie

Critical CSS inline + reszta asynchronicznie to najskuteczniejszy wzorzec przeciwko blokującemu CSS. To bardziej wymagająca zmiana, ale w wolnych witrynach przynosi wyraźne przyspieszenie pierwszego renderowania. Ułatwią ci ją nowoczesne narzędzia build i frameworki.

Powiązane tematy