Co to jest Lazy loading?

Lazy loading, czyli leniwe ładowanie, to technika polegająca na opóźnieniu pobierania wybranych zasobów strony do momentu, gdy są one rzeczywiście potrzebne użytkownikowi. Zamiast ładować wszystkie obrazy, ramki iframe lub inne elementy od razu po wejściu na stronę, przeglądarka może pobrać część z nich dopiero wtedy, gdy użytkownik zbliży się do miejsca, w którym mają się pojawić.

Lazy loading jest szczególnie przydatny na długich stronach, blogach, galeriach oraz w sklepach internetowych, gdzie jedna podstrona może zawierać wiele zdjęć produktów. Ograniczenie liczby zasobów pobieranych na początku może zmniejszyć transfer i przyspieszyć moment, w którym użytkownik zobaczy najważniejszą część witryny.

Nie oznacza to jednak, że lazy loading należy stosować do każdego elementu. Obrazy znajdujące się od razu w widocznym obszarze strony powinny być zwykle pobierane bez opóźnienia. Dotyczy to szczególnie grafiki, która może być elementem LCP.

Jak działa lazy loading?

Podczas standardowego ładowania przeglądarka może rozpocząć pobieranie wielu zasobów znajdujących się w kodzie strony, nawet jeśli użytkownik jeszcze ich nie widzi. Na rozbudowanej podstronie mogą to być dziesiątki zdjęć znajdujących się znacznie poniżej pierwszego ekranu.

Lazy loading zmienia tę kolejność. Zasób znajdujący się poza aktualnym viewportem, czyli widocznym obszarem strony, może poczekać z pobraniem. Przeglądarka rozpocznie jego ładowanie, gdy uzna, że użytkownik zbliża się do danego fragmentu witryny.

Przykładowo artykuł może zawierać 15 zdjęć, ale po otwarciu użytkownik widzi tylko dwa pierwsze. Bez lazy loading przeglądarka może od razu rozpocząć pobieranie wszystkich grafik. Przy leniwym ładowaniu pozostałe obrazy mogą zostać pobrane później.

Jakie elementy można ładować leniwie?

Lazy loading najczęściej kojarzy się z obrazami, ponieważ to właśnie grafiki należą często do najcięższych zasobów strony. Technika może być jednak wykorzystywana również w innych miejscach.

• obrazy – szczególnie zdjęcia znajdujące się poniżej pierwszego widocznego ekranu,
• elementy iframe – np. osadzone mapy, filmy czy zewnętrzne widżety,
• fragmenty aplikacji – kod może być pobierany dopiero wtedy, gdy użytkownik korzysta z danej funkcji,
• dodatkowe dane – aplikacja może pobierać kolejne informacje dopiero podczas przechodzenia do następnej części interfejsu.

W przypadku zasobów obsługiwanych przez JavaScript mechanizm może być bardziej rozbudowany niż zwykły atrybut HTML. Aplikacje mogą na przykład dynamicznie importować kod dopiero w chwili, gdy potrzebna jest konkretna funkcja.

Jak włączyć lazy loading w HTML?

W przypadku obrazów najprostszym rozwiązaniem jest natywny mechanizm dostępny w nowoczesnych przeglądarkach. Do elementu <img> można dodać atrybut loading="lazy".

<img
    src="zdjecie-produktu.webp"
    alt="Przykładowy produkt"
    width="800"
    height="600"
    loading="lazy"
>

Atrybut informuje przeglądarkę, że obraz nie musi zostać pobrany natychmiast i można odłożyć jego ładowanie do chwili, gdy znajdzie się odpowiednio blisko widocznego obszaru.

Podobnie można postąpić z elementem <iframe>:

<iframe
    src="https://example.com/embed"
    width="800"
    height="450"
    loading="lazy"
    title="Osadzona treść"
></iframe>

Warto podawać szerokość i wysokość obrazów. Dzięki temu przeglądarka może wcześniej zarezerwować odpowiednią przestrzeń w układzie strony. Zmniejsza to ryzyko przesuwania się treści podczas doczytywania grafik, a więc pomaga ograniczać problemy związane z CLS.

Lazy loading a Intersection Observer

W bardziej rozbudowanych implementacjach można wykorzystać JavaScript i Intersection Observer API. Mechanizm pozwala wykryć, kiedy określony element zbliża się do widocznego obszaru strony i wtedy uruchomić odpowiednią akcję.

W przypadku zwykłych obrazów i iframe najpierw warto jednak sprawdzić, czy wystarczy natywne rozwiązanie przeglądarki. Ogranicza ono ilość dodatkowego kodu potrzebnego do obsługi strony.

Lazy loading a LCP i Core Web Vitals

Lazy loading może wspierać wydajność strony, ale błędne zastosowanie potrafi dać odwrotny efekt. Szczególnie ważny jest tutaj LCP (Largest Contentful Paint), jeden ze wskaźników Core Web Vitals.

Jeżeli największym elementem widocznym po wejściu na stronę jest duże zdjęcie lub baner, dodanie do niego loading="lazy" może niepotrzebnie opóźnić rozpoczęcie pobierania. Przeglądarka potrzebuje tego obrazu od razu, więc odkładanie go na później jest sprzeczne z celem optymalizacji.

Lazy loading stosuj przede wszystkim do zasobów znajdujących się poniżej pierwszego ekranu. Elementy kluczowe dla pierwszego widoku powinny być pobierane normalnie.

W przypadku szczególnie ważnego obrazu będącego prawdopodobnym elementem LCP można również odpowiednio ustawić priorytet jego pobierania. Nie należy jednak automatycznie dodawać wysokiego priorytetu do wielu grafik, ponieważ przeglądarka musi zdecydować, które zasoby są rzeczywiście najważniejsze.

Jak działa lazy loading w WordPressie?

WordPress od kilku lat ma wbudowaną obsługę natywnego lazy loading obrazów. Oznacza to, że w typowej instalacji nie trzeba ręcznie dodawać loading="lazy" do każdej grafiki ani instalować osobnej wtyczki wyłącznie po to, aby uzyskać podstawową obsługę tego mechanizmu.

Kolejne wersje WordPressa rozwijały sposób dobierania atrybutów odpowiedzialnych za ładowanie obrazów. System stara się między innymi nie opóźniać grafik, które mogą znajdować się w pierwszym widoku, oraz odpowiednio zarządzać priorytetem ważnych zasobów.

Jeżeli korzystasz z dodatkowej wtyczki optymalizacyjnej, motywu lub narzędzia CDN, warto sprawdzić, czy nie nakłada ono własnego mechanizmu lazy loading na funkcje dostępne już w WordPressie. Podwójna optymalizacja nie musi oznaczać lepszego efektu.

Na szybkość witryny wpływa też środowisko, w którym działa CMS. Odpowiednio dobrany hosting WordPress może wspierać wydajność części serwerowej, natomiast lazy loading ogranicza liczbę zasobów pobieranych od razu przez przeglądarkę. Są to więc różne warstwy optymalizacji.

Czy lazy loading wpływa na SEO?

Lazy loading nie jest techniką, która sama w sobie zapewnia lepsze pozycje w Google. Może jednak wspierać wydajność i doświadczenie użytkownika, ponieważ ogranicza pobieranie niepotrzebnych w danym momencie zasobów. Istotny jest sposób implementacji. Jeżeli ważna treść pojawia się dopiero po kliknięciu przycisku, wykonaniu gestu lub innej czynności, robot wyszukiwarki może nie mieć do niej takiego samego dostępu jak użytkownik.

Dlatego istotna treść powinna być dostępna dla wyszukiwarki także przy zastosowaniu lazy loading. W praktyce bezpiecznym rozwiązaniem dla obrazów i iframe jest często natywny mechanizm oparty na ich położeniu względem viewportu, a nie rozwiązanie wymagające aktywnej interakcji użytkownika.

Wpływ optymalizacji można później sprawdzić za pomocą narzędzi do badania wydajności. Pomocne są między innymi PageSpeed oraz Lighthouse.

Najczęstsze błędy przy lazy loading

Samo dodanie lazy loading nie zawsze poprawia stronę. Najwięcej problemów pojawia się wtedy, gdy mechanizm zostanie użyty bez rozróżnienia zasobów ważnych i drugorzędnych.

• Lazy loading obrazu LCP. Duże zdjęcie hero lub główne zdjęcie produktu powinno być dostępne szybko, a nie celowo opóźniane.
• Leniwe ładowanie wszystkich obrazów. Grafiki znajdujące się w pierwszym widoku zwykle powinny być pobierane normalnie.
• Brak wymiarów obrazów. Jeżeli przeglądarka nie zna potrzebnej przestrzeni, doczytanie grafiki może przesunąć treść i pogorszyć CLS.
• Stosowanie kilku mechanizmów jednocześnie. Motyw, CMS i wtyczka optymalizacyjna mogą próbować zarządzać lazy loading niezależnie od siebie.
• Ukrywanie ważnej treści za interakcją. Kluczowa zawartość nie powinna pojawiać się wyłącznie po kliknięciu lub innym działaniu użytkownika, jeśli ma być dostępna również dla wyszukiwarki.
• Ignorowanie wielkości plików. Lazy loading nie zastępuje kompresji i odpowiedniego formatu obrazów.

Warto więc równolegle optymalizować same pliki graficzne. Formaty takie jak WebP i AVIF mogą pozwolić ograniczyć rozmiar plików przy zachowaniu dobrej jakości obrazu.

Jak sprawdzić, czy lazy loading działa poprawnie?

Najprostszym sposobem jest sprawdzenie kodu HTML strony i zweryfikowanie, czy obrazy znajdujące się niżej mają odpowiednie atrybuty. Sam atrybut nie wystarcza jednak do oceny całej konfiguracji.

W narzędziach deweloperskich przeglądarki można otworzyć zakładkę Network i obserwować żądania podczas przewijania strony. Jeżeli grafika znajdująca się daleko poniżej pierwszego ekranu zostaje pobrana dopiero w chwili zbliżania się do niej, mechanizm działa zgodnie z założeniem.

Warto też sprawdzić stronę w PageSpeed Insights lub Lighthouse. Jeżeli po wdrożeniu lazy loading pogorszył się LCP, pierwszym elementem do kontroli powinny być obrazy znajdujące się w górnej części strony. Przy analizie zwróć również uwagę na stabilność układu. Jeżeli w trakcie przewijania tekst i przyciski przesuwają się, gdy pojawiają się zdjęcia, sprawdź między innymi wymiary obrazów i sposób rezerwowania miejsca w layoucie.