Lazy loading (ładowanie leniwe lub opóźnione) to technika polegająca na ładowaniu obrazów i zasobów strony internetowej dopiero wtedy, gdy mają się pojawić na ekranie użytkownika — zamiast ładowania wszystkiego naraz podczas pierwszego renderowania. Dla sklepów e-commerce z dziesiątkami lub setkami zdjęć produktów ta optymalizacja drastycznie zmniejsza początkową wagę strony i poprawia postrzeganą wydajność przez odwiedzających.
Jak działa lazy loading?
Bez lazy loadingu przeglądarka pobiera wszystkie obrazy zawarte w HTML podczas początkowego ładowania — w tym te umieszczone daleko poniżej widocznego obszaru, których odwiedzający może nigdy nie zobaczyć. Przy lazy loadingu ładowane są tylko obrazy widoczne w widocznym obszarze (viewport) lub w jego bezpośrednim sąsiedztwie. Pozostałe czekają, aż użytkownik przewinie stronę do odpowiedniego miejsca.
Efekt jest natychmiastowy: strona wyświetla się szybciej, zużywa się mniej danych, a serwer otrzymuje mniej jednoczesnych żądań. Na stronie listingu produktów PrestaShop z 40 artykułami może to zmniejszyć liczbę ładowanych na wejściu obrazów z 40 do zaledwie 6–8 — znaczna oszczędność wagowa.
Natywny lazy loading HTML: atrybut loading="lazy"
Od 2019–2020 r. wszystkie nowoczesne przeglądarki obsługują lazy loading natywnie za pomocą prostego atrybutu HTML na tagu img: `loading="lazy"`. Wystarczy dodać ten atrybut, aby przeglądarka automatycznie zarządzała opóźnionym ładowaniem — bez potrzeby JavaScript ani bibliotek zewnętrznych.
Przykład: `
`. Podanie atrybutów width i height jest ważne: pozwala przeglądarce zarezerwować miejsce w układzie strony jeszcze przed załadowaniem obrazu, zapobiegając przesunięciom wizualnym (CLS — Cumulative Layout Shift).
Podejście JavaScript: API Intersection Observer
Przed pojawieniem się natywnego wsparcia — i dziś jeszcze w zaawansowanych przypadkach — lazy loading był implementowany za pomocą JavaScript API Intersection Observer. Ten interfejs API wykrywa precyzyjnie, kiedy element DOM wchodzi do viewportu, i w tym momencie wyzwala ładowanie obrazu. Daje większą kontrolę: można zdefiniować margines wyzwolenia (np. rozpocząć ładowanie 300px przed wejściem obrazu w obszar widoczny), aby wyeliminować wszelkie efekty migotania.
Nigdy nie stosuj lazy loadingu do obrazów above-the-fold!
Wpływ na Core Web Vitals
Prawidłowo zastosowany lazy loading poprawia kilka wskaźników Core Web Vitals. Zmniejsza całkowitą wagę ładowaną na początku, co polepsza LCP (Largest Contentful Paint) dla obrazów above-the-fold — przeglądarka przeznacza przepustowość na zasoby priorytetowe zamiast rozdzielać ją między wszystkie obrazy na stronie. Zmniejsza też TBT (Total Blocking Time) przez redukcję wstępnego przetwarzania sieciowego.
Odwrotnie, źle zastosowany — zwłaszcza przez objęcie lazy loadingiem obrazu hero — może gwałtownie podnieść LCP. To jeden z najczęstszych błędów wykrywanych w audytowanych sklepach PrestaShop: motyw stosujący loading="lazy" do wszystkich obrazów bez wyjątku, degradując dokładnie tę metrykę, którą miał poprawić.
Czy Google indeksuje obrazy z lazy loadingiem?
Tak. Googlebot potrafi zobaczyć i zaindeksować obrazy ładowane z lazy loadingiem. Google potwierdził, że jego crawler wykonuje JavaScript i czeka na uruchomienie opóźnionych ładowań. Zaleca się jednak stosowanie natywnego HTML lazy loadingu (atrybutu loading) zamiast własnej implementacji JavaScript, aby zagwarantować optymalne indeksowanie.
Lazy loading i CDN: zwycięska kombinacja
Lazy loading w PrestaShop
PrestaShop nie oferuje natywnego lazy loadingu aktywowanego jednym kliknięciem w panelu administracyjnym. Implementacja zależy od używanego szablonu (motywu). Nowsze motywy (Classic 1.7+, Hummingbird) zazwyczaj zawierają atrybut loading="lazy" dla obrazów listingu. Jeśli Twój motyw tego nie przewiduje, konieczna jest modyfikacja odpowiednich szablonów Smarty lub instalacja dedykowanego modułu.
- Obrazy na stronach listingu (kategorie, wyniki wyszukiwania, nowości): idealne dla lazy loadingu — zazwyczaj znajdują się poza początkowym widocznym obszarem
- Główne zdjęcie na karcie produktu: NIE stosować lazy loadingu — często jest to element LCP strony
- Miniatury w koszyku lub blokach «produkty powiązane»: lazy loading zalecany
- Banery hero na stronie głównej: NIE stosować lazy loadingu, użyć fetchpriority="high"
- Obrazy w recenzjach klientów lub treściach akordeonu: lazy loading zalecany