Odrocz niekrytyczny kod CSS

Demián Renzulli

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

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

Przykład: nieoptymalne ładowanie CSS

Ten 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 strony w taki sposób, by tylko style krytyczne były ładowane synchronicznie, a pozostałe (w tym style akapitu) – 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 z FCP o wartości „1” i „Wyeliminuj zasoby blokujące” w sekcji „Możliwości”
Raport Lighthouse sugeruje uproszczenie arkusza stylów, aby strony ładowały się szybciej.

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 komputerze Mac), 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.
Na niezoptymalizowanej stronie demonstracyjnej FCP nie może zostać zrealizowane, dopóki CSS nie zakończy się wczytywanie.

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 zajęcia są uważane za krytyczne. Aby to sprawdzić, użyj narzędzia pokrycia:

  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 Załaduj ponownie, aby odświeżyć stronę i rozpocząć rejestrowanie pokrycia.
Zasięg pliku CSS: 55, 9% nieużywanych bajtów.
Raport Stan w indeksie pokazuje, jaka część Twojej usługi porównywania cen jest rzeczywiście używana przy wstępnym wczytaniu strony.

Kliknij dwukrotnie raport, aby wyświetlić szczegóły:

  • Zajęcia oznaczone na zielono są kluczowe. Przeglądarka potrzebuje ich do wyrenderowania widocznej zawartości, w tym tytułu, podtytułu i przycisków akordeonu.
  • Klasy oznaczone na czerwono nie są krytyczne i dotyczą tylko treści niewidocznych od razu, np. ukrytych akapitów.

Mając te informacje, zoptymalizuj CSS tak, by przeglądarka mogła zacząć przetwarzać style o znaczeniu krytycznym zaraz po wczytaniu strony i odłożyć te, które nie są niezbędne, na później:

  1. Wyodrębnij definicje klas oznaczone na zielono w raporcie dotyczącym stanu 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>

  2. Ładuj 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 pozwala przeglądarce przetworzyć CSS po zakończeniu wczytywania arkusza stylów.
  • „nulling” (brak wartości) modułu obsługi onload po użyciu pozwala w niektórych przeglądarkach uniknąć ponownego wywoływania tego modułu przy przełączaniu atrybutu rel.
  • Odwołanie do arkusza stylów w elemencie noscript umożliwia zastępstwo przeglądarek, które nie wykonują kodu JavaScript.

Strona z wynikami wygląda identycznie jak poprzednia wersja, nawet wtedy, gdy większość stylów wczytuje się asynchronicznie. Tak wyglądają style wbudowane i żądanie asynchroniczne wysyłane do pliku CSS w pliku HTML:

Monitorowanie

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

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 Narzędzi deweloperskich dla zoptymalizowanej strony pokazujące FCP od załadowania CSS.
Na zoptymalizowanej stronie funkcja FCP może się rozpocząć przed załadowaniem arkusza stylów.

Na koniec uruchom Lighthouse na zoptymalizowanej stronie.

W raporcie zobaczysz, że wartość strony FCP została zmniejszona o 0,2 s (wzrost o 20%):

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

Sugestia Wyeliminuj zasoby blokujące renderowanie nie wyświetla się już w sekcji Możliwości. Zamiast niej znajduje się w sekcji Udane audyty:

Raport Lighthouse z opcją „Pozbądź się zasobów blokujących” w sekcji „Zaliczone audyty”.
Strona przechodzi kontrolę zasobów blokujących.

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. W przypadku bardziej złożonych środowisk produkcyjnych przewodnik po wyodrębnieniu najważniejszych elementów CSS zawiera omówienie niektórych najpopularniejszych narzędzi do wyodrębniania kluczowych elementów CSS oraz ćwiczenie z programowania, które pokazuje, jak działają one w praktyce.