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”](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-unopti-ea4f2b5757cb6.png?authuser=9&hl=pl)
Aby zobaczyć, jak ten kod CSS blokuje renderowanie:
- Otwórz stronę w Chrome.
- Naciśnij
Control+Shift+J
(lubCommand+Option+J
na komputerze Mac), aby otworzyć Narzędzia deweloperskie. - Kliknij kartę Skuteczność.
- 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.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-724db16c16b84.png?authuser=9&hl=pl)
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:
- W Narzędziach deweloperskich otwórz menu poleceń, naciskając
Control+Shift+P
lubCommand+Shift+P
(Mac). - Wpisz „Pokrycie” i wybierz Pokaż pokrycie.
- Kliknij Załaduj ponownie, aby odświeżyć stronę i rozpocząć rejestrowanie pokrycia.
![Zasięg pliku CSS: 55, 9% nieużywanych bajtów.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/coverage-css-file-showi-7147a6123af9d.png?authuser=9&hl=pl)
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:
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>
Ł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 tematpreload
znajdziesz we wstępnym wczytywaniu najważniejszych zasobów.- Atrybut
onload
w elemencielink
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 atrybuturel
. - 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.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-e14b71d2acb39.png?authuser=9&hl=pl)
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”.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-893a491e6aa3.png?authuser=9&hl=pl)
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”.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-e989cb5e2e2fd.png?authuser=9&hl=pl)
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.