Görsel Lazy Loading Notları
Lazy loading (gecikmeli yükleme), sayfadaki görsellerin hemen indirilmesi yerine kullanıcı scroll ettikçe veya görüntü alanına yaklaştıkça yüklenmesini sağlar. Bu sayede ilk yüklemede indirilen veri miktarı azalır, sayfa daha hızlı açılır ve bant genişliği tasarrufu yapılır.
loading="lazy" özniteliği: Modern tarayıcılar native lazy loading destekler. <img src="foto.webp" loading="lazy" alt="..."> yazmanız yeterlidir; tarayıcı görseli viewport'a belirli bir mesafede (genelde birkaç yüz piksel) geldiğinde yükler. JavaScript kütüphanesi gerekmez; hafif ve etkili bir çözümdür.
Intersection Observer alternatifi: Eski tarayıcılar veya özel senaryolar için JavaScript ile Intersection Observer API kullanabilirsiniz. Görsel viewport'a girince data-src'deki gerçek URL'yi src'e yazarak yüklemeyi tetiklersiniz. Native loading="lazy" destekleyen tarayıcılar için bu ekstra işleme gerek yoktur.
Above-the-fold istisnası: İlk ekranda (kullanıcının scroll etmeden gördüğü alan) görünen görsellere lazy loading uygulamayın. Özellikle hero, banner veya LCP (Largest Contentful Paint) elementi olan görsele lazy eklemek Core Web Vitals skorunu kötüleştirir. Tarayıcı yüklemeyi geciktirdiği için LCP süresi uzar. Sadece ilk ekranın altındaki görsellere lazy verin.
Lazy loading, görsel optimizasyonu ile birlikte kullanıldığında en iyi sonucu verir. Görsellerinizi WebP ile sıkıştırıp ardından sayfada lazy loading uygulayarak hem dosya boyutunu hem de yükleme davranışını optimize edebilirsiniz. Sıkıştırma aracı ile WebP %80 kalitede hazırladığınız görselleri lazy ile sunun.
Görselleri WebP ile optimize edin, lazy loading ile sunun. Önce sıkıştırma, sonra lazy.
WebP %80 ile Sıkıştır →