loading="lazy" özniteliği tarayıcıya bir görüntü veya iframe'nin yüklenmesini ertelemesini söyler; viewport'a girmek üzere olana kadar — bant genişliğini tasarruf edin ve ilk yüklemeyi hızlandırın, JavaScript olmadan.
html
loading="lazy" özniteliği tarayıcıya bir görüntü veya iframe'nin yüklenmesini ertelemesini söyler; viewport'a girmek üzere olana kadar — bant genişliğini tasarruf edin ve ilk yüklemeyi hızlandırın, JavaScript olmadan.
lazy — kaydırma onu viewport'a yaklaştırdığında yükle.eager (varsayılan) — konumdan bağımsız olarak hemen yükle.Tarayıcı bir kenar boşluğu kullanır (eleman görünüme kaydırılmadan biraz önce yükle), bu nedenle görüntü kullanıcı onu gördüğünde genellikle hazırdır.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Boyutlar olmadan (veya aspect-ratio), tembel yüklenmiş görüntünün ayrılmış alanı yoktur, bu nedenle yüklendiğinde sayfa zıplar — Cumulative Layout Shift'e (CLS) zarar verir. Her zaman alanı ayırın.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Largest Contentful Paint görüntüsünün tembel yüklenmesi aslında performansı kötüleştirir — en önemli pikseli geciktirir. Yalnızca ekran dışı medyayı tembel yükleyin.
// 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; });
});
Yerel loading="lazy" çoğu durumda buna olan ihtiyacı ortadan kaldırdı (IntersectionObserver yine de özel mantık için faydalı olsa da).
Yerel lazy loading, birçok görüntüyle uzun sayfalar için ilk baytları ve istekleri kesintiye uğratır — mobil için büyük bir kazanım — ücretsiz.
Nuanslar önemlidir: CLS'yi korumak için boyutları ayırın ve kat üzerinde/LCP görüntülerini eager tutun (hatta fetchpriority="high") böylece önemli içerik hala hızlı yüklenir.