Słownik SEO – Techniczne SEO

Lazy loading

Lazy loading (leniwe ładowanie) to technika optymalizacji wydajności strony, polegająca na odroczeniu ładowania zasobów (obrazów, wideo, elementów iframe) do momentu, gdy są one potrzebne – zazwyczaj gdy użytkownik zbliży się do nich podczas przewijania strony. Poprawia czas ładowania strony i wskaźniki Core Web Vitals.

Czas czytania: ok. 5 minutKategoria: Techniczne SEO

Czym jest lazy loading?

Lazy loading to podejście do ładowania zasobów, w którym elementy niewidoczne w początkowym viewporcie (obszarze widocznym na ekranie) nie są ładowane przy pierwszym wejściu na stronę. Zamiast tego ładują się dopiero gdy użytkownik przewija stronę i zbliży się do danego elementu. Dla stron z wieloma obrazami lub filmami lazy loading może radykalnie skrócić czas ładowania strony i poprawić wskaźnik LCP (Largest Contentful Paint) – kluczowy element Core Web Vitals.

Natywny lazy loading HTML

Atrybut loading=’lazy’ na tagach img i iframe. Wspierany przez wszystkie nowoczesne przeglądarki, nie wymaga JavaScript. Najprostszy i rekomendowany sposób implementacji.

Lazy loading przez JavaScript

Biblioteki jak lazysizes lub Intersection Observer API pozwalają na bardziej zaawansowaną kontrolę – np. różne progi ładowania dla różnych typów zasobów.

LCP i lazy loading

Uwaga: nie stosuj lazy loading do obrazu LCP (główny obraz widoczny 'nad złamem’). Odroczenie ładowania LCP image pogarsza wynik LCP w Core Web Vitals.

WordPress i lazy loading

WordPress automatycznie dodaje loading=’lazy’ do obrazów od wersji 5.5. Warto sprawdzić czy motyw i wtyczki do galerii nie nadpisują tego atrybutu.

Jak prawidłowo wdrożyć lazy loading?

Wdrożenie lazy loadingu jest proste technicznie, ale wymaga ostrożności przy obrazach powyżej linii zagięcia (above the fold) – szczególnie obrazie LCP. Źle wdrożony lazy loading może pogorszyć Core Web Vitals zamiast je poprawić.

1Dodaj loading=’lazy’ do wszystkich tagów img poniżej linii zagięcia – to wystarczy dla większości przypadków i nie wymaga JavaScript
2NIE dodawaj loading=’lazy’ do obrazu LCP (główny obraz hero, baner powitalny) – jego szybkie ładowanie jest priorytetem dla wyniku CWV
3Dla obrazu LCP użyj wręcz loading=’eager’ i preload w sekcji head:
4Sprawdź PageSpeed Insights po wdrożeniu – raport pokazuje które obrazy mają lazy loading i czy LCP image jest prawidłowo załadowany
5W WordPress sprawdź że Yoast SEO lub RankMath nie wyłączają natywnego lazy loadingu WordPressa – niektóre konfiguracje wtyczek mogą to robić

Najczęstsze błędy

Poniżej najczęstsze błędy związane z lazy loading, które warto znać i unikać w codziennej pracy SEO.

✗Lazy loading na obrazie LCP – Dodanie loading=’lazy’ do głównego obrazu hero lub bannera powitalnego opóźnia jego ładowanie i drastycznie pogarsza wynik LCP. To jeden z najczęstszych błędów optymalizacji Core Web Vitals.
✗Brak wymiarów obrazów z lazy loadingiem – Obrazy bez atrybutów width i height powodują Cumulative Layout Shift (CLS) – kolejny wskaźnik CWV. Przeglądarka nie wie ile miejsca zarezerwować dla obrazu przed jego załadowaniem.
✗Lazy loading na małych, krytycznych ikonach – SVG ikony i małe ikony UI ładowane przez CSS nie powinny mieć lazy loadingu – są małe, krytyczne dla wyglądu strony i nie warto opóźniać ich ładowania.
✗Brak testowania po wdrożeniu – Lazy loading może się różnić w zależności od przeglądarki i urządzenia. Testuj na mobile i desktop w PageSpeed Insights i Lighthouse po każdej zmianie.

Często zadawane pytania

Poniżej odpowiedzi na najczęściej zadawane pytania dotyczące Lazy loading.

Czy lazy loading poprawia SEO?

Pośrednio tak – poprzez poprawę Core Web Vitals, szczególnie wskaźnika LCP (Largest Contentful Paint) i FID (First Input Delay). Google używa CWV jako czynnika rankingowego od 2021. Krótszy czas ładowania strony to też niższy bounce rate i lepsze doświadczenie użytkownika.

Czy Google może nie zaindeksować obrazów z lazy loadingiem?

Wcześniej było to problemem – Googlebot nie wykonywał JavaScript i nie widział obrazów ładowanych przez JS. Obecnie Googlebot wykonuje JavaScript i poprawnie indeksuje obrazy z lazy loadingiem, zarówno natywnym jak i JS. Warto jednak sprawdzić w raporcie Indeksowanie obrazów w GSC.

Jaka jest różnica między lazy loadingiem a preloadingiem?

Lazy loading odracza ładowanie zasobów do momentu gdy są potrzebne – stosowane dla zasobów poniżej linii zagięcia. Preloading przyspiesza ładowanie kluczowych zasobów przez pobieranie ich z wyprzedzeniem – stosowane dla obrazu LCP, kluczowych fontów i krytycznych skryptów. Oba mechanizmy używane razem dają optymalne wyniki CWV.

Czy lazy loading działa na mobile?

Tak – i na mobile jest szczególnie ważny ze względu na ograniczone połączenia danych i procesor. Natywny lazy loading (loading=’lazy’) działa we wszystkich nowoczesnych przeglądarkach mobilnych. Google testuje Core Web Vitals głównie na urządzeniach mobilnych, więc lazy loading ma bezpośredni wpływ na mobilne rankingi.

Powiązane hasła w słowniku SEO

Lazy loading jest powiązane z wieloma innymi pojęciami SEO. Poznaj je, aby lepiej rozumieć cały ekosystem pozycjonowania.

Powiązane artykuły na blogu

Jeśli chcesz dowiedzieć się więcej o lazy loading, zajrzyj do poniższych artykułów.