Tester lazy load obrazów
Sprawdz czy obrazy na stronie laduja sie z lazy loading (opoznionym ladowaniem). Analiza atrybutow loading i IntersectionObserver. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Obrazy w HTML
wszystkie znaczniki <img> znalezione w wklejonym kodzie
Natywny loading=„lazy”
późniejsze pobieranie poza viewportem; o momencie startu decyduje przeglądarka
Lazy przez data-atrybuty
wzorzec bibliotek JS (data-src/data-srcset) podmieniany na src
Bez wskazówki lazy
obrazy powyżej fałdu powinny być bez lazy — chroni to LCP
Brak width/height
brak wymiarów grozi przesunięciami layoutu (CLS)
Brak alt
tekst alternatywny wymagany przez WCAG
Lazy Load Image Tester Report ============================ Overview - Images found: 4 - Native loading="lazy": 2 - Data-attribute lazy patterns: 1 - No lazy hint: 1 - Missing alt text: 0 - Missing width/height: 2 - Uses srcset: 0 Detected keywords (from HTML): lazysizes, lazyload, intersectionobserver, data-src First 4 images (quick view) n | loading | src | alt | notes ------------------------------------------------------------------------------------------ 1 | - | https://picsum.photos/seed/hero/1600/900 | Hero | no lazy hint 2 | lazy | https://picsum.photos/seed/native-1/1200/800 | Native lazy 1 | native lazy 3 | lazy | https://picsum.photos/seed/native-2/1200/800 | Native lazy 2 | native lazy, missing width/height 4 | - | data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw== | JS lazy | data-attr lazy, missing width/height Recommendations 1) Avoid lazy-loading above-the-fold content (hero images, LCP element). 2) If you use native loading="lazy", keep width and height to prevent layout shifts. 3) For JS lazy loaders, ensure placeholders have dimensions and swap src/srcset as late as possible. 4) Prefer srcset + sizes for responsive images, and add decoding="async" where appropriate. 5) Test with throttling in DevTools and scroll quickly to reveal blank-space issues.
| Metoda | Jak działa | Kiedy pobiera obrazy | Kiedy stosować |
|---|---|---|---|
| Natywny loading="lazy" | Atrybut loading="lazy" w znaczniku <img> — o momencie pobrania decyduje przeglądarka (jej heurystyka odległości od viewportu) | Gdy obraz zbliża się do viewportu | Domyślny wybór dla obrazów poniżej fałdu — zero JavaScriptu |
| IntersectionObserver + data-src | JavaScript podmienia data-src na src, gdy obraz wejdzie w pole obserwacji (w wygenerowanej stronie testowej: rootMargin 200 px, threshold 0,01) | Gdy observer zgłosi zbliżanie się do viewportu (z 200 px wyprzedzeniem) | Gdy potrzebna kontrola nad momentem startu: placeholdery, animacje, bardzo stare przeglądarki |
| Eager (bez lazy) | Obraz bez wskazówki lazy — pobierany od razu razem z dokumentem HTML | Natychmiast, jeszcze przed przewijaniem | Obrazy powyżej fałdu: hero, logo, element LCP |
Najważniejsza zasada: loading="lazy" nie dla obrazów powyżej fałdu — hero i element LCP muszą pobrać się jak najwcześniej, a każdy obraz bez wymiarów (width/height) grozi przesunięciami layoutu (CLS).
| Sprawdzane | Co to znaczy | Po co to liczymy |
|---|---|---|
| Natywny loading="lazy" | Obrazy z atrybutem loading="lazy" | Późniejsze pobieranie poza viewportem — szybszy start strony |
| Lazy przez data-atrybuty | Obrazy z data-src / data-original / data-lazy / data-srcset (wzorzec bibliotek JS typu lazysizes) | Pobieranie dopiero po podmianie atrybutu przez JavaScript |
| Bez wskazówki lazy | Obrazy bez loading i bez data-* — pobierane od razu (poniżej fałdu to poprawne: chroni LCP) | Uwaga dopiero przy dużej liczbie ciężkich obrazów w dole strony |
| Brak atrybutu alt | Obrazy bez tekstu alternatywnego | Dostępność (WCAG) — status Uwaga |
| Brak width/height | Obrazy bez wymiarów w atrybutach | Ryzyko przesunięć layoutu (CLS) — status Uwaga |
| srcset | Obrazy z zestawem źródeł responsywnych | Dobór wagi pliku do rozdzielczości ekranu |
Warto wiedzieć — lazy loading a Core Web Vitals
LCP: nie opóźniaj obrazów powyżej fałdu
Largest Contentful Paint to zwykle największy obraz w pierwszym ekranie. loading="lazy" na nim to prosta droga do słabego wyniku — przeglądarka celowo wstrzymuje pobieranie, bo nie wie, czy obraz w ogóle będzie potrzebny. Obrazy hero ładuj od razu (a kluczowe nawet z fetchpriority="high"), a lazy zostaw dla treści poniżej fałdu.
CLS: zawsze podawaj width i height
Każdy lazy-loaded obraz bez wymiarów nie rezerwuje miejsca — po doładowaniu rozpycha treść, a to przesunięcie layoutu (CLS). Atrybuty width/height pozwalają przeglądarce wyliczyć proporcje jeszcze przed pobraniem pliku. Analiza podlicza obrazy bez wymiarów, więc możesz poprawić je wszystkie naraz.
Natywny lazy czy biblioteka JS?
Natywny loading="lazy" działa we wszystkich aktualnych przeglądarkach i nie kosztuje ani bajta JavaScriptu. Biblioteki typu lazysizes (data-src podmieniane przez IntersectionObserver) mają sens, gdy potrzebujesz efektów (placeholdery, blur-up) albo wspierasz bardzo stare przeglądarki. Analiza wykrywa oba wzorce po atrybutach i słowach kluczowych w kodzie.
Jak testować wygenerowaną stronę
Pobierz stronę testową, otwórz w przeglądarce i w DevTools ustaw throttling (np. Slow 4G) oraz zakładkę Network. Przewijaj i obserwuj, kiedy startują żądania obrazów — jeśli widzisz puste przestrzenie, zmniejsz odstęp (spacer) albo zadbaj o placeholder z wymiarami. To moment startu żądań decyduje o odczuciu szybkości strony.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćTester lazy load obrazów — weryfikuj opóźnione ładowanie
Tester lazy load obrazów sprawdza, czy obrazy na stronie internetowej używają prawidłowego opóźnionego ładowania. Podaj URL strony — narzędzie przeanalizuje atrybuty loading, srcset, IntersectionObserver i inne techniki lazy load, wyświetlając raport wydajnościowy.
Czym jest lazy loading (opóźnione ładowanie)?
Lazy loading to technika optymalizacji, która ładuje zasoby (obrazy, video, iframe) dopiero gdy są widoczne lub bliskie widoczności w przeglądarce (viewport). Zamiast ładować wszystkie obrazy przy starcie strony, ładuje tylko te "above the fold" (widoczne bez scrollowania). Efekty: szybszy czas pierwszego ładowania strony (FCP, LCP), mniejsze zużycie danych (ważne dla mobilnych użytkowników), lepsza wydajność na wolnych łączach, pozytywny wpływ na Core Web Vitals (Google ranking signals).
Metody implementacji lazy loading
Natywne lazy loading HTML5 — najprostsza metoda: <img src="image.jpg" loading="lazy" alt="...">. Obsługiwane przez wszystkie nowoczesne przeglądarki (Chrome 76+, Firefox 75+, Safari 15.4+, Edge 79+). Brak potrzeby JavaScript. Przeglądarka automatycznie decyduje, kiedy załadować obraz. Intersection Observer API — JavaScript API wykrywające, czy element jest widoczny w viewport. Używane przez biblioteki takie jak Lozad.js, Lazysizes, Vanilla LazyLoad. Scroll Events (przestarzałe) — starsze podejście, nasłuchiwanie zdarzenia scroll. Mniej efektywne niż Intersection Observer (blokuje main thread). srcset i sizes — nie jest to lazy loading, ale responsywne ładowanie różnych rozdzielczości obrazów zależnie od rozmiaru ekranu.
Core Web Vitals a lazy loading
Lazy loading ma bezpośredni wpływ na metryki Google: LCP (Largest Contentful Paint) — jeśli główny obraz strony (hero image) ma loading="lazy", LCP może być opóźnione! Obrazy "above the fold" nie powinny mieć lazy loading. CLS (Cumulative Layout Shift) — obrazy bez zdefiniowanych wymiarów (width/height lub aspect-ratio) powodują przesunięcia layoutu przy załadowaniu. Zawsze definiuj wymiary obrazów. FID/INP — Intersection Observer jest asynchroniczny i nie blokuje main thread — lepszy niż scroll events.
Najczęstsze błędy implementacji lazy loading
Błąd 1: Lazy loading na hero image (powyżej fold) — opóźnia LCP. Błąd 2: Brak atrybutu alt — problemy z dostępnością i SEO. Błąd 3: Brak width/height na obrazach — powoduje CLS. Błąd 4: Używanie przestarzałych bibliotek z scroll events zamiast Intersection Observer. Błąd 5: Lazy loading na małych ikonach (SVG) — koszt obsługi większy niż zysk z opóźnienia. Tester wykrywa te błędy automatycznie.
Najczęściej zadawane pytania
Jak sprawdzić czy lazy loading działa na mojej stronie?
Chrome DevTools: F12 → Sieć → filtr "Img" → przeładuj stronę (Ctrl+Shift+R) → sprawdź, które obrazy się wczytały. Podczas scrollowania — nowe obrazy powinny pojawiać się na liście. Lub: F12 → Elements → znajdź tag img → sprawdź atrybut loading="lazy". Nasz tester automatyzuje tę analizę dla dowolnego URL.
Czy loading="lazy" wpływa negatywnie na SEO?
Nie, jeśli jest prawidłowo zaimplementowane. Google renderuje strony JavaScript i indeksuje lazy-loaded images. Ale: obrazy hero/above-the-fold nie powinny być lazy loaded (negatywny wpływ na LCP = gorzej w Core Web Vitals). Zawsze dodawaj alt text do wszystkich obrazów, nawet lazy loaded. Sprawdź w Google Search Console → Core Web Vitals czy nie masz problemów po wdrożeniu lazy loading.
Jak dodać lazy loading do istniejącej strony WordPress?
WordPress 5.5+ automatycznie dodaje loading="lazy" do obrazów wstawianych przez edytor Gutenberg. Dla starszych motywów lub niestandardowych obrazów: wtyczka "BJ Lazy Load" lub "Smush" (lazy loading + optymalizacja), funkcja add_filter w functions.php: add_filter('wp_lazy_loading_enabled', '__return_true');. Sprawdź po wdrożeniu w PageSpeed Insights czy LCP nie pogorszyło się.
Jakie biblioteki JavaScript obsługują lazy loading?
Popularne biblioteki: Lazysizes (najpopularniejsza, data-src pattern, bardzo dobry performance), Lozad.js (minimalistyczna, Intersection Observer, 569 bajtów), Vanilla LazyLoad (light, aktywnie rozwijana), GSAP ScrollTrigger (dla animowanych wejść + lazy load). Natywny loading="lazy" zastępuje potrzebę większości bibliotek dla prostych przypadków — używaj biblioteki tylko gdy potrzebujesz zaawansowanej kontroli lub obsługi starszych przeglądarek.
Jak lazy loading działa dla filmów YouTube iframe?
YouTube iframe z loading="lazy": <iframe src="https://www.youtube.com/embed/ID" loading="lazy" title="Film">. Jeszcze lepiej — "facade pattern": zastąp iframe statycznym obrazem thumbnailem, dopiero po kliknięciu załaduj faktyczny iframe. Biblioteka "lite-youtube-embed" implementuje to wzorcowo — zmniejsza Time to Interactive o kilkaset milisekund w porównaniu z pełnym iframe YouTube.