Wyeliminuj zasoby blokujące renderowanie

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.

Zrzut ekranu pokazujący kontrolę zasobów blokujących renderowanie w Lighthouse

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 media pasującego do urządzenia użytkownika. Element media="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:

Narzędzia deweloperskie w Chrome: karta Zasięg
Narzędzia deweloperskie w Chrome: karta Zasięg.

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.

Zasoby