Lazy Loading (Gecikmeli Yükleme) Nedir?
Kısa tanım
Lazy loading (gecikmeli yükleme), bir sayfadaki görsel, iframe veya kod gibi kaynakların sayfa açılırken hemen değil, gerçekten ihtiyaç duyulduğunda yüklenmesi tekniğidir; görseller için bu genellikle kullanıcının ilgili bölüme yaklaştığı andır. Amaç, ilk yüklemede indirilen veri miktarını azaltmaktır. Görseller ve iframe'ler için tarayıcıların yerleşik loading="lazy" özelliği kullanılabilir.
Diğer adları: gecikmeli yükleme, tembel yükleme, loading=lazy, native lazy loading
Nasıl çalışır?
Tarayıcı normalde HTML'de gördüğü her görseli, sayfanın neresinde olursa olsun indirmeye başlar. Uzun bir ürün listesinde ya da blog yazısında bu, kullanıcının belki hiç görmeyeceği onlarca dosya demektir. Lazy loading bu indirmeleri, öğe görüntü alanına belirli bir mesafe kadar yaklaşana dek erteler. Mesafeyi tarayıcı belirler ve bağlantı hızına göre değiştirebilir; hedef, kullanıcı oraya kaydırdığında görselin çoktan hazır olmasıdır.
Tarayıcının yerleşik özelliği
Eskiden bu iş JavaScript kütüphaneleriyle yapılırdı. Bugün img ve iframe öğelerindeki loading özelliği tüm modern tarayıcılarda destekleniyor ve ek kod gerektirmiyor:
<img src="/galeri/urun-3.webp" alt="Ürünün yandan görünümü"
width="800" height="600" loading="lazy">
<iframe src="/demo/canli-onizleme.html"
title="Canlı önizleme" loading="lazy"></iframe>Özelliğin iki değeri vardır: lazy ve varsayılan olan eager. width ve height değerlerini yazmak önemlidir; aksi hâlde görsel yüklendiğinde kendine yer açmak için altındaki içeriği iter ve CLS artar. Arka plan görselleri, sonsuz kaydırma veya bileşen bazlı yükleme gibi daha ince kontrol gereken durumlarda IntersectionObserver API'si kullanılır.
Fikir yalnızca medyayla sınırlı değildir. JavaScript paketlerini parçalara bölüp (code splitting) bir bileşenin kodunu ancak kullanıcı ona ihtiyaç duyduğunda indirmek de aynı yaklaşımın uygulamasıdır.
Ne zaman kullanılmamalı?
- İlk ekrandaki ana görsel: ilk ekranda görünen büyük görsel çoğu zaman sayfanın LCP öğesidir. Ona
loading="lazy"vermek, tarayıcının indirmeyi yerleşim hesaplanana kadar ertelemesine ve LCP'nin gecikmesine yol açar. Bu görsel varsayılan davranışta bırakılmalı, hattafetchpriority="high"ile önceliklendirilmelidir. - Cihaza göre ilk ekrana girebilen görseller: masaüstünde aşağıda kalan bir görsel, mobil düzende ilk ekranda olabilir. Sayfanın en üstündeki birkaç görseli her durumda normal yüklemek daha güvenlidir.
- Az sayıda küçük görsel: sayfada yalnızca birkaç ikon varsa kazanç ihmal edilebilir düzeydedir.
Arama motorları açısından
Google, kritik olmayan içeriği geciktirmenin yaygın ve iyi bir performans uygulaması olduğunu, ancak yanlış uygulandığında içeriği Google'dan gizleyebileceğini belirtir. Google'ın lazy loading rehberine göre Google Arama sayfayla etkileşime girmez, yani kaydırmaz ve tıklamaz; bu nedenle içerik, görüntü alanında görünür olduğunda yüklenmelidir. Tarayıcının yerleşik özelliği ve IntersectionObserver bu koşulu karşılar.
Sorun çıkaran tipik kalıplar şunlardır: yalnızca scroll olayını dinleyen eski betikler, “daha fazla göster” butonunun arkasına saklanan metinler ve görsel adresini src yerine bir data- özelliğinde tutup hiç geri yazmayan çözümler. Bu durumlarda görseller ve metinler dizine eklenmeyebilir. Sonsuz kaydırma kullanan listelerde ise her içerik parçasının kendi URL'sine sahip olması ve bu URL'lerin birbirine bağlanması önerilir.
Nasıl kontrol edilir?
Search Console'daki URL Denetleme aracında oluşturulan (rendered) HTML'e bakıp görsel adreslerinin src özelliğinde yer aldığını doğrulayabilirsiniz. Chrome geliştirici araçlarının Network sekmesinde sayfayı yeniden yükleyip yavaşça kaydırmak da görsellerin ne zaman indirildiğini net biçimde gösterir. Lighthouse raporunda LCP öğesinin lazy yüklenip yüklenmediğine ayrıca bakmak, en sık yapılan hatayı yakalamanın kolay bir yoludur.