Optymalizacja

Lazy loading - opóźnione ładowanie obrazów

Opóźnione ładowanie obrazów - pobierają się dopiero, gdy użytkownik do nich przewinie.

Aktualizacja: 27 maja 2026

Krótka odpowiedź

Lazy loading to technika opóźniania ładowania obrazów (i innych zasobów) do momentu, gdy są faktycznie potrzebne. Zamiast pobierać wszystkie obrazy z artykułu od razu, przeglądarka pobiera tylko te z pierwszego ekranu - reszta dogrywa się dopiero przy przewijaniu. W HTML5 wystarczy atrybut loading="lazy" - wspierany natywnie przez wszystkie nowoczesne przeglądarki.

Kluczowe fakty

Natywne wsparcie	Chrome, Firefox, Safari 15.4+, Edge
Atrybut	loading="lazy"
Typowy zysk	30-80% mniej pobierania na pierwszym ekranie
Wpływa na metrykę	LCP (pośrednio, przez mniej rywalizacji o pasmo)

Co to jest lazy loading?

Lazy loading to technika opóźniania ładowania obrazów (i innych zasobów) do momentu, gdy są faktycznie potrzebne. Zamiast pobierać wszystkie 30 zdjęć z artykułu od razu, przeglądarka pobiera tylko te, które są w widocznej części okna - reszta dogrywa się dopiero gdy użytkownik przewinie do nich.

Jak włączyć lazy loading?

Najprostszy sposób - atrybut loading="lazy":
<img src="foto.jpg" loading="lazy" alt="...">

Wspierane natywnie przez Chrome, Firefox, Safari (od 15.4) i Edge. Dla starszych przeglądarek można użyć biblioteki vanilla-lazyload.

Uwaga: nie dla obrazu LCP

Obrazu, który jest LCP (banner, hero) NIE oznaczaj jako lazy - przeglądarka odłoży jego ładowanie, co opóźni LCP. Lazy loading stosuj wyłącznie do obrazów poniżej pierwszego ekranu.

Najczęstsze pytania

Czy lazy loading szkodzi SEO?

Nie, jeśli wdrożysz natywne loading="lazy". Google bot wspiera tę technikę i potrafi indeksować obrazy lazy-loaded. Problem powstaje przy JavaScript-only lazy loading bez fallbacku - wtedy bot bez JavaScript widzi puste <img> bez src. Natywne loading="lazy" jest bezpieczne.

Jak Chrome decyduje, kiedy załadować lazy obraz?

Chrome używa algorytmu opartego na odległości - gdy obraz jest około 2-3 viewporty od bieżącego widoku (w pionie). Próg jest większy niż mogłoby się wydawać, żeby obraz był już gotowy gdy użytkownik do niego dotrze. Dla wolnego internetu próg jest większy.

Czy lazy loading działa na video?

Tylko częściowo. Element <video> nie wspiera loading="lazy" natywnie. Można obejść używając preload="none" (video pobiera się dopiero przy odtworzeniu) albo wstawiając video dynamicznie z JavaScript po wykryciu wejścia w viewport (IntersectionObserver). Dla YouTube embed używaj loading="lazy" na iframe - działa.

Sprawdź swoją stronę

Wpisz adres swojej strony, w 30 sekund zobaczysz konkretną listę problemów do naprawy - wraz z wpływem na sprzedaż, SEO i koszty reklam.

Zacznij test →