Lazy loading w WordPressie pozwala opóźnić pobieranie obrazów i elementów iframe znajdujących się poza pierwszym widocznym obszarem strony. WordPress obsługuje ten mechanizm natywnie od wersji 5.7, więc dodatkowa wtyczka zwykle nie jest potrzebna. Najważniejsze jest jednak właściwe wykluczenie elementów Above the Fold, zwłaszcza grafiki będącej elementem LCP.
Czym jest lazy loading?
Lazy loading, czyli leniwe ładowanie, polega na pobieraniu zasobów dopiero wtedy, gdy użytkownik ich potrzebuje. Obraz znajdujący się daleko poniżej pierwszego ekranu nie musi być ładowany natychmiast po otwarciu strony. Przeglądarka może pobrać go dopiero wtedy, gdy użytkownik zbliży się do tego fragmentu podczas przewijania.
Odwrotną strategią jest eager loading. W tym modelu zasób ładuje się od razu, bez celowego opóźnienia. To właściwe podejście dla elementów widocznych po wejściu na stronę, takich jak logo, grafika hero czy główne zdjęcie artykułu.
Lazy loading zmniejsza początkową liczbę żądań i ilość danych przesyłanych przy pierwszym otwarciu strony. Może dzięki temu przyspieszyć wyświetlenie najważniejszej treści, szczególnie na urządzeniach mobilnych i podstronach zawierających wiele zdjęć.
Najczęściej leniwie ładuje się:
- zdjęcia produktów, galerie i grafiki znajdujące się poniżej pierwszego ekranu
- osadzone filmy i mapy w elementach iframe
- zewnętrzne widżety, komentarze i wybrane moduły ładowane przez JavaScript
- kolejne dane pobierane przy przewijaniu, na przykład w interfejsie infinite scroll
Jak działa lazy loading w WordPressie?
Od wersji 5.7 WordPress ma natywne wsparcie dla lazy loadingu obrazów. System może automatycznie dodawać do elementów <img> atrybut loading="lazy". W typowej instalacji nie trzeba więc ręcznie edytować każdej grafiki ani instalować osobnej wtyczki wyłącznie po to, aby uruchomić podstawowe leniwe ładowanie.
Współczesne wersje WordPressa starają się także rozpoznać obrazy, które mogą znajdować się w pierwszym widoku, i nie opóźniać ich pobierania. Ostateczny efekt zależy jednak od motywu, edytora, sposobu generowania kodu oraz dodatkowych narzędzi optymalizacyjnych.
Nie włączaj kilku niezależnych mechanizmów bez sprawdzenia ich działania. WordPress, motyw i wtyczka mogą jednocześnie modyfikować atrybuty ładowania, podmieniać źródła obrazów albo dodawać własne skrypty. Taka podwójna optymalizacja może powodować konflikty, opóźnienia lub utrudniać znalezienie przyczyny problemu.
Całkowite wyłączenie natywnego mechanizmu jest rzadko potrzebne, ale można to zrobić za pomocą filtra w pliku motywu potomnego lub własnej wtyczki:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );Ten kod wyłącza natywne lazy loading dla elementów obsługiwanych przez WordPress. Nie stosuj go bez powodu. Jeżeli problem dotyczy tylko jednej grafiki, lepszym rozwiązaniem jest wykluczenie konkretnego elementu lub poprawienie jego priorytetu.
Jak wdrożyć lazy loading bez pogorszenia LCP i CLS?
Największy błąd polega na zastosowaniu loading="lazy" do wszystkiego. Leniwe ładowanie ma dotyczyć zasobów drugorzędnych, a nie elementów potrzebnych do zbudowania pierwszego widoku strony.
Wyklucz element LCP z lazy loadingu
LCP, czyli Largest Contentful Paint, mierzy czas wyświetlenia największego istotnego elementu widocznego w pierwszym widoku. Często jest nim duża grafika hero, główne zdjęcie wpisu, baner albo blok tekstu.
Jeśli do takiego obrazu dodasz loading="lazy", przeglądarka może rozpocząć jego pobieranie dopiero po zbliżeniu się do niego użytkownika. To opóźnia wyświetlenie najważniejszego elementu i może pogorszyć wynik LCP. Grafika Above the Fold powinna zwykle ładować się normalnie, czyli bez atrybutu lazy, albo jawnie z użyciem:
<img src="hero.webp"
alt="Opis grafiki"
width="1600"
height="900"
loading="eager">Nie oznacza to, że każdy obraz w górnej części strony musi mieć ustawione eager. Sprawdź, który element rzeczywiście jest widoczny i wpływa na LCP. Pozostałe grafiki mogą nadal korzystać z opóźnionego ładowania.
Zarezerwuj miejsce za pomocą width i height
Atrybuty width i height informują przeglądarkę, ile miejsca należy przeznaczyć na obraz przed jego pobraniem. Dzięki temu układ strony nie musi zmieniać wysokości po pojawieniu się grafiki.
Brak wymiarów może powodować przesuwanie tekstu, przycisków i innych elementów podczas ładowania. Takie ruchy wpływają na CLS, czyli Cumulative Layout Shift, wskaźnik stabilności wizualnej strony.
Przykład obrazu ładowanego leniwie:
<img src="galeria.webp"
alt="Widok galerii"
width="1200"
height="800"
loading="lazy">Przed publikacją sprawdź najważniejsze elementy konfiguracji:
- logo i grafika hero nie są niepotrzebnie oznaczone jako lazy
- obraz będący prawdopodobnym elementem LCP ładuje się bez celowego opóźnienia
- grafiki poniżej pierwszego ekranu mają
loading="lazy" - obrazy i iframe mają określone wymiary albo inną metodę rezerwowania miejsca
- motyw i wtyczka optymalizacyjna nie zarządzają tym samym zasobem niezależnie od WordPressa
Lazy loading nie zastępuje optymalizacji samych plików. Duży, nieprzekonwertowany obraz nadal będzie ciężki, nawet jeśli zacznie się pobierać dopiero podczas przewijania. Wymiary, kompresja i właściwy format grafiki powinny być analizowane razem z mechanizmem ładowania.
Natywny atrybut czy biblioteka JavaScript?
Dla obrazów i elementów iframe najpierw sprawdź rozwiązanie natywne. Nie wymaga ono dodatkowego kodu JavaScript i zwykle wystarcza na blogu, stronie firmowej oraz w sklepie, który korzysta ze standardowych elementów WordPressa.
| Metoda | Główne zastosowanie | Wymaga JS | Zalety |
|---|---|---|---|
loading="lazy" |
Obrazy i iframe poza pierwszym widokiem | Nie | Prosta implementacja i mała liczba zależności |
| Biblioteka JavaScript | Tła CSS, animacje i niestandardowe reguły ładowania | Tak | Większa kontrola nad momentem i sposobem pobierania |
| Intersection Observer | Wykrywanie zbliżania się elementu do viewportu | Tak | Możliwość budowania zaawansowanych, własnych mechanizmów |
Natywny atrybut nie obsługuje bezpośrednio obrazów ustawionych jako tło w CSS. Jeżeli strona wymaga opóźniania takich teł, efektów fade-in lub specjalnych reguł, można wykorzystać JavaScript i mechanizm Intersection Observer. To jednak większa złożoność, więc nie ma sensu dodawać jej do prostych grafik, które można oznaczyć zwykłym atrybutem HTML.
Jak sprawdzić, czy lazy loading działa?
Sam widok strony nie wystarcza do oceny konfiguracji. Sprawdź zarówno kod HTML, jak i rzeczywiste żądania sieciowe:
- Otwórz stronę w przeglądarce i uruchom DevTools, zwykle za pomocą klawisza F12.
- Przejdź do zakładki Network i odśwież stronę, najlepiej z włączonym filtrem Img.
- Sprawdź, które obrazy są pobierane przy pierwszym otwarciu, a które dopiero po przewinięciu w ich kierunku.
- Porównaj element LCP z jego atrybutami i upewnij się, że nie został przypadkowo oznaczony jako lazy.
- Uruchom Lighthouse lub PageSpeed Insights i sprawdź zalecenia dotyczące obrazów poza ekranem, LCP oraz CLS.
Jeżeli grafiki poniżej pierwszego ekranu są pobierane od razu, sprawdź, czy motyw albo dodatkowy skrypt nie usuwa atrybutu lazy. Gdy pogarsza się LCP, zacznij od obrazów hero i innych elementów Above the Fold. Gdy układ przesuwa się podczas przewijania, skontroluj przede wszystkim width, height i sposób rezerwowania miejsca dla grafik.
Najbezpieczniejsze wdrożenie lazy loadingu w WordPressie zaczyna się od wykorzystania natywnego mechanizmu, a nie od instalowania kolejnej wtyczki. Ładuj leniwie elementy poniżej pierwszego ekranu, pozostaw grafikę LCP w trybie eager i zawsze określaj wymiary obrazów. Taki podział ogranicza transfer bez niepotrzebnego pogarszania LCP oraz CLS.
