Lazy Load Nedir?
Lazy load (tembel yükleme), görsel yoğunluğu fazla olan sitelerde sayfa hızını artırmak ve veri tasarrufu sağlamak için kullanılan bir tasarım modelidir. Görülen ekranın dışında kalan görseller ve nesneler, ihtiyaç duyulana kadar yüklenmez.
Lazy Load Nasıl Çalışır?
Lazy load (tembel yükleme), sayfadaki görsel, video ya da bölümlerin kullanıcı onlara yaklaşana kadar yüklenmemesi tekniğidir. Sayfa açıldığında yalnızca ekranda görünen kısım yüklenir; kullanıcı aşağı kaydırdıkça kalan içerik yüklenir. Bu, ilk yükleme süresini ve veri kullanımını azaltır.
Tarayıcılar görsel ve iframe için yerel destek sunar: görsel etiketine loading="lazy" özelliği eklenir. Daha karmaşık durumlarda JavaScript kütüphaneleri ya da kaydırmayı izleyen betikler kullanılır.
Örnek: Bir kategori sayfası 48 ürün görseli içeriyorsa tümü baştan yüklenirse sayfa ağırlaşır. Lazy load ile ilk satırdaki 4–6 ürün görseli yüklenir, diğerleri kaydırıldıkça yüklenir. Ekranın ilk görünen kısmındaki görsel ise lazy load kapsamı dışında tutulur ve öncelikle yüklenir.
Lazy Load E-Ticarette Neden Önemlidir?
E-ticaret sayfaları görsel yoğundur. Çok görselli kategori ve ürün sayfalarında lazy load, mobil kullanıcıda ilk içeriğin hızlı görünmesini sağlar ve sayfa hızı ölçümlerini iyileştirir. Hız ise terk oranı ve dönüşümü etkiler; ayrıntı için hız optimizasyonu sayfasına bakılabilir.
Karar olarak lazy load yalnızca ekranın altındaki görsellere uygulanır. İlk ekrandaki ürün görseli ve banner’a uygulanırsa en büyük içerik gecikir ve LCP kötüleşir. Görsellerin boyutları (genişlik ve yükseklik) belirtilmelidir; aksi halde yüklenen görsel sayfayı kaydırır.
Arama motorları kaydırma gerektirmeyen yüklemeyi okuyabilir; ancak içerik yalnızca kaydırma sonrası betikle yükleniyorsa görülemeyebilir. Yerel lazy load özelliği bu açıdan güvenlidir.
Lazy Load’da Sık Yapılan Hatalar
- İlk ekrandaki görsele uygulamak. Sayfanın en önemli görseli geç yüklenir.
- Boyut bilgisi vermemek. Görsel yüklenince sayfa kayar ve kullanıcı yanlış yere dokunur.
- Önemli içeriği yalnızca betikle yüklemek. Arama motoru içeriği göremeyebilir.
- Tüm içeriğe uygulamak. Kritik metin ve bağlantılar ilk HTML’de bulunmalıdır.
Lazy Load Hakkında Sık Sorulan Sorular
Lazy load hangi görsellere uygulanmamalı?
İlk ekranda görünen ürün görseli ve banner gibi öğelere uygulanmaz. Bu görseller geç yüklenirse sayfanın en büyük içeriği gecikir ve LCP değeri kötüleşir; tembel yükleme yalnızca kaydırınca görünen, ekranın altındaki görsellerde kullanılır ve her görselin genişlik ile yüksekliği belirtilir.
Lazy load SEO’ya zarar verir mi?
Doğru uygulandığında zarar vermez. İlk ekrandaki görsele uygulamak ya da içeriği yalnızca betikle yüklemek ise sorun yaratabilir.
Lazy load nasıl eklenir?
Görsel ve iframe etiketlerine loading="lazy" özelliği eklenir; birçok e-ticaret altyapısı bunu otomatik yapar. İlk ekrandaki görseller bu kapsamdan çıkarılır.