Tembel yükleme, görsellerin, videoların ve iframe’lerin yalnızca kullanıcının görüş alanına yaklaştığında indirilmesini sağlar. Doğru kurulduğunda ilk açılış süresini kısaltır ve veri tüketimini azaltır. Yanlış kurulduğunda ise arama motorlarının içeriği görmemesine, sayfanın kaymasına ve en önemli görselin geç gelmesine yol açar.
Ekranın üstündeki içeriği tembel yüklemeyin
En sık yapılan hata, her görsele aynı kuralı uygulamaktır. Sayfa açıldığında ilk ekranda görünen ana görsel ya da manşet resmi çoğu zaman en büyük içerik öğesidir. Bunu geciktirirseniz Largest Contentful Paint süresi uzar. Bu görsellerde tembel yüklemeyi kapatın, hatta öncelikli yükleme ipucu verin. Tembel yüklemeyi yalnızca ilk ekranın altında kalan öğelere uygulayın.
Yer ayırmayı unutmayın
Görsel yüklenmeden önce tarayıcı boyutunu bilmiyorsa, resim geldiğinde alttaki içerik aşağı iner. Bu da Cumulative Layout Shift değerini bozar ve okuyan kişiyi rahatsız eder. Her görselde genişlik ve yükseklik değerlerini tanımlayın ya da CSS ile en boy oranını sabitleyin. Videolar ve gömülü haritalar için de aynı kural geçerlidir. Düşük çözünürlüklü bir yer tutucu veya düz bir arka plan rengi kullanmak, boşluk hissini azaltır.
Arama motorlarının içeriği görebildiğinden emin olun
Tarayıcıların kendi desteklediği loading=”lazy” özelliği, çoğu durumda güvenli bir seçimdir çünkü görsel adresi sayfa kodunda açıkça durur. JavaScript ile adresleri sonradan ekleyen özel çözümlerde risk daha yüksektir. Kaydırma ya da tıklama olayı bekleyen kodlar, botun tetikleyemeyeceği bir adım olabilir. Görsel adreslerini mutlaka Intersection Observer gibi modern yöntemlerle ve işlenmiş HTML içinde görünür kılın. Kritik metinleri ise asla tembel yüklemeyin. Ayrıca alt metinlerin ilk kodda bulunduğunu kontrol edin.
Uygulamadan sonra test edin
Değişikliği canlıya aldıktan sonra Search Console’daki URL denetimi aracıyla sayfanın işlenmiş halini inceleyin ve görsellerin göründüğünü doğrulayın. PageSpeed Insights ve tarayıcı geliştirici araçlarıyla ağ sekmesinde hangi dosyaların ne zaman indiğine bakın. Yavaş bağlantıyı taklit ederek mobilde hızlı kaydırma yapın. Görsellerin geç belirmesi veya boş alanlar fark ederseniz, yükleme eşiğini artırarak görseller ekrana girmeden biraz önce indirilmeye başlasın.
Tembel yükleme tek başına bir hız çözümü değildir. Önce görselleri uygun boyut ve biçimde sıkıştırın, sonra ilk ekranın dışındaki öğelerde bu yöntemi dikkatle kullanın.