Sekcja Możliwości w raporcie Lighthouse zawiera listę wszystkich adresów URL, które blokują pierwsze wyrenderowanie strony. Celem jest zmniejszenie wpływu tych adresów URL blokujących renderowanie przez wstawianie zasobów krytycznych, odraczanie zasobów niekrytycznych i usuwanie nieużywanych elementów.
Które adresy URL są oznaczane jako zasoby blokujące renderowanie?
Lighthouse oznacza 2 typy adresów URL blokujących renderowanie: skrypty i arkusze stylów.
Tag <script>, który:
- Znajduje się w
<head>dokumentu. - Nie ma atrybutu
defer. - Nie ma atrybutu
async.
Tag <link rel="stylesheet">, który:
- Nie ma atrybutu
disabled. Gdy ten atrybut jest obecny, przeglądarka nie pobiera arkusza stylów. - nie ma atrybutu
media, który pasuje do urządzenia użytkownika;media="all"jest uznawany za blokujący renderowanie.
Jak identyfikować zasoby o krytycznym znaczeniu
Pierwszym krokiem do zmniejszenia wpływu zasobów blokujących renderowanie jest określenie, które zasoby są krytyczne, a które nie. Użyj karty Pokrycie w Narzędziach deweloperskich w Chrome, aby zidentyfikować niekrytyczny kod CSS i JS. Gdy wczytasz lub uruchomisz stronę, na karcie zobaczysz, ile kodu zostało użyte, a ile wczytane:
Możesz zmniejszyć rozmiar stron, wysyłając tylko potrzebne Ci kod i style. Kliknij adres URL, aby sprawdzić ten plik w panelu Źródła. Style w plikach CSS i kod w plikach JavaScript są oznaczone 2 kolorami:
- Zielony (krytyczny): style wymagane do pierwszego wyrenderowania; kod niezbędny do podstawowej funkcjonalności strony.
- Czerwony (niekrytyczny): style, które mają zastosowanie do treści niewidocznych od razu; kod nie jest używany w podstawowej funkcjonalności strony.
Jak wyeliminować skrypty blokujące renderowanie
Po zidentyfikowaniu krytycznego kodu przenieś go z adresu URL blokującego renderowanie do tagu wbudowanego script na stronie HTML.
Po załadowaniu strona będzie zawierać wszystko, co jest potrzebne do obsługi jej podstawowych funkcji.
Jeśli w adresie URL blokującym renderowanie znajduje się kod, który nie jest krytyczny, możesz go zachować w adresie URL, a następnie oznaczyć adres URL atrybutami async lub defer (patrz też Dodawanie interaktywności za pomocą JavaScriptu).
Kod, który nie jest w ogóle używany, należy usunąć (patrz Usuwanie nieużywanego kodu).
Jak wyeliminować arkusze stylów blokujące renderowanie
Podobnie jak w przypadku wstawiania kodu w tagu <script>, wstaw krytyczne style w bloku <style> w sekcji head strony HTML.
Następnie wczytaj asynchronicznie pozostałe style za pomocą tagu preload link (patrz Odroczenie wczytywania nieużywanego kodu CSS).
Rozważ zautomatyzowanie procesu wyodrębniania i wstawiania kodu CSS „Above the Fold” za pomocą narzędzia Critical.
Innym sposobem na wyeliminowanie stylów blokujących renderowanie jest podzielenie ich na różne pliki uporządkowane według zapytania o media. Następnie dodaj atrybut media do każdego linku do arkusza stylów. Podczas wczytywania strony przeglądarka blokuje tylko pierwsze wyrenderowanie, aby pobrać arkusze stylów pasujące do urządzenia użytkownika (patrz Blokujący renderowanie arkusz CSS).
Na koniec zmniejsz rozmiar pliku CSS, aby usunąć dodatkowe białe znaki lub inne znaki (patrz Zmniejszanie rozmiaru pliku CSS). Dzięki temu użytkownicy otrzymają najmniejszy możliwy pakiet.
Wskazówki dotyczące konkretnych stosów
AMP
Korzystaj z narzędzi takich jak AMP Optimizer do renderowania układów AMP po stronie serwera.
Drupal
Sugerujemy używanie modułu wbudowującego w stronę krytyczny kod CSS i JavaScript, a w przypadku mniej istotnego kodu CSS lub JavaScript stosowanie atrybutu opóźnienia.
Joomla
Jest wiele wtyczek Joomli, które mogą pomóc Ci umieścić w tekście najważniejsze zasoby lub opóźnić wczytywanie tych, które są mniej ważne.
WordPress
Jest wiele wtyczek WordPressa, które mogą pomóc Ci umieścić w tekście najważniejsze zasoby lub opóźnić wczytywanie mniej ważnych zasobów.