Atrybut loading="lazy" mówi przeglądarce, aby odłożyć ładowanie obrazu lub iframe, aż będzie bliski wejścia do obszaru widocznego — oszczędza przepustowość i przyspiesza wstępne ładowanie, bez JavaScript.
html
Atrybut loading="lazy" mówi przeglądarce, aby odłożyć ładowanie obrazu lub iframe, aż będzie bliski wejścia do obszaru widocznego — oszczędza przepustowość i przyspiesza wstępne ładowanie, bez JavaScript.
lazy — ładuj tylko wtedy, gdy przewijanie zbliży go do obszaru widocznego.eager (domyślnie) — ładuj natychmiast, niezależnie od pozycji.Przeglądarka używa marginesu (ładuje nieco przed przewiniięciem elementu do widoku), dzięki czemu obraz zwykle jest gotowy, zanim użytkownik go zobaczy.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Bez wymiarów (lub aspect-ratio), leniwie ładowany obraz nie ma zarezerwowanego miejsca, więc gdy ładuje się, strona przeskakuje — pogarszając Cumulative Layout Shift (CLS). Zawsze zarezerwuj miejsce.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Leniwe ładowanie obrazu Largest Contentful Paint faktycznie pogarsza wydajność — opóźnia najważniejszy piksel. Ładuj leniwie tylko media poza ekranem.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
Natywny loading="lazy" wyeliminował potrzebę tego w większości przypadków (choć IntersectionObserver jest jeszcze przydatny dla logiki niestandardowej).
Natywne leniwe ładowanie zmniejsza początkowe bajty i żądania dla długich stron z wieloma obrazami — duża wygrana na urządzeniach mobilnych — bezpłatnie.
Detale się liczą: zarezerwuj wymiary, aby chronić CLS, i pozostaw treści ponad zagibem/LCP obrazy w trybie eager (nawet fetchpriority="high"), aby ważna zawartość wciąż ładowała się szybko.