Lazy loading psuje SEO obrazków?

Nie, jeśli używasz natywnego loading=lazy . Googlebot renderuje stronę, scrolluje wirtualnie, widzi i indeksuje wszystkie obrazki. Problem zaczyna się przy custom JS lazy loaderach bez fallback noscript — wtedy bot może obrazka nie zobaczyć. Trzymaj się natywnego atrybutu.

Czy lazy loading psuje CLS?

Tylko jeśli nie podajesz width/height. Z wymiarami (lub aspect-ratio w CSS) przeglądarka rezerwuje slot — layout nie skacze przy załadowaniu. To wymóg, nie sugestia. Każdy lazy-loaded obrazek bez wymiarów to gwarantowany shift CLS.

Kiedy lazy loadingu unikać?

Above-the-fold (hero image, logo w nagłówku, główny banner). Critical UI (przycisk CTA, formularz na landing page). Wszystko, co użytkownik zobaczy w pierwszej sekundzie — ładuj eager. Dodatkowo: jeśli strona jest krótka i wszystko mieści się w pierwszym viewporcie, lazy loading nic nie zyska.

Czy lazy loading działa dla iframe'ów z YouTube?

Tak — <iframe loading="lazy" src="youtube.com/embed/..."> opóźnia ładowanie YT playera, dopóki nie zbliży się do viewportu. To duża oszczędność, bo player YT to ~500 KB JS. Alternatywa: facade pattern (thumbnail z play button, który dopiero po kliknięciu wstawia iframe).

Lazy loading — SEOGods

Lazy loading to technika odraczania ładowania zasobów (obrazków, iframe'ów, komponentów JS) do momentu, gdy zbliżają się do viewportu. Zmniejsza początkowy payload strony, przyspiesza LCP i FCP, oszczędza pasmo użytkownika i zasoby serwera.

Natywny lazy loading

Wystarczy atrybut loading="lazy" na <img> lub <iframe>. Przeglądarka sama decyduje, kiedy załadować (zwykle ~1500 px przed viewportem na desktopie, ~3000 px na mobile). Wsparcie: wszystkie nowoczesne przeglądarki (od Chrome 76, Safari 15.4, Firefox 75). Dla Internet Explorera fallback nie jest potrzebny — i tak jest poza wsparciem.

Krytyczna zasada

Nigdy nie lazy-loaduj obrazków above the fold. Hero image z loading="lazy" opóźnia LCP — przeglądarka nie pobiera go priorytetowo, czeka aż będzie widoczny. Dla obrazków poniżej fold: zawsze lazy. Dla hero: loading="eager" + ewentualnie fetchpriority="high" dla maksymalnej priorytetyzacji.

Lazy loading komponentów (JS)

React.lazy(), dynamic imports w Next.js (next/dynamic), defineAsyncComponent w Vue — dzielą bundle na chunki ładowane on-demand. Klasyczne zastosowania: modale, czat widgety, mapy, edytory, panel admina, sekcja komentarzy. Mniejszy initial bundle = lepsze TTI i INP, bo główny wątek nie musi parsować kodu, którego użytkownik nie zobaczy.

Intersection Observer

Dla bardziej zaawansowanej kontroli (animacje on-scroll, video autoplay przy widoczności, infinite scroll) używaj Intersection Observer API zamiast scroll listeners. Wydajniejsze, asynchroniczne, mniej blokuje główny wątek. IntersectionObserver ma wsparcie we wszystkich nowoczesnych przeglądarkach.