Leniwe ładowanie obrazów — loading=lazy

<img loading="lazy" src="..."> informuje przeglądarkę, aby odroczyła pobranie obrazu do momentu, gdy ten będzie miał za chwilę wejść do obszaru widoku. Natywna obsługa we wszystkich nowoczesnych przeglądarkach sprawia, że jest to najprostszy sposób na poprawę wydajności stron zawierających dużo obrazów.

Przeglądarki stosują niewielki margines heurystyczny (zwykle kilka tysięcy pikseli poniżej dolnej krawędzi widoku). Obraz zaczyna się ładować wystarczająco wcześnie, aby został w pełni wyrenderowany, gdy użytkownik przewinie do niego stronę — leniwe ładowanie jest niezauważalne dla osób przewijających stronę uważnie.

Nie należy ustawiać loading="lazy" dla obrazów znajdujących się w początkowym obszarze widoku ani dla obrazu będącego kandydatem LCP (largest contentful paint). Odroczone ładowanie opóźnia najważniejszy element wizualny, co pogarsza zarówno postrzeganą szybkość, jak i wskaźniki Core Web Vitals.

Aby leniwe ładowanie było skuteczne, należy podać elementowi <img> jawne wartości width i height (lub użyć CSS aspect-ratio). Bez wymiarów przeglądarka nie może zarezerwować miejsca, przewijanie powoduje ponowne rozmieszczenie układu, a heurystyka leniwego ładowania działa nieprawidłowo.

Ten sam atrybut działa w przypadku elementu <iframe>. <iframe loading="lazy"> odracza ładowanie map, filmów i osadzonych treści z mediów społecznościowych znajdujących się poniżej początkowego obszaru widoku — każdy z tych elementów w przeciwnym razie pobierałby megabajty kodu JavaScript innych firm przy każdym wyświetleniu strony.

Wartością domyślną jest loading="eager" (ładowanie natychmiastowe) i rzadko zapisuje się ją jawnie. Ustawienie eager dla obrazów znajdujących się w początkowym obszarze widoku może być przydatne jako dokumentacja, sygnalizując osobom przeglądającym kod, że wybór eager był zamierzony.

Leniwe ładowanie doskonale współdziała z obrazami responsywnymi. Przeglądarka nadal wybiera właściwy wariant z srcset — po prostu odracza jego pobranie. Nie jest wymagana dodatkowa koordynacja między loading="lazy" a srcset.

Połącz leniwe ładowanie z decoding="async", aby umożliwić przeglądarce dekodowanie obrazu poza głównym wątkiem. Zapobiega to blokowaniu obsługi wejścia podczas przewijania, gdy po dłuższym, intensywnym przewijaniu jednocześnie pojawia się wiele obrazów.

CSS background-image nie może być natywnie ładowany leniwie. W przypadku teł bohatera znajdujących się w początkowym obszarze widoku nie stanowi to problemu; dla teł poniżej tego obszaru należy użyć IntersectionObserver, aby podmienić URL, gdy element zbliży się do obszaru widoku.

Podczas drukowania strony przeglądarka ładuje wszystkie obrazy bez odroczenia, niezależnie od ustawienia loading="lazy", aby drukowana kopia była kompletna. Nie trzeba dodawać specjalnych wyjątków dla leniwie ładowanych obrazów w arkuszach stylów przeznaczonych do druku.

Audyt Lighthouse „Defer offscreen images” wymienia każdy obraz, dla którego należy użyć loading="lazy". Filtrowanie w panelu Network według „Img” oraz widok „Waterfall” pokazują rozłożone w czasie pobrania generowane przez leniwe ładowanie — w galeriach obrazów liczba początkowych żądań znacząco spada.

Dlaczego ustawienie loading="lazy" dla obrazu bohatera znajdującego się u góry strony jest szkodliwe?

Ustawienie loading="lazy" dla elementów <img> i <iframe> znajdujących się poza obszarem widoku to poprawa wydajności za pomocą jednego atrybutu. Należy połączyć je z jawnymi wartościami width/height (aby zarezerwować miejsce), srcset (dla responsywności) oraz decoding="async" (aby przewijanie pozostało płynne). Nie należy nigdy stosować go do obrazu LCP ani do elementów widocznych w początkowym obszarze widoku.