Lazy loading - co to jest i jak może pomóc Twojej stronie?

Lazy loading

Lazy loading, czyli po polsku „leniwe ładowanie”, to technika, dzięki której strona internetowa ładuje tylko te elementy, które są użytkownikowi w danym momencie potrzebne. Pozostałe treści – np. obrazy, animacje, bardziej złożone skrypty – wczytywane są dopiero wtedy, gdy użytkownik przewinie stronę do miejsca, w którym są umieszczone.

Rozważmy to na przykładzie. Załóżmy, że chcesz wyszukać w Google Grafika zdjęcia Białego Domu. Po wpisaniu frazy pokazują Ci się najwyżej położone wyniki wyszukiwania:

Oczywiście, jeśli zejdziesz niżej, znajdziesz kolejne zdjęcia i odnośniki do filmów. Ich łączny rozmiar jest znacznie większy niż tych, które pojawiły się na samym początku. Właśnie dlatego ich załadowanie jest bardziej czasochłonne.

Załóżmy też, że spodobała Ci się już pierwsza fotografia i chcesz do niej przejść, a więc i zamknąć obecną stronę. W takiej sytuacji nie zobaczyłeś tak naprawdę większości zdjęć z wyników wyszukiwania. Jeśli strona załadowała je wszystkie, doszło do zwykłego zmarnowania zasobów, a Ty niepotrzebnie musiałeś dłużej czekać. Właśnie tutaj w grę wchodzi leniwe ładowanie. Jego zastosowanie sprawi, że w danym momencie załadują się jedynie te zdjęcia, które są zamieszczonena samej górze w wynikach wyszukiwania. Pozostałe zaczną się ładować wtedy, gdy przewiniesz niżej.

Eager loading

Eager loading to przeciwieństwo lazy loadingu. Czyli tradycyjne podejście, w którym wszystkie zasoby strony ładowane są od razu przy pierwszym wejściu na witrynę. Przeglądarka musi przetworzyć całą treść, wszystkie obrazy, skrypty i multimedia, zanim użytkownik zobaczy cokolwiek.

Takie rozwiązanie ma swoje plusy – cała strona jest dostępna natychmiast po pełnym załadowaniu, więc użytkownik nie musi czekać na doładowanie obrazów w trakcie scrollowania. Poza tym niektóre elementy i skrypty mogą być ze sobą na tyle powiązane, że bez ich wyrenderowania strona nie będzie wyglądać tak, jak powinna. Ale dzieje się to kosztem wydłużonego czasu ładowania i większego zużycia transferu.

I dlatego coraz częściej zastępuje się go właśnie lazy loadingiem.

Lazy loading można wdrożyć w wielu miejscach na stronie – praktycznie wszędzie tam, gdzie ładowanie zasobów od razu nie ma sensu.

Choć mówimy o „leniwym” ładowaniu, to wcale nie znaczy, że źle wpływa na funkcjonowanie strony. Proces ten niesie ze sobą wiele korzyści, o których już po części wspomnieliśmy:

1. Szybszy czas wstępnego ładowania – lazy loading zmniejsza początkowy rozmiar strony potrzebny do wczytania.
2. Mniejsze obciążenie sieci – dzięki leniwemu ładowaniu content jest przesyłany w zasadzie na żądanie, dzięki czemu nie dochodzi do transferu niepotrzebnych danych.
3. Oszczędzanie zasobów – lazy loading ogranicza zużycie nakładów zarówno po stronie serwera, jak i klienta, gdyż ładuje jedynie część contentu i wykonuje tylko wybrane skrypty.
4. Lepsze user experience – krótki czas ładowania i takie funkcje jak infinite scroll oraz leniwe ładowanie obrazów sprawiają, że korzystanie ze strony jest znacznie przystępniejsze.

Jeszcze do niedawna stosowanie lazy loading budziło pewne obawy wśród specjalistów SEO. Czy Googlebot zobaczy leniwie ładowane obrazy? Czy nie ucierpi na tym widoczność strony? Dziś już wiemy, że przy prawidłowym wdrożeniu takie wątpliwości można odłożyć na bok.

Po pierwsze, roboty Google potrafią bez problemu indeksować treści ładowane „leniwie”. Warunek? Trzeba je odpowiednio oznaczyć w pliku HTML. Najprostszym sposobem na wprowadzenie lazy loadingu jest nadanie elementowi strony atrybutu loading=”lazy”. To wystarczy. Obsługują go wszystkie popularne przeglądarki; nie wymaga żadnych dodatkowych bibliotek JavaScript… i jest wprost zalecany przez Google.

Poza tym pamiętaj o dwóch zasadach:

• Nigdy nie stosuj lazy loadingu dla zasobów above the fold! Czyli głównych zdjęć artykułów, grafik hero na stronie głównej, banerów widocznych na pierwszym miejscu na ekranie użytkownika. Opóźnienie ich ładowania bezpośrednio pogorszy jeden z głównych wskaźników Core Web Vitals – Largest Contentful Paint, który opisuje… właśnie czas ładowania największego elementu na ekranie.
• Dla wszystkich elementów ładowanych z opóźnieniem trzeba ustawiać atrybuty width oraz height – tak, aby przeglądarka wiedziała, ile przestrzeni w layoucie strony trzeba dla nich „zarezerwować”. Inaczej, gdy obraz się wczyta, może dojść do przesunięcia całego układu. A takie przeskoki nie dość, że są uciążliwe dla użytkownika, to też negatywnie wpływają na ocenę stabilności strony w CWV (odpowiedni wskaźnik to Cumulative Layout Shift).

Wspomnieliśmy o atrybucie loading=“lazy” – właśnie tym sposobem wprowadza się natywny lazy loading. Dla większości stron będzie on najlepszym i najprostszym rozwiązaniem. Żadnych dodatkowych skryptów, konfiguracji czy obciążania strony kolejnymi zależnościami – wystarczy jeden dopisek w pliku HTML.

Zobacz przykład dla grafiki:

<img src="produkt.jpg" alt="Opis produktu" loading="lazy">

a tu – dla filmu osadzonego w iframe:

<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>

Jedyny minus to fakt, że natywny lazy loading działa tylko przy prostych elementach – grafikach <img> oraz iframe’ach.

Jeżeli chcesz:

• objąć leniwym ładowaniem obrazy tła w CSS;
• dodać animację przy ładowaniu elementów (np. efekt fade-in);
• zastosować bardziej zaawansowane reguły ładowania (np. opóźnienie wczytywania o kilka sekund);
• albo wprowadzić infinite scroll

musisz posłużyć się odpowiednimi bibliotekami JavaScript. Z większością „zadań specjalnych” poradzi sobie albo lazysizes (bardzo wydajna, przystosowana pod roboty Google biblioteka ze świetnym wsparciem społeczności), albo vanilla-lazyload (nieco prostsza alternatywa, dobra do wdrożeń w czystym JS).

Według HTTP Archive już 38% wszystkich stron internetowych ma ustawiony atrybut loading=”lazy” przynajmniej dla elementów graficznych.

I warto do tego grona dołączyć, bo lazy loading to jeden z najprostszych – i zupełnie bezproblemowych z perspektywy użytkownika – sposobów, aby przyspieszyć swoją stronę. Dzięki ładowaniu wybranych plików i skryptów z opóźnieniem możesz zauważalnie skrócić czas ładowania, ograniczyć transfer danych i poprawić wyniki w Core Web Vitals. Oczywiście pod warunkiem, że unikniesz podstawowych błędów przy wdrożeniu. :)