Wyodrębnianie newralgicznego kodu CSS

Dowiedz się, jak poprawić czasy renderowania dzięki krytycznej technice CSS.

Milica Mihajlija

Zanim przeglądarka wyświetli stronę, musi pobrać i przeanalizować pliki CSS, co sprawia, że CSS jest zasobem blokującym renderowanie. Jeśli pliki CSS są duże lub warunki sieci są słabe, żądania dotyczące plików CSS mogą znacznie wydłużyć czas renderowania strony internetowej.

Ilustracja przedstawiająca laptopa i urządzenie mobilne ze stronami internetowymi nad brzegami ekranów

Wbudowanie wyodrębnionych stylów do elementu <head> dokumentu HTML eliminuje konieczność wysyłania dodatkowego żądania pobierania tych stylów. Pozostałą część kodu CSS można wczytywać asynchronicznie.

Plik HTML z krytym kodem CSS w nagłówku
Krytyczny kod CSS w tekście

Skrócenie czasu renderowania może mieć ogromny wpływ na dostrzeganą wydajność, zwłaszcza przy słabych połączeniach sieciowych. W sieciach komórkowych duże opóźnienie występuje niezależnie od przepustowości.

Porównanie widoku paska zdjęć podczas wczytywania strony z kodem CSS blokującym renderowanie (u góry) i tej samej strony z krytym kodem CSS (u dołu) w przypadku połączenia 3G. Górny pasek zdjęć pokazuje 6 pustych klatek przed wyświetleniem treści. Dolny pasek zdjęć wyświetla istotne treści w pierwszej klatce.
Porównanie wczytywania strony z kodem CSS blokującym renderowanie (u góry) i tej samej strony z krytym kodem CSS (u dołu) w przypadku połączenia 3G

Jeśli masz słabe wyniki First Contentful Paint (FCP) i w audycie Lighthouse widzisz możliwość „Wyeliminuj zasób blokujący renderowanie”, warto wypróbować krytyczny kod CSS.

Audyt Lighthouse z możliwościami „Wyeliminuj zasób blokujący renderowanie” lub „Przekaż nieużywany kod CSS”

Aby zminimalizować liczbę cykli wymiany danych do pierwszego wyrenderowania, staraj się, aby część strony widoczna na ekranie była mniejsza niż 14 KB (skompresowana).

Wpływ tej metody na skuteczność zależy od typu witryny. Ogólnie rzecz biorąc, im więcej CSS zawiera witryna, tym większy możliwy wpływ wbudowanego kodu CSS.

Omówienie narzędzi

Istnieje wiele świetnych narzędzi, które mogą automatycznie określić kluczowy element CSS strony. To dobra wiadomość, ponieważ wykonywanie tych czynności ręcznie byłoby uciążliwe. Wymaga analizy całego elementu DOM, aby określić style zastosowane do każdego elementu w widocznym obszarze.

Krytyczny

Krytyczny wyodrębnia, minifikuje i umieszcza kod CSS w części strony widocznej na ekranie. Jest dostępny jako moduł npm. Można go używać z Gulp (bezpośrednio) lub z Grunt (jako plugin). Dostępna jest też wtyczka webpack.

To proste w obsłudze narzędzie, które usprawnia cały proces. Nie musisz nawet określać arkuszy stylów, ponieważ kategoria Krytyczna wykrywa je automatycznie. Umożliwia też wyodrębnianie krytycznych fragmentów kodu CSS na potrzeby różnych rozdzielczości ekranu.

criticalCSS

Parametr CriticalCSS to kolejny moduł npm, który wyodrębnia kod CSS w części strony widocznej na ekranie. Jest też dostępna jako interfejs wiersza poleceń.

Nie ma opcji wstawiania i minimalizowania krytycznych elementów CSS, ale umożliwia wymuszanie uwzględniania reguł, które nie należą do krytycznego kodu CSS, oraz daje bardziej szczegółową kontrolę nad uwzględnianiem deklaracji @font-face.

Penthouse

Penthouse to dobry wybór, jeśli Twoja witryna lub aplikacja zawiera wiele stylów i stylów, które są dynamicznie wstrzykiwane w DOM (często używane w aplikacjach Angular). Wykorzystuje ona wbudowaną funkcję Puppeteer, a nawet wersję hostowaną online.

Penthouse nie wykrywa arkuszy stylów automatycznie. Musisz określić pliki HTML i CSS, dla których chcesz wygenerować krytyczny kod CSS. Jego zaletą jest możliwość wykonywania wielu zadań równolegle.