Lazy loading w motywie WordPress zwykle nie wymaga instalowania dodatkowej wtyczki. WordPress od wersji 5.5 ma natywną obsługę leniwego ładowania obrazów. Najważniejsze jest jednak właściwe ustawienie wyjątków: grafika widoczna na pierwszym ekranie, szczególnie obraz hero będący elementem LCP, nie powinna być ładowana z opóźnieniem.
Zasady bezpiecznego wdrożenia
Lazy loading polega na odłożeniu pobierania zasobów, które nie są jeszcze potrzebne. Obrazy znajdujące się daleko poniżej widocznego obszaru strony mogą zostać pobrane dopiero wtedy, gdy użytkownik zbliży się do nich podczas przewijania. Zmniejsza to liczbę zasobów ładowanych na początku, co jest szczególnie przydatne na długich stronach, w galeriach i sklepach.
Nie stosuj jednak tej techniki bez rozróżnienia wszystkich grafik. Obraz znajdujący się above the fold, czyli w pierwszym widoku, powinien zwykle rozpocząć ładowanie od razu. Dotyczy to zwłaszcza dużego zdjęcia, banera lub grafiki produktu, która może być elementem LCP (Largest Contentful Paint). Dodanie do niej loading="lazy" opóźni pobieranie zasobu potrzebnego do wyświetlenia głównej treści.
Nie opóźniaj obrazu hero tylko dlatego, że jest duży. Jeśli to element LCP, jego szybkie pobranie ma większe znaczenie niż oszczędność wynikająca z lazy loadingu.
Każda grafika powinna też mieć określone wymiary. Atrybuty width i height pozwalają przeglądarce zarezerwować miejsce przed pobraniem pliku. Ogranicza to przesuwanie tekstu i przycisków podczas renderowania, a tym samym pomaga zmniejszyć CLS (Cumulative Layout Shift).
Przed wdrożeniem sprawdź elementy, które zwykle nadają się do ładowania z opóźnieniem:
- obrazy znajdujące się poniżej pierwszego ekranu
- zdjęcia w galeriach i listach produktów
- osadzone mapy, filmy i inne elementy
iframe - grafiki w dalszej części długiego artykułu
Metody implementacji lazy loadingu
Najpierw sprawdź, czy motyw i WordPress nie dodają już potrzebnych atrybutów. Instalowanie kolejnej wtyczki może doprowadzić do podwójnej optymalizacji, konfliktów albo nieprawidłowego wykluczenia obrazu LCP.
| Metoda | Zalety | Wady | Kiedy wybrać |
|---|---|---|---|
| Natywny atrybut HTML | Mało kodu, brak dodatkowej wtyczki, obsługa przez przeglądarkę | Mniejsza kontrola nad wyjątkami i zaawansowanymi scenariuszami | Gdy potrzebujesz lazy loadingu obrazów i iframe poniżej pierwszego ekranu |
| Wtyczka optymalizacyjna | Automatyczne reguły, wykluczenia i obsługa większej liczby zasobów | Możliwy konflikt z motywem lub natywnym mechanizmem WordPressa | Gdy strona ma rozbudowany motyw i potrzebujesz centralnej konfiguracji |
| Własny kod | Pełna kontrola nad działaniem mechanizmu | Wymaga znajomości filtrów WordPressa i testów po zmianach | Gdy standardowe reguły motywu nie wystarczają |
W prostym przypadku wystarczy natywny zapis HTML:
<img src="zdjecie-produktu.webp"
alt="Przykładowy produkt"
width="800"
height="600"
loading="lazy">Nie dodawaj tego atrybutu do obrazu hero bez wcześniejszego sprawdzenia jego wpływu na LCP. W bardziej złożonych wdrożeniach można użyć filtra wp_lazy_loading_enabled, ale wyłączenie natywnego mechanizmu dla całej witryny powinno być ostatecznością. Zwykle lepiej wykluczyć konkretny element niż usunąć lazy loading ze wszystkich obrazów.
Jak sprawdzić, czy lazy loading działa poprawnie?
Sam widok strony nie wystarcza do oceny konfiguracji. Sprawdź zarówno kod HTML, jak i moment pobierania plików przez przeglądarkę:
- Otwórz stronę, kliknij ją prawym przyciskiem myszy i wybierz opcję inspekcji. W kodzie HTML sprawdź, czy obrazy poniżej pierwszego ekranu mają
loading="lazy", a także czy zawierająwidthiheight. Obraz hero powinien zostać potraktowany jako wyjątek, jeśli jest elementem LCP. - Przejdź do zakładki Network w Chrome DevTools, odśwież stronę i obserwuj żądania obrazów. Grafika położona daleko poniżej pierwszego ekranu powinna być pobierana dopiero wtedy, gdy zbliżysz się do niej podczas przewijania.
- Uruchom Lighthouse albo PageSpeed Insights i porównaj LCP oraz CLS przed i po zmianie. Jeśli LCP się pogorszył, sprawdź przede wszystkim obrazy w górnej części strony. Jeśli układ przesuwa się podczas ładowania, skontroluj wymiary grafik i sposób rezerwowania miejsca.
Na stronach typu One Page szczególną uwagę zwróć na dużą liczbę grafik widocznych zaraz po otwarciu. Nie wszystkie elementy znajdujące się w kodzie przed przewinięciem powinny otrzymać loading="lazy". Liczy się faktyczny pierwszy widok na danym urządzeniu, a nie sama pozycja elementu w pliku motywu.
Najczęstsze błędy
Przed publikacją zmian sprawdź, czy konfiguracja nie zawiera typowych problemów:
- Obraz LCP lub grafika hero ma ustawione
loading="lazy". - Obrazy nie mają atrybutów
widthiheight, przez co układ przesuwa się podczas doczytywania. - Motyw, WordPress i wtyczka próbują niezależnie zarządzać tym samym mechanizmem.
- Ważna treść pojawia się dopiero po kliknięciu, przewinięciu albo wykonaniu innej interakcji.
- Lazy loading ma zastępować kompresję obrazów, dobór właściwego formatu i dopasowanie rozmiaru pliku.
Najbezpieczniejsza kolejność działania to sprawdzenie natywnej obsługi WordPressa, wykluczenie zasobów LCP, uzupełnienie wymiarów obrazów i dopiero potem testy w DevTools oraz Lighthouse.
