Wyodrębnianie newralgicznego kodu CSS

Dowiedz się, jak poprawić czas renderowania za pomocą najważniejszych technik CSS.

Milica Mihajlija

Przed wyświetleniem strony przeglądarka 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 plików CSS mogą znacznie wydłużyć czas renderowania strony.

Ilustracja przedstawiająca laptopa i urządzenie mobilne ze stronami internetowymi wychodzącymi na krawędzie ekranu

Wbudowanie wyodrębnionych stylów w elemencie <head> dokumentu HTML eliminuje konieczność wysyłania dodatkowego żądania ich pobrania. Pozostałą część kodu CSS można ładować asynchronicznie.

Plik HTML z krytycznym kodem CSS wstawionym w nagłówku
Wbudowany krytyczny kod CSS

Skrócenie czasu renderowania może mieć ogromny wpływ na przewidywaną wydajność, zwłaszcza w słabych warunkach sieciowych. W sieciach komórkowych duże opóźnienia występują niezależnie od przepustowości.

Porównanie widoku paska zdjęć z wczytywaniem strony z blokującym renderowaniem CSS (u góry) i tej samej strony z wbudowanym krytycznym kodem CSS (u dołu) przy połączeniu 3G. Górny pasek zdjęć zawiera 6 pustych klatek, zanim w końcu zostanie wyświetlona treść. Dolny pasek zdjęć przedstawia przydatne treści w pierwszej klatce.
Porównanie wczytywania strony z kodem CSS blokującym renderowanie (u góry) i tej samej strony z wbudowanym krytycznym kodem CSS (u dołu) przy połączeniu 3G

Jeśli masz niską wartość pierwszego wyrenderowania treści (FCP) i wyświetla się komunikat „Eliminacja render’s blocking resource (Wyeliminuj zasób blokujący renderowanie), możliwości związane z audytami w Lighthouse, warto wypróbować kluczową usługę porównywania cen.

Audyt Lighthouse „Eliminacja the render-blocking resource” (Wyeliminuj zasób blokujący renderowanie). lub „Odłóż nieużywany kod CSS” możliwości

Aby zminimalizować liczbę sesji wymiany danych do pierwszego wyrenderowania, staraj się, by zawartość w części strony widocznej na ekranie nie przekraczała 14 KB (skompresowano).

Wpływ tej metody na skuteczność zależy od typu witryny. Ogólnie rzecz biorąc, im więcej usług porównywania cen ma witryna, tym większy może mieć wpływ wbudowany kod CSS.

Omówienie narzędzi

Istnieje wiele świetnych narzędzi, które mogą automatycznie określić krytyczny kod CSS strony. To dobra wiadomość, ponieważ ręczna konfiguracja byłaby uciążliwa. Wymaga analizy całego DOM w celu określenia stylów stosowanych do każdego elementu w widocznym obszarze.

Krytyczny

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

To proste narzędzie, które nie wymaga wiele przemyśleń. Nie musisz nawet określać arkuszy stylów – Krytyczny wykrywa je automatycznie. Obsługuje również wyodrębnianie krytycznych plików CSS dla różnych rozdzielczości ekranu.

criticalCSS

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

Nie ma opcji wbudowywania ani zmniejszania krytycznego kodu CSS, ale umożliwia wymuszanie reguł uwzględniania, które w rzeczywistości nie należą do krytycznego kodu CSS, i daje większą kontrolę nad uwzględnianiem deklaracji @font-face.

Penthouse

Penthouse to dobry wybór, jeśli Twoja witryna lub aplikacja ma dużą liczbę stylów lub stylów, które są dynamicznie wstrzykiwane do DOM (często stosowane w aplikacjach Angular). Wykorzystuje w nim Puppeteer, a nawet udostępnia wersję hostowaną online.

Penthouse nie wykrywa arkuszy stylów automatycznie, więc musisz określić pliki HTML i CSS, dla których chcesz wygenerować krytyczny kod CSS. Zaletą takiego rozwiązania jest możliwość uruchamiania wielu zadań równolegle.