Odrocz niekrytyczny kod CSS

Pliki CSS są zasobami blokującymi renderowanie: muszą zostać wczytane i przetworzone, zanim przeglądarka wyrenderuje stronę. Renderowanie stron internetowych, które zawierają zbyt duże style, trwa dłużej.

Z tego przewodnika dowiesz się, jak opóźnić niekrytyczny kod CSS, by zoptymalizować krytyczną ścieżkę renderowania i ulepszyć pierwsze wyrenderowanie treści (FCP).

Wczytywanie CSS w nieoptymalny sposób

Poniższy przykład zawiera akordeon z 3 ukrytymi akapitami tekstu, z których każdy ma styl innej klasy:

Ta strona żąda pliku CSS z ośmioma klasami, ale nie wszystkie z nich są niezbędne do wyrenderowania „widocznej” treści.

Ten przewodnik ma na celu zoptymalizowanie tej strony, tak aby tylko style krytyczne były ładowane synchronicznie, a pozostałe (takie jak te zastosowane do akapitów) – w sposób nieblokujący.

Zmierz odległość

Uruchom Lighthouse na stronie i przejdź do sekcji Wydajność.

Raport zawiera dane Pierwsze wyrenderowanie treści z wartością „1s” oraz możliwość Wyeliminuj zasoby blokujące renderowanie wskazujące plik style.css:

Raport Lighthouse dotyczący niezoptymalizowanej strony, w której w sekcji „Możliwości” widać FCP o wartości „1” i „Wyeliminuj zasoby blokujące”

Aby zobaczyć, jak ten kod CSS blokuje renderowanie:

  1. Otwórz stronę w Chrome.
  2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
  3. Kliknij kartę Skuteczność.
  4. W panelu Wydajność kliknij Załaduj ponownie.

W wyświetlonym logu czasu zobaczysz, że znacznik FCP znajduje się bezpośrednio po zakończeniu wczytywania CSS:

Śledzenie wydajności Narzędzi deweloperskich w przypadku niezoptymalizowanej strony pokazującej FCP po wczytaniu arkusza CSS.

Oznacza to, że przed napisaniem pojedynczego piksela na ekranie przeglądarka musi poczekać na wczytanie i przetworzenie wszystkich elementów CSS.

Optymalizuj

Aby zoptymalizować tę stronę, musisz wiedzieć, które klasy są uważane za „krytyczne”. W tym celu możesz skorzystać z narzędzia Pokrycie:

  1. W Narzędziach deweloperskich otwórz menu poleceń, naciskając Control+Shift+P lub Command+Shift+P (Mac).
  2. Wpisz „Pokrycie” i wybierz Pokaż pokrycie.
  3. Kliknij przycisk Załaduj ponownie, aby odświeżyć stronę i rozpocząć rejestrowanie pokrycia.
Zasięg pliku CSS: 55, 9% nieużywanych bajtów.

Kliknij dwukrotnie raport, aby zobaczyć zajęcia oznaczone w dwóch kolorach:

  • Zielony (krytyczny): to klasy, których przeglądarka potrzebuje, aby renderować widoczną treść (np. tytuł, podtytuł i przyciski harmonijkowe).
  • Czerwony (niekrytyczny): te style dotyczą treści, które nie są od razu widoczne (np. akapitów wewnątrz akordeonów).

Mając te informacje, zoptymalizuj CSS tak, by przeglądarka zaczynała przetwarzać style o znaczeniu krytycznym od razu po wczytaniu strony, a niekryjące się zdarzenia odkładały na później:

  • Wyodrębnij definicje klas oznaczone na zielono w raporcie uzyskanym z narzędzia pokrycia i umieść te klasy w bloku <style> w nagłówku strony:
<style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
</style>
  • Następnie wczytaj pozostałe klasy asynchronicznie, stosując ten wzorzec:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Nie jest to standardowy sposób wczytywania kodu CSS. Działa to w następujący sposób:

  • link rel="preload" as="style" wysyła żądanie arkusza stylów asynchronicznie. Więcej informacji na temat preload znajdziesz we wstępnym wczytywaniu najważniejszych zasobów.
  • Atrybut onload w elemencie link umożliwia przetworzenie CSS, gdy zakończy się wczytywanie.
  • „nulling” (brak) użycia modułu obsługi onload pomaga w niektórych przeglądarkach uniknąć ponownego wywoływania modułu po zmianie atrybutu rel.
  • Odwołanie do arkusza stylów wewnątrz elementu noscript działa jako adres zastępczy w przeglądarkach, które nie wykonują kodu JavaScript.

Strona z wynikami wygląda dokładnie tak jak poprzednia wersja, nawet jeśli większość stylów wczytuje się asynchronicznie. Oto jak wyglądają w pliku HTML style wbudowane i żądanie asynchroniczne wysyłane do pliku CSS:

Monitorowanie

Użyj Narzędzi deweloperskich, aby uruchomić kolejny log wydajności na stronie zoptymalizowanej.

Znacznik FCP pojawia się, zanim strona wyśle żądanie CSS, co oznacza, że przeglądarka nie musi czekać na wczytanie CSS, zanim ją wyrenderuje:

Śledzenie wydajności DevTools dla niezoptymalizowanej strony pokazującej FCP od załadowania CSS.

Na koniec uruchom Lighthouse na zoptymalizowanej stronie.

W raporcie widać, że strona FCP została zmniejszona o 0,2 s (wzrost o 20%):

Raport Lighthouse pokazujący wartość FCP „0, 8 s”.

Sugestia Wyeliminuj zasoby blokujące renderowanie nie znajduje się już w sekcji Możliwości. Znajduje się teraz w sekcji Udane audyty:

Raport Lighthouse z opcją „Wyeliminuj zasoby blocing” w sekcji „Passed Audits” (Zaliczone audyty).

Kolejne kroki i materiały referencyjne

Z tego przewodnika dowiesz się, jak opóźnić niekrytyczny kod CSS, ręcznie wyodrębniając nieużywany kod ze strony. Uzupełnieniem tych informacji jest wyodrębnianie najważniejszych narzędzi CSS, w których omówiono niektóre z najpopularniejszych narzędzi do wyodrębniania kluczowych elementów CSS. Znajdziesz tu także ćwiczenie z programowania, które pokazuje, jak działają one w praktyce.