W sekcji Możliwości raportu Lighthouse znajdziesz listę wszystkich adresów URL blokujących pierwsze wyrenderowanie strony. Celem jest zmniejszenie wpływu takich adresów URL blokujących renderowanie przez wbudowanie zasobów krytycznych, odroczenie niekrytycznych zasobów i usunięcie wszystkich nieużywanych zasobów.
Które adresy URL są oznaczane jako zasoby blokujące renderowanie?
Lighthouse oznacza 2 typy adresów URL blokujących renderowanie: skrypty i arkusz stylów.
Tag <script>:
- Znajduje się w
<head>dokumentu. - Nie ma atrybutu
defer. - nie ma atrybutu
async.
Tag <link rel="stylesheet">:
- Nie ma atrybutu
disabled. Jeśli ten atrybut jest obecny, przeglądarka nie pobiera arkusza stylów. - Nie ma atrybutu
media, który pasuje do urządzenia użytkownika. Elementmedia="all"blokuje renderowanie.
Jak zidentyfikować kluczowe zasoby
Pierwszym krokiem w kierunku zmniejszenia wpływu zasobów blokujących renderowanie jest określenie, które z nich są kluczowe, a które nie. Aby zidentyfikować niekrytyczny kod CSS i JS, użyj karty Pokrycie w Narzędziach deweloperskich w Chrome. Gdy wczytasz lub uruchamiasz stronę, na karcie widać, ile kodu zostało użyte, a ile wczytano:
Możesz zmniejszyć rozmiar stron, przesyłając tylko potrzebny kod i style. Kliknij adres URL, aby sprawdzić plik w panelu Źródła. Style w plikach CSS i kod w plikach JavaScript są oznaczone dwoma kolorami:
- Zielony (krytyczny): style wymagane do pierwszego wyrenderowania; kod niezbędny do podstawowej funkcjonalności strony.
- Czerwony (niekrytyczny): style stosowane do treści, które nie są widoczne od razu; kod nie jest używany w podstawowej funkcji strony.
Jak wyeliminować skrypty blokujące renderowanie
Po zidentyfikowaniu kodu krytycznego przenieś go z adresu URL blokującego renderowanie do tagu wbudowanego script na stronie HTML.
Po załadowaniu strony będzie ona miała wszystko, czego potrzebuje do obsługi jej podstawowej funkcjonalności.
Jeśli w adresie URL blokującym renderowanie znajduje się kod, który nie jest niezbędny, możesz go zachować w adresie URL, a następnie oznaczyć go atrybutami async lub defer (patrz też Dodawanie interakcji za pomocą JavaScriptu).
Kod, który nie jest w ogóle używany, powinien zostać usunięty (patrz Usuwanie nieużywanych kodów).
Jak wyeliminować pliki czcionek blokujące renderowanie
Podobnie jak w przypadku umieszczania kodu w tagu <script>, wstawiaj ważne style wymagane do pierwszego wyświetlenia w bloku <style> w miejscu head strony HTML.
Następnie wczytaj pozostałe style asynchronicznie za pomocą linku preload (patrz Przekazywanie nieużywanego kodu CSS).
Rozważ zautomatyzowanie procesu wyodrębniania i wstawiania kodu CSS „Above the Fold” za pomocą Critical tool.
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 multimediów do każdego linku do arkusza stylów. Podczas wczytywania strony przeglądarka blokuje tylko pierwsze wyrenderowanie, aby pobrać arkusze stylów dopasowane do urządzenia użytkownika (patrz CSS blokujący renderowanie).
Na koniec zmniejsz plik CSS, aby usunąć dodatkowe odstępy i znaki (zobacz Zmniejszanie kodu CSS). Dzięki temu użytkownicy otrzymają jak najmniejszą paczkę.
Wskazówki dotyczące stosu
AMP
Korzystaj z narzędzi takich jak AMP Optimizer, aby renderować układy 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 tych, które są mniej ważne.