Domyślnie przeglądarka pobiera wszystkie obrazy w kodzie strony od razu — nawet te w stopce, których użytkownik może nigdy nie zobaczyć. Lazy load zmienia tę kolejność.
Co to jest lazy load
Lazy load (opóźnione ładowanie) to technika wstrzymująca pobranie obrazów i elementów iframe do momentu, gdy zbliżają się one do widocznego obszaru ekranu użytkownika.
Zamiast pobierać wszystkie obrazy podczas ładowania strony, przeglądarka czeka, aż użytkownik przewinie stronę wystarczająco blisko danego elementu — dopiero wtedy go pobiera. Oszczędza to transfer danych i odciąża główne wątki sieciowe, przyspieszając wyświetlenie kluczowych treści.
Lazy load a defer loading — ważna różnica
To dwa różne mechanizmy dotyczące różnych typów zasobów.
- Lazy load dotyczy obrazów i elementów iframe (elementy wizualne)
- Defer loading dotyczy plików JavaScript (skrypty)
Artykuł Defer loading w WordPress opisuje opóźnione ładowanie skryptów. Lazy load tego nie robi i nie należy ich ze sobą mylić.
Natywna obsługa w WordPress
Od wersji WordPress 5.5 lazy load jest wbudowany w rdzeń systemu. WordPress automatycznie dodaje atrybut loading="lazy" do obrazów wstawianych przez edytor i przez funkcje szablonów.
<img src="zdjecie.jpg" loading="lazy" width="800" height="600" alt="Opis zdjęcia">
Atrybut ten jest obsługiwany przez wszystkie nowoczesne przeglądarki natywnie — bez dodatkowych bibliotek JavaScript ani żadnego narzutu na procesor urządzenia.
Pułapka LCP — kiedy lazy load szkodzi
Najczęstszy błąd: włączenie lazy loadu dla wszystkich obrazów na stronie, włącznie z głównym obrazem widocznym od razu po wejściu (above the fold).
Obraz LCP (Largest Contentful Paint) musi być pobierany jak najszybciej. Jeśli ma atrybut loading="lazy", przeglądarka może opóźnić jego pobieranie, co pogorszy wynik LCP.
WordPress próbuje automatycznie pominąć lazy load dla obrazów, które prawdopodobnie znajdują się w początkowym widoku strony. W prostych układach działa to zwykle poprawnie. W złożonych szablonach — sliderach, układach wielokolumnowych, stronach zbudowanych page builderem — algorytm może się jednak pomylić i wymagać ręcznej korekty.
Jeśli mierzysz słabe wyniki LCP mimo włączonego lazy loadu, sprawdź w Chrome DevTools, czy główny obraz strony nie ma błędnie dodanego atrybutu loading="lazy". Więcej o wskaźniku LCP: LCP w WordPress.
CLS i wymiary obrazów
Lazy load może powodować błędy CLS (Cumulative Layout Shift), jeśli obrazy nie mają zadeklarowanych wymiarów w kodzie.
Gdy obraz ładuje się bez atrybutów width i height, przeglądarka nie rezerwuje dla niego miejsca. Po załadowaniu obrazu — przeskakuje cały tekst poniżej. To generuje CLS i obniża wskaźnik stabilności wizualnej strony.
Rozwiązanie jest proste: zawsze deklaruj wymiary obrazów:
<img src="zdjecie.jpg" width="800" height="600" loading="lazy" alt="Opis">
WordPress od wersji 5.5 automatycznie dodaje wymiary do obrazów wstawianych przez edytor, jeśli są dostępne w bazie. Dla obrazów dodanych ręcznie lub przez zewnętrzne źródła — warto sprawdzić.
Lazy load i format pliku
Lazy load opóźnia pobieranie obrazów, ale nie zmniejsza ich rozmiaru. Żeby w pełni skorzystać z oszczędności transferu, warto zadbać również o format pliku.
Nowoczesny format WebP w WordPress zmniejsza wagę grafik o 25–35% przy zachowaniu jakości. Lazy load i WebP razem to podwójny zysk: obraz jest mniejszy i pobierany dopiero gdy potrzebny.
Lazy load a biblioteka mediów
Biblioteka mediów WordPress przechowuje każde zdjęcie w kilku rozmiarach (miniaturka, średni, duży, oryginalny). Lazy load dobrze współpracuje z tym systemem — przeglądarka pobiera odpowiedni rozmiar dopiero gdy użytkownik do niego dotrze.
Więcej o zarządzaniu plikami mediów: Media w WordPress.
Wtyczki rozszerzające lazy load
Wtyczki takie jak Smush, WP Rocket czy Autoptimize oferują własne implementacje lazy loadu z dokładniejszą kontrolą nad progiem ładowania — czyli odległością od widocznego obszaru ekranu, w której zaczyna się pobieranie.
Mogą też dodawać lazy load do elementów, których rdzeń WordPressa nie obsługuje natywnie — np. tła CSS (CSS background images) czy osadzonych wideoklipów.
Jeśli używasz zewnętrznej wtyczki do lazy loadu, upewnij się, że jej wykluczenia dla obrazów LCP są aktywne i poprawnie skonfigurowane.