Optymalizacja szybkości ładowania strony oraz jej zasobów to jeden z podstawowych i kluczowych elementów, na który należy zwrócić uwagę podczas dostosowywania swojej strony internetowej do wymagań, nie tylko wyszukiwarki Google ale i użytkowników, którzy ją odwiedzają.

Jednym z ciekawych i całkiem wydajnym sposobem, na przyspieszenie ładowania strony jest wykorzystanie, tzw. leniwego ładowania, które wspomaga prawidłową gospodarkę zasobami wczytywanymi z serwera, za każdym razem, kiedy użytkownik trafia na naszą stronę internetową.

Lazy loading – co to takiego?

Lazy loading to metoda wczytywania zasobów z serwera, która sprawia, że obrazy i pliki wideo umieszczone na stronie nie ładują się wszystkie od razu po jej otwarciu, lecz w momencie, w którym użytkownik wykona akcję i znajdzie się w części strony, w której dane zasoby (obrazy / wideo) się znajdują.

Google w swoim teście wydajności i szybkości ładowania strony PageSpeed Insights również sugeruje by skorzystać z “leniwego ładowania” obrazów, które znajdują się poza ekranem:

page speed insights - lazy loading

Zminimalizowanie konieczności wczytywania wielu zasobów strony, które nie są wymagane od razu po otwarciu może mieć znaczący wpływ na szybkość ładowania się strony, co stanowi istotny czynnik rankingowy dla wyszukiwarki Google.

Ze względu na swoje właściwości, lazy loading doskonale sprawdzi się zarówno na stronach contentowych, np. blogach, jak i na stronach sklepów internetowych, które na podstronach kategorii i stronach produktowych zamieszczają dużą ilość zdjęć, prezentujących ofertę.

Lazy loading jest de facto metodą pożądaną przez Google, w związku z czym od wersji Chrome 76 dodana została natywna obsługa “leniwego ładowania”.

“Starting with Chrome 76, you’ll be able to use the new loading attribute to lazy-load resources without the need to write custom lazy-loading code or use a separate JavaScript library.”

Do tej pory deweloperzy chcący wykorzystać możliwości płynące z lazy loadingu musieli implementować taką funkcjonalność poprzez: “Intersection Observer API” lub stosowanie zróżnicowanych i skomplikowanych eventów na stronie.

Dzięki aktualizacji przeglądarki Chrome i natywnej obsłudze lazy loading poprzez dodanie nowego atrybutu “loading” implementacja takiej funkcjonalności staje się znacznie łatwiejsza. Natywne leniwe ładowanie obrazów i iframe’ów działa nawet wówczas gdy wyłączona jest obsługa JavaScript.

Przykład obrazu i elementu iframe z nowym atrybutem loading=”lazy”

loading lazy attribute

Atrybut loading obsługuje następujące wartości:

  • auto – standardowe zachowanie przeglądarki, równoznaczne z brakiem nowego atrybutu.
  • lazy – odkłada wczytywanie zasobów do momentu osiągnięcia pewnej odległości od wczytanej początkowo strony.
  • eager – wczytuje zasoby strony natychmiast, bez względu na to, gdzie na stronie są ulokowane.

Wszystkie obrazy, które są od razu widoczne w części ekranu po otwarciu strony i bez konieczności scrollowania (above the fold) będą wczytywać się normalnie. Pozostałe zasoby będą wczytywać się w momencie kiedy użytkownik będzie się do nich zbliżał podczas przewijania strony.

Leniwe wczytywanie obrazów

By zapobiec ponownemu wczytywaniu contentu na stronie, po tym jak obraz został już wyświetlony zalecane jest bezpośrednie ustalenie wysokości i szerokości obrazu lub dodanie stylów inline:

img lazy loading

Obrazy wykorzystujące element <picture> również mogą być leniwie wczytywane, jednak to przeglądarka zadecyduje, który obraz wczytać z elementu <source>:

picture lazy loading

Leniwe wczytywanie iframe

Atrybut loading oddziałuje na iframe’y nieco inaczej niż na obrazy, w zależności od tego, czy umieszczony na stronie element iframe został ukryty. 

Przeglądarka Chrome korzysta z następujących kryteriów do określenia czy iframe jest ukryty:

  • wysokość i szerokość iframe jest równa bądź mniejsza niż 4 px,
  • wykorzystywane są atrybuty display: none lub visibility: hidden,
  • iframe jest umieszczony poza ekranem wykorzystując ujemne parametry X i Y.

Jeżeli któreś z tych kryteriów zostanie spełnione, Chrome uzna dany iframe za ukryty i w większości przypadków nie zastosuje wobec niego lazy loading.

Pełna treść specyfikacji: https://web.dev/en/native-lazy-loading/

Demo natywnej funkcjonalności: https://mathiasbynens.be/demo/img-loading-lazy