Napraw ostrzeżenie 'Largest Contentful Paint image was lazily loaded' w Lighthouse

Largest Contentful Paint image was lazily loaded - w skrócie.

Lazy loading obrazu Largest Contentful Paint wywoła ostrzeżenie Lighthouse. Obrazy z lazy loading zostaną umieszczone w kolejce do pobrania znacznie później niż obrazy bez lazy loading (eager). Spowoduje to późniejsze wyrenderowanie obrazu i opóźnienie metryki Largest Contentful Paint. 

Przeglądarki są wystarczająco inteligentne, żeby to wykryć, prawda? Tak, przeglądarki są dość inteligentne, ale nie w tym przypadku!

Kiedy stosujesz lazy loading na elemencie obrazu, wyraźnie mówisz przeglądarce, aby obniżyła priorytet tego obrazu.

Oznacza to, że wszystkie inne obrazy bez lazy loading zostaną zaplanowane do pobrania wcześniej niż obrazy z lazy loading. Gdy ten obraz z lazy loading jest Twoim elementem LCP, prawdopodobnie opóźnisz swój LCP. Być może nawet znacznie!

Sytuacja staje się jeszcze gorsza, gdy używasz bibliotek lazy loading opartych na JavaScript, takich jak lazysizes.js. Teraz przeglądarka nie tylko opóźnia element obrazu LCP, ale musisz też czekać na pobranie i wykonanie JavaScript.

Napraw ostrzeżenie Lighthouse, usuwając atrybut loading="lazy" z obrazu LCP lub aktualizując filtry w swoich wtyczkach, aby ominąć lazy loading dla obrazu LCP.

Czym jest ostrzeżenie 'Largest Contentful Paint image was lazily loaded'?

To ostrzeżenie pojawia się, gdy obraz Largest Contentful Paint jest ładowany z lazy loading przez przeglądarkę. Dlaczego? Ponieważ lazy loading najważniejszego obrazu na stronie (elementu Largest Contentful Paint) to zły pomysł. Dla wydajności strony powinieneś załadować ten element jak najwcześniej. Lazy loading tego elementu może opóźnić Largest Contentful Paint.

Szybkie przypomnienie: lazy loading

Lazy loading polega na tym, że element, często obraz, nie jest planowany do pobrania przez przeglądarkę natychmiast podczas ładowania strony, ale dopiero gdy element jest blisko widocznej części ekranu. Istnieją 2 metody lazy loading.

Natywny lazy loading

Natywny lazy loading wykorzystuje natywne API lazy loading przeglądarki. Dla obrazów jest to tak proste jak dodanie loading="lazy" do tagu obrazu. Natywny lazy loading jest obecnie obsługiwany przez wszystkie nowoczesne przeglądarki.

<img  
     src="image.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

Lazy loading oparty na JavaScript

Lazy loading oparty na JavaScript wykorzystuje API JavaScript o nazwie intersection observer, aby określić, kiedy obraz jest w widocznym viewport lub blisko niego. Gdy obraz jest w widocznym viewport, src obrazu jest zamieniany na docelowy obraz. Zazwyczaj można rozpoznać lazy loading oparty na JavaScript po atrybucie data-src na obrazie. Lazy loading oparty na JavaScript jest obsługiwany przez jeszcze więcej przeglądarek, ale ma poważną wadę: 'wykorzystuje JavaScript'. Aby lazy loading w ogóle mógł się rozpocząć, plik JavaScript musi zostać pobrany. Oznacza to, że lazy loading oparty na JavaScript nigdy nie będzie tak szybki i wydajny jak natywny lazy loading

<img  
     src="small-placeholder.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

Jak 'lazy loading obrazu Largest Contentful Paint' wpływa na wydajność strony?

Lazy loading tego elementu opóźni moment, w którym obraz LCP zostanie wyrenderowany na ekranie. Spowoduje to, że odwiedzający uzna, że strona ładuje się wolniej, ponieważ potrzeba więcej czasu, aby była 'wizualnie gotowa'

Najważniejszy obraz, często element LCP, powinien być załadowany natychmiast, aby zapewnić jak najszybsze wyrenderowanie na ekranie.

Teraz możesz pomyśleć, że przeglądarka byłaby wystarczająco inteligentna, żeby to wykryć? Mylisz się! Kiedy stosujesz lazy loading na elemencie obrazu, wyraźnie mówisz przeglądarce, aby obniżyła priorytet tego obrazu. Oznacza to, że wszystkie inne obrazy bez lazy loading zostaną zaplanowane do pobrania wcześniej niż obrazy z lazy loading. Gdy ten obraz z lazy loading jest Twoim elementem LCP, prawdopodobnie opóźnisz swój LCP. Być może nawet znacznie!

Sytuacja staje się jeszcze gorsza, gdy używasz bibliotek lazy loading opartych na JavaScript, takich jak lazysizes.js. Teraz przeglądarka nie tylko opóźnia element obrazu LCP, ale musisz też czekać na pobranie i wykonanie JavaScript.

Wystarczy spojrzeć na kartę sieci w Chrome, gdzie zastosowałem lazy loading na obrazie LCP (HERO.jpg) i eager loading na 6 innych obrazach. Zobaczysz, że obraz HERO jest ostatnim obrazem, który zaczyna się pobierać i również ostatnim, który kończy pobieranie!

Trochę więcej szczegółów

Przejdźmy teraz do bardziej technicznych aspektów. Dlaczego przeglądarka nie może tego wykryć samodzielnie? Ponieważ stosując lazy loading, konkretnie instruujesz przeglądarkę, aby obniżyła priorytet obrazu. W wielu przypadkach oznacza to, że przeglądarka zacznie pobierać inne zasoby jako pierwsze. I to właśnie powoduje opóźnienie LCP.

• Obrazy z lazy loading zostaną umieszczone w kolejce do pobrania znacznie później niż obrazy bez lazy loading (eager).
• Obrazy z lazy loading często są pobierane z niskim priorytetem.
• Inne elementy, takie jak zwykłe obrazy, odroczone skrypty, czcionki itp., mogą zostać zaplanowane do pobrania wcześniej niż obrazy z lazy loading.
• Lazy loading oparty na JavaScript zależy od pliku JavaScript, który musi zostać pobrany i wykonany, zanim lazy loading w ogóle może się rozpocząć.
  

Jak naprawić 'Largest Contentful Paint image was lazily loaded'

Naprawienie ostrzeżenia o lazy loading obrazu Largest Contentful Paint jest proste. Po prostu nie stosuj lazy loading na tym obrazie.

W teorii

• Jeśli używasz natywnego lazy loading, usuń loading="lazy" z elementu LCP lub zmień go na loading="eager"
• Jeśli używasz lazy loading opartego na JavaScript, rozważ przejście na szybszy natywny lazy loading lub po prostu wyklucz obraz LCP z lazy loading.
• Jeśli używasz komponentu obrazu, takiego jak next/image, ustaw strategy="eager".

W praktyce

W praktyce może to spowodować pewne problemy. Wiele stron korzysta z wtyczek optymalizacyjnych, które automatycznie stosują lazy loading na wszystkich obrazach na stronie. Te wtyczki nie rozróżniają ważnych, zawsze widocznych obrazów od obrazów poniżej linii widoczności.

Większość wtyczek pozwala na 'ominięcie lazy loading' na podstawie nazwy pliku, nazwy klasy lub innych atrybutów. Oznacza to, że będziesz musiał przeczytać dokumentację swojej wtyczki lub po prostu wyszukać '[nazwa Twojej wtyczki] + bypass lazy loading'. Następnie edytuj plik szablonu i odpowiednio zmień główny obraz lub zmień obrazy w edytorze strony.

Obejście problemu 'Largest Contentful Paint image was lazily loaded'

Czasami Twój CMS nie pozwala na zmianę ustawień lazy loading obrazów. W takim przypadku istnieją obejścia, które mogą zminimalizować wpływ.

• Zastosuj lazy loading na wszystkich obrazach, aby upewnić się, że obrazy poniżej linii widoczności z ustawieniem 'eager' nie są pobierane przed obrazem LCP
  
• Unikaj obrazów tła, aby upewnić się, że żadne obrazy tła nie są pobierane przed elementem LCP
  
• Wstępnie załaduj element LCP. Zapewni to, że obraz LCP zostanie zaplanowany do pobrania jak najwcześniej
  
• Wyłącz lazy loading oparty na JavaScript i przejdź na natywny lazy loading. Przynajmniej usunie to opóźnienie związane z JavaScript
  
• Dodaj fetchpriority = "high" do elementu LCP. Spowoduje to zaplanowanie obrazu do wczesnego pobrania
  
• Zoptymalizuj wszystkie swoje obrazy. Używaj responsywnych obrazów i formatów obrazów nowej generacji, aby skrócić czas pobierania obrazów.