Atribut loading="lazy" říká prohlížeči, aby odložil načítání obrázku nebo iframu, dokud není blízko vchodu do viewport — šetří šířku pásma a zrychluje počáteční načtení, aniž by bylo potřeba JavaScriptu.
html
Atribut loading="lazy" říká prohlížeči, aby odložil načítání obrázku nebo iframu, dokud není blízko vchodu do viewport — šetří šířku pásma a zrychluje počáteční načtení, aniž by bylo potřeba JavaScriptu.
lazy — načíst pouze když scrollování přesune prvek blízko viewport.eager (výchozí) — načíst okamžitě, bez ohledu na pozici.Prohlížeč používá margin (načítá mírně před tím, než se prvek dostane do pohledu), takže obrázek je obvykle připraven, když jej uživatel uvidí.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Bez rozměrů (nebo aspect-ratio), líně načtený obrázek nemá rezervovaný prostor, takže když se načte, stránka skočí — poškozuje Cumulative Layout Shift (CLS). Vždy rezervujte prostor.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Lazy-loading obrázku Největšího obsahu v nátěru (Largest Contentful Paint) ve skutečnosti zhoršuje výkon — zpomaluje nejdůležitější pixel. Lazy-loadujte pouze obsah mimo obrazovku.
// 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; });
});
Nativní loading="lazy" v případě potřeby odstranil nutnost tohoto řešení (přestože IntersectionObserver je stále užitečný pro vlastní logiku).
Nativní lazy loading snižuje počáteční bajty a žádosti pro dlouhé stránky s mnoha obrázky — velké vítězství pro mobilní zařízení — zdarma.
Nuance jsou důležité: rezervujte rozměry pro ochranu CLS a udržujte obsah nad záhybem/LCP eager (i s fetchpriority="high"), aby se důležitý obsah stále načetl rychle.