Görsellerde Tembel Yükleme: loading=lazy

<img loading="lazy" src="...">, tarayıcıya görseli görünüm alanına girmek üzereyken indirmesini söyler. Tüm modern tarayıcılardaki yerleşik destek, bunu görsel ağırlıklı sayfalarda elde edilebilecek en kolay performans kazanımı yapar.

Tarayıcılar küçük bir kestirimsel kenar boşluğu kullanır (genellikle ekranın alt sınırının birkaç bin piksel aşağısında). Görsel, kullanıcı ona kaydırarak geldiğinde tamamen oluşturulmuş olacak kadar erken yüklenmeye başlar; gecikmeli yükleme, dikkatli kaydıran kullanıcılar için görünmezdir.

Sayfanın ilk ekranında görünen görsellere veya LCP (en büyük içerik boyaması) adayınıza asla loading="lazy" uygulamayın. Ertelenen yükleme en önemli görsel öğeyi geciktirir; bu da hem algılanan hıza hem de Temel Web Hayati Metriklerine zarar verir.

Gecikmeli yüklemenin etkili olması için <img> öğesine açıkça width ve height (veya aspect-ratio CSS) verin. Boyutlar olmadan tarayıcı alan ayıramaz, kaydırma sırasında düzen yeniden akışa uğrar ve gecikmeli yükleme kestirimi yanlış çalışır.

Aynı öznitelik <iframe> üzerinde de çalışır. <iframe loading="lazy">, ekranın alt sınırının altında kalan haritaların, videoların ve sosyal medya yerleştirmelerinin yüklenmesini erteler. Bunların her biri, aksi hâlde her sayfa görüntülemesinde megabaytlarca üçüncü taraf JavaScript yüklerdi.

Varsayılan değer loading="eager" (hemen yükle) şeklindedir ve açıkça nadiren yazılır. İlk ekranın üst kısmındaki görsellerde eager değerini ayarlamak, inceleyenlere bu seçimin bilinçli yapıldığını belirten bir belge görevi görebilir.

Gecikmeli yükleme, uyarlanabilir görsellerle kusursuz biçimde birlikte çalışır. Tarayıcı, srcset içinden hâlâ uygun adayı seçer; yalnızca indirmeyi erteler. loading="lazy" ile srcset arasında ek bir eşgüdüm gerekmez.

Gecikmeli yüklemeyi decoding="async" ile birlikte kullanarak tarayıcının görseli ana iş parçacığının dışında kod çözmesini sağlayın. Bu, uzun bir kaydırma dizisinden sonra çok sayıda görsel aynı anda geldiğinde kaydırma sırasında girdinin engellenmesini önler.

CSS background-image yerleşik olarak gecikmeli yüklenemez. İlk ekranın üst kısmındaki ana arka planlar için bu sorun değildir; ekranın alt kısmındaki arka planlar için, öğe görünüm alanına yaklaştığında URL'yi değiştirmek üzere IntersectionObserver kullanın.

Sayfa yazdırıldığında tarayıcı, yazdırılan kopyanın eksiksiz olması için loading="lazy" değerinden bağımsız olarak her görseli hemen yükler. Yazdırma stil sayfalarında gecikmeli yüklenen görseller için özel bir durum oluşturmanız gerekmez.

Lighthouse'un "Ekran dışındaki görsellerin yüklenmesini ertele" denetimi, loading="lazy" kullanması gereken her görseli listeler. Ağ panelinde "Görsel" filtresiyle birlikte "Şelale" görünümünü kullanmak, gecikmeli yüklemenin oluşturduğu kademeli yüklemeleri gösterir; görsel galerilerinde başlangıç istekleri büyük ölçüde azalır.

Sayfanın üst kısmındaki ana görsele loading="lazy" uygulamak neden zararlıdır?

Ekran dışında kalan <img> ve <iframe> öğelerinde loading="lazy" kullanmak, tek öznitelikle elde edilen bir performans kazanımıdır. Bunu açıkça belirtilmiş width/height (alan ayırmak için), srcset (uyarlanabilirlik için) ve decoding="async" (kaydırmayı akıcı tutmak için) ile birlikte kullanın. LCP görseline veya ilk görünüm alanında görünür olan herhangi bir öğeye asla uygulamayın.