Napraw ostrzeżenie Lighthouse „eliminate render-blocking resources”
Pozbądź się zasobów blokujących renderowanie i popraw Core Web Vitals
„Eliminate render-blocking resources” w skrócie
Podczas ładowania dowolnej strony z zasobami blokującymi renderowanie przeglądarka nie może rozpocząć procesu renderowania, dopóki wszystkie elementy, które to powodują, nie zostaną pobrane i przetworzone.
To łamie złotą zasadę PageSpeed: „zawsze rozpoczynaj renderowanie tak wcześnie, jak to możliwe”. Każde opóźnienie w renderowaniu strony sprawia, że ładuje się ona wolniej niż to konieczne.
Napraw to ostrzeżenie Lighthouse, usuwając lub odraczając te zasoby blokujące renderowanie.
Co to jest ostrzeżenie Lighthouse „Eliminate render-blocking resources”?
Co powoduje ostrzeżenie Eliminate render-blocking resources w Lighthouse? Lighthouse oznacza strony, które mają:
- Tag script w sekcji head, który nie jest odroczony.
Skrypty w sekcji head strony domyślnie blokują renderowanie, jeśli nie mają atrybutu defer lub async. - Podłączony arkusz stylów pasujący do medium urządzenia.
Element <link rel="stylesheet"> będzie blokować renderowanie strony, jeśli nie jest wyłączony i pasuje do medium przeglądarki. Na przykład <link rel="stylesheet" media="print"> nie będzie blokować renderowania na urządzeniach stacjonarnych.
Ostrzeżenie „Eliminate render-blocking resources” bezpośrednio wpływa na niektóre metryki Lighthouse. Teoretycznie strony z zasobami blokującymi renderowanie mogą nadal ładować się dość szybko. W praktyce często tak nie jest. Zbyt wiele zasobów blokujących renderowanie najprawdopodobniej bezpośrednio wpłynie na ważne metryki Lighthouse, takie jak First Contentful Paint (FCP) i Largest Contentful Paint (LCP).
Szybkie przypomnienie – Czym jest renderowanie?
Renderowanie to proces stosowany w tworzeniu stron internetowych, który zamienia kod witryny w interaktywne strony widoczne dla użytkowników odwiedzających witrynę. Termin ten ogólnie odnosi się do wykorzystania kodów HTML, CSS i JavaScript. Proces jest realizowany przez silnik renderujący – oprogramowanie używane przez przeglądarkę internetową do renderowania strony.
Co powoduje „render-blocking resources”?
Zasoby blokujące renderowanie to zawsze arkusze stylów i skrypty JavaScript w sekcji head strony. Oznacza to, że mogą być dodane tylko przez Twój CMS, ręcznie przez programistę lub przez wtyczkę. Szukając źródła zasobu blokującego renderowanie, sprawdź te miejsca:
- Szablon Pliki szablonu Twojej strony to pierwsze miejsce do sprawdzenia. Znajdź miejsce, gdzie znajduje się kod <head> i poszukaj zakodowanych na stałe stylów i skryptów.
- CMS czasami sam CMS wymaga pewnych skryptów (na przykład jQuery), aby działać prawidłowo.
- Wtyczki. Wtyczki są znane z wstrzykiwania stylów i skryptów na stronę.
Jak „render-blocking resources” wpływają na szybkość strony
Zasoby blokujące renderowanie uniemożliwiają wygenerowanie drzewa renderowania. Gdy drzewo renderowania nie zostało zbudowane, przeglądarka nie rozpocznie renderowania. Oznacza to, że strona pozostanie całkowicie pusta, dopóki wszystkie zasoby blokujące renderowanie nie zostaną pobrane i przetworzone. Wpłynie to na metryki takie jak First Contentful Paint i Largest Contentful Paint.
Jak naprawić „Eliminate render-blocking resources”
Aby naprawić „render blocking resources”, musisz upewnić się, że te zasoby nie blokują już renderowania. Najprostszym sposobem jest po prostu usunięcie tych zasobów. Czasami stare, nieużywane zasoby nadal blokują renderowanie strony. Jeśli nie możesz ich usunąć, powinieneś je odroczyć.
Odraczanie JavaScript
JavaScript można odroczyć, dodając atrybut defer lub async do tagu script.
//odroczony JavaScript
<script src="script.js"></script>
//asynchroniczny JavaScript
<script src="script.js"></script>
Odraczanie arkuszy stylów
Odraczanie arkuszy stylów może być nieco trudniejsze. Gdy arkusz stylów jest odroczony, strona wyrenderuje się najpierw bez stylów. Następnie, gdy style zostaną załadowane, przeglądarka zastosuje stylizację, powodując różnego rodzaju migotanie i przesunięcia układu. Dlatego potrzebujesz wbudowanego, krytycznego CSS. Krytyczny CSS to zbiór stylów potrzebnych do wyrenderowania widocznej części strony.
<style>//krytyczny CSS tutaj</style> <link rel="preload"
href="css.css"
type="text/css"
as="style"
onload="this.onload=null;this.rel='stylesheet';"/> Obejście problemu „eliminate render-blocking resources”
Czasami nie jest możliwe wyeliminowanie tych zasobów blokujących renderowanie. Możesz nie mieć dostępu do szablonu lub Twój CMS może wymagać pewnych skryptów. Istnieje kilka obejść, które pozwalają zmniejszyć wpływ tych zasobów blokujących renderowanie.
- Zminifikuj i skompresuj swoje style i skrypty.
Zminifikuj i skompresuj swoje obecne style i skrypty. Mniejsze zasoby mają mniejszy wpływ na wydajność ładowania niż większe zasoby. - Podziel duże pliki na kilka mniejszych.
Podział dużych plików na kilka mniejszych może skrócić czas ładowania zasobów. - Wyładuj zasoby na poszczególnych stronach.
Jeśli zasobu nie można usunąć z jednej strony, nie oznacza to, że jest wymagany na wszystkich stronach. Wtyczki WordPress na przykład mają tendencję do dodawania skryptów i stylów do wszystkich stron, mimo że wtyczka może nie być aktywna na danej stronie.
Make decisions with Data.
You cannot optimize what you do not measure. Install the CoreDash pixel and capture 100% of user experiences.
- 100% Capture
- Data Driven
- Easy Install
