Odrocz niekrytyczny kod CSS

Demián Renzulli

Pliki CSS to zasoby blokujące renderowanie: muszą zostać załadowane i przetworzone, zanim przeglądarka zacznie renderować stronę. Renderowanie stron internetowych zawierających niepotrzebnie duże arkusze stylów trwa dłużej.

Z tego przewodnika dowiesz się, jak opóźniać niekrytyczne elementy kodu CSS, aby zoptymalizować ścieżkę renderowania krytycznych elementów i poprawić wskaźnik First Contentful Paint (FCP).

Przykład: nieoptymalne ładowanie CSS

Ten przykład zawiera akordeon składający się z 3 ukrytych akapitów tekstu, z których każdy ma styl przypisany do innej klasy:

Ta strona wymaga pliku CSS z 8 klasami, ale nie wszystkie z nich są niezbędne do renderowania „widocznej” treści.

Celem tego przewodnika jest zoptymalizowanie strony tak, aby tylko ważne style były wczytywane synchronicznie, a pozostałe (w tym style akapitów) – w sposób niezablokowany.

Zmierz odległość

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

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

Aby zobaczyć, jak ten kod CSS blokuje renderowanie:

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

W wynikowym śledzeniu zobaczysz, że znacznik FCP jest umieszczony bezpośrednio po zakończeniu wczytywania CSS:

Oznacza to, że przed wyrenderowaniem pojedynczego piksela na ekranie przeglądarka musi czekać na załadowanie i przetworzenie całego kodu CSS.

Optymalizuj

Aby zoptymalizować tę stronę, musisz wiedzieć, które klasy są uważane za krytyczne. Aby to sprawdzić, użyj narzędzia do sprawdzania zasięgu:

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

Aby wyświetlić szczegóły, kliknij dwukrotnie raport:

• Zajęcia oznaczone na zielono są kluczowe. Przeglądarka potrzebuje ich do renderowania widocznych treści, w tym tytułu, napisów i przycisków harmonijki.
• Klasy oznaczone na czerwono nie mają krytycznego znaczenia i wpływają tylko na treści, które nie są od razu widoczne, np. ukryte akapity.

Za pomocą tych informacji zoptymalizuj pliki CSS, aby przeglądarka mogła rozpocząć przetwarzanie ważnych stylów natychmiast po załadowaniu strony, a nieistotnych przesunąć na później:

1. Wyodrębnij definicje klas oznaczone na zielono w raporcie stanu i umieść te klasy w bloku <style> na początku 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 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:

• link rel="preload" as="style" prosi o arkusz stylów w sposób asynchroniczny. Więcej informacji o obszarze preload znajdziesz w artykule Wstępne wczytywanie kluczowych zasobów.
• Atrybut onload w link umożliwia przeglądarce przetworzenie CSS po zakończeniu wczytywania arkusza stylów.
• „nullowanie” modułu obsługi onload po jego użyciu pomaga niektórym przeglądarkom uniknąć ponownego wywołania modułu obsługi po przełączeniu atrybutu rel.
• Odwołanie do arkusza stylów wewnątrz elementu noscript stanowi rozwiązanie alternatywne dla przeglądarek, które nie wykonują kodu JavaScript.

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

Monitorowanie

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

Oznaczenie FCP pojawia się przed wysłaniem przez stronę żądania pliku CSS, co oznacza, że przeglądarka nie musi czekać na załadowanie pliku CSS przed wyrenderowaniem strony:

Na koniec uruchom Lighthouse na zoptymalizowanej stronie.

W raporcie zobaczysz, że czas wczytywania strony FCP został skrócony o 0,2 s (to aż 20% osiągniętej poprawy):

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

Dalsze kroki i materiały dodatkowe

Z tego przewodnika dowiesz się, jak opóźnić niekrytyczny kod CSS przez ręczne wyodrębnienie nieużywanego kodu na stronie. W przypadku bardziej złożonych środowisk produkcyjnych przewodnik po wyodrębnianiu krytycznych elementów CSS obejmuje niektóre z najpopularniejszych narzędzi do wyodrębniania kluczowych elementów CSS oraz zawiera ćwiczenia z programowania, dzięki którym dowiesz się, jak w praktyce działają one w praktyce.