Odrocz niekrytyczny kod CSS

Demián Renzulli

Pliki CSS to zasoby blokujące renderowanie: muszą zostać załadowane i przetworzone, zanim przeglądarka wyrenderuje stronę. Strony internetowe zawierających niepotrzebnie duże arkusze stylów są renderowane dłużej.

Z tego przewodnika dowiesz się, jak opóźnić niekryty kod CSS, by zoptymalizować Krytyczna ścieżka renderowania i ulepszanie Pierwsze wyrenderowanie treści (FCP).

Przykład: nieoptymalne ładowanie CSS

W poniższym przykładzie użyto akordeonu z trzema ukrytymi akapitami: tekstu, z których każdy ma inny styl:

Ta strona żąda pliku CSS z ośmioma klasami, ale nie wszystkie z nich są konieczne do wyrenderowania elementu treści.

Celem tego przewodnika jest zoptymalizowanie tej strony, tak aby zawierały tylko style krytyczne są ładowane synchronicznie, a pozostałe (w tym style akapitu) są ładowane w sposób nieblokujący.

Zmierz odległość

Uruchom Lighthouse na stronie i przejdź do Skuteczność.

Raport pokazuje dane Pierwsze wyrenderowanie treści z wartością „1s”. możliwość Eliminacja zasobów blokujących renderowanie wskazująca Plik style.css:

Aby zwizualizować to, 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 Skuteczność kliknij Załaduj ponownie.

W wynikowym śledzeniu zobaczysz, że znacznik FCP został umieszczony natychmiast. po zakończeniu wczytywania kodu CSS:

Oznacza to, że przeglądarka musi czekać na wczytanie i przetworzenie całego CSS przed nałożeniem 1 piksela na ekran.

Optymalizuj

Aby zoptymalizować tę stronę, musisz wiedzieć, które klasy są uważane za krytyczne. Aby to sprawdzić, skorzystaj z narzędzia pokrycia:

1. W Narzędziach deweloperskich otwórz menu poleceń. naciskając Control+Shift+P lub Command+Shift+P (na Macu).
2. Wpisz „Pokrycie”. i wybierz Pokaż zasięg.
3. Kliknij Załaduj ponownie, aby ponownie załadować stronę i rozpocząć rejestrowanie pokrycia.

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

• Zajęcia oznaczone na zielono są kluczowe. Przeglądarka ich potrzebuje do renderowania w tym tytuł, podtytuł i przyciski akordeonu.
• Zajęcia oznaczone na czerwono nie są krytyczne, wpływa na treści, które nie są widoczne bezpośrednio, np. ukryte akapity.

Na podstawie tych informacji zoptymalizuj CSS, aby przeglądarka mogła rozpocząć przetwarzanie style krytyczne natychmiast po wczytaniu strony i opóźnienie niekrytycznego kodu CSS. na później:

1. wyodrębnić definicje zajęć oznaczone na zielono w raporcie stanu; umieść te zajęcia 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. Wczytaj pozostałe zajęcia asynchronicznie, stosując ten kod wzór:

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

To nie jest standardowy sposób wczytywania CSS. Jak to działa:

• Funkcja link rel="preload" as="style" asynchronicznie wysyła żądanie arkusza stylów. Ty Więcej informacji o preload znajdziesz w przewodniku Wstępne wczytywanie kluczowych zasobów.
• Atrybut onload w tagu link umożliwia przeglądarce przetworzenie kodu CSS, gdy: po zakończeniu wczytywania arkusza stylów.
• „nulling” po użyciu modułu obsługi onload niektóre przeglądarki unikają z ponownym wywołaniem modułu obsługi po zmianie atrybutu rel.
• Odniesienie do arkusza stylów w elemencie noscript zapewnia dla przeglądarek, które nie wykonują JavaScriptu.

Strona z wynikami wyszukiwania wygląda identycznie nawet jeśli większość stylów wczytuje się asynchronicznie. Działanie style wbudowane i asynchroniczne żądanie pliku CSS wyglądają tak, jak w kodzie HTML. plik:

Monitorowanie

Użyj Narzędzi deweloperskich, aby uruchomić kolejny log czasu Performance (w języku angielskim) w zoptymalizowaną stronę.

Znacznik FCP pojawia się, zanim strona wyśle żądanie do usługi porównywania cen, co oznacza, że parametr przeglądarka nie musi czekać na wczytanie CSS przed wyrenderowaniem strony:

Na koniec uruchom Lighthouse na zoptymalizowanej stronie.

W raporcie zobaczysz, że strona FCP została zmniejszona o 0,2 s (o 20% {/0}

Sugestia Wyeliminuj zasoby blokujące renderowanie nie jest już widoczna w sekcji Możliwości, a zamiast tego znajduje się w sekcji Zaliczone audyty:

Dalsze kroki referencje

Z tego przewodnika dowiesz się, jak opóźnić niekrytyczny kod CSS przez ręczne rozpakowywanie nieużywanego kodu na stronie. W przypadku bardziej złożonych środowisk produkcyjnych funkcja sekcja „Wyodrębnianie krytycznego przewodnika CSS” obejmuje niektóre najpopularniejsze narzędzia do wyodrębniania kluczowych fragmentów kodu CSS ćwiczenia z programowania, aby zobaczyć, praca w praktyce