Sekcja Możliwości w raporcie Lighthouse zawiera wszystkie adresy URL, które blokują pierwsze wyrenderowanie strony. Celem jest zmniejszenie wpływu adresów URL blokujących renderowanie przez wbudowanie zasobów krytycznych, odroczenie zasobów niekrytycznych i usunięcie nieużywanych zasobów.
Które adresy URL są oznaczane jako zasoby blokujące renderowanie?
Lighthouse zgłasza 2 typy adresów URL z blokadą renderowania: skrypty i arkusze stylów.
Tag <script>, który:
- Jest w
<head>dokumentu. - Nie ma atrybutu
defer. - Nie ma atrybutu
async.
Tag <link rel="stylesheet">, który:
- Nie ma atrybutu
disabled. Gdy ten atrybut występuje, przeglądarka nie pobiera arkusza stylów. - Nie ma atrybutu
mediapasującego do urządzenia użytkownika. Elementmedia="all"jest uważany za blokujący renderowanie.
Identyfikowanie zasobów o znaczeniu krytycznym
Pierwszym krokiem do zmniejszania wpływu zasobów blokujących renderowanie jest określenie, co jest kluczowe, a co nie. Aby zidentyfikować niekrytyczne fragmenty kodu CSS i JS, użyj karty Zasięg w Narzędziach deweloperskich w Chrome. Podczas wczytywania lub uruchamiania strony na tej karcie znajdziesz informacje o tym, ile kodu został użyty w porównaniu z ilością wczytanego:
Możesz zmniejszyć rozmiar stron, wysyłając tylko kod i style, których potrzebujesz. Kliknij adres URL, aby sprawdzić dany plik w panelu Źródła. Style w plikach CSS i kod w plikach JavaScript są oznaczone w 2 kolorach:
- Zielony (krytyczny): style wymagane przy pierwszym wyrenderowaniu; kod, który ma kluczowe znaczenie dla działania głównej funkcji strony.
- Czerwony (niekrytyczny): style, które dotyczą treści, które nie są widoczne od razu, a kod nie jest używany w ramach głównej funkcji strony.
Jak wyeliminować skrypty blokujące renderowanie
Gdy znajdziesz krytyczny kod, przenieś go z adresu URL blokującego renderowanie do wbudowanego tagu script na stronie HTML.
Po wczytaniu strona będzie spełniać podstawowe funkcje.
Jeśli w adresie URL blokującym renderowanie jest kod, który nie jest krytyczny, można go zachować w adresie URL, a potem oznaczyć go za pomocą atrybutów async lub defer (zobacz też artykuł Dodawanie interakcji za pomocą JavaScriptu).
Nieużywany kod należy usunąć (patrz Usuwanie niewykorzystanego kodu).
Jak wyeliminować arkusze stylów blokujące renderowanie
Podobnie jak w przypadku kodu w tagu <script>, wbudowane style o znaczeniu krytycznym wymagane w przypadku pierwszego wyrenderowania kodu wewnątrz bloku <style> na stronie head strony HTML.
Następnie wczytaj pozostałe style asynchronicznie za pomocą linku preload (patrz Odnawianie nieużywanego kodu CSS).
Rozważ automatyzację procesu wyodrębniania i wstawiania kodu CSS w części strony widocznej na ekranie za pomocą narzędzia Krytycznego.
Innym sposobem eliminowania stylów blokowania renderowania jest podzielenie tych stylów na różne pliki uporządkowane według zapytania o multimedia. 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 Kod CSS blokujący renderowanie).
Na koniec musisz zmniejszyć kod CSS, by usunąć dodatkowe odstępy lub znaki (patrz Minifikowanie CSS). Dzięki temu będziesz mieć pewność, że wysyłasz użytkownikom najmniejszy możliwy pakiet.
Wskazówki dotyczące stosu
AMP
Użyj narzędzi takich jak AMP Optymalizator, by renderować układy AMP po stronie serwera.
Drupal
Rozważ użycie modułu wbudowującego w stronę krytyczny kod CSS i JavaScript albo asynchroniczne ładowanie zasobów za pomocą JavaScriptu, np. w ramach modułu Advanced CSS/JS Aggregation (Zaawansowane agregacje CSS/JS).
Joomla
Jest wiele wtyczek Joomla, które mogą pomóc Ci umieścić w tekście najważniejsze zasoby lub opóźnić wczytywanie mniej ważnych zasobów.
WordPress
Istnieje 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.