Tembel yükleme, ekranda henüz görünmeyen görsellerin ve çerçevelerin indirilmesini, kullanıcı oraya yaklaşana kadar erteleyen tekniktir. Amacı ilk açılışta indirilen bayt miktarını azaltmak ve bant genişliğini ilk ekrana bırakmaktır. İngilizcede lazy loading diye geçer.
Nasıl açılır?
Modern tarayıcılarda ek kütüphane gerekmez; görsel etiketine loading="lazy" yazmak yeter. Görsellerde Chrome 77, Firefox 75 ve Safari 15.4'ten beri tarayıcı düzeyinde destekleniyor. Aynı öznitelik iframe için de standart, ancak iframe desteği tarayıcılara daha geç geldi. Varsayılan davranış eager; özniteliği hiç yazmamakla eager yazmak aynı sonucu verir.
Tarayıcı görseli tam ekrana girdiği an değil, belli bir mesafe kala indirmeye başlar. Chrome bu mesafeyi hızlı bağlantıda 1.250 piksel, yavaş bağlantıda 2.500 piksel olarak tutuyor ve siz değiştiremiyorsunuz. Yani kaydıran ziyaretçi çoğu zaman boş kutu görmez.
Eskiden bu iş JavaScript kütüphaneleriyle yapılırdı: Görselin adresi data-src içinde saklanır, betik kaydırmayı izleyip onu asıl yerine taşırdı. Betik çalışmazsa görsel hiç görünmezdi. Tarayıcının kendi özniteliği bu riski taşımaz, fazladan betik de indirtmez.
İlk ekrandaki görsele uygulanmaz
Bu maddedeki en önemli cümle bu. Sayfanın en üstündeki kapak görseline tembel yükleme verirseniz tarayıcı onu geç ister ve LCP süreniz uzar. Hız için yaptığınız şey hızı bozar.
Kural basit: İlk ekranda görünmesi muhtemel görsel tembel yüklenmez. Tersine, ona öncelik verilir. Kendi sayfalarımda kapak görseli loading="eager", fetchpriority="high" ve sayfanın başındaki bir ön yükleme satırıyla işaretli.
Bu sitede ne gördüm
17 Eylül 2026'daki PageSpeed turunda blog listesi ve konu sayfalarında ilk kartın kapağının loading="lazy" taşıdığını buldum. Mobilde LCP öğesi tam da o karttı. LCP'nin 1.426 milisaniyesi "kaynak yükleme gecikmesi", yani saf erteleme çıktı. İlk karta eager ve yüksek öncelik verdim, gecikme 117 milisaniyeye indi.
Aynı düzeltmeyi yazı sayfalarında 2 Eylül'de yapmıştım; liste şablonları o turda gözden kaçmıştı. Ders şu: Kural tek şablonda değil, ilk ekranda görsel basan her şablonda kontrol edilir.
Nasıl kontrol edilir?
PageSpeed Insights'ta LCP öğesine ve LCP'nin alt parçalarına bakın. Kaynak yükleme gecikmesi yüksekse ve öğe loading="lazy" taşıyorsa sebebi bulmuşsunuzdur. Ardından tembel yüklenen her görselde width ve height yazılı mı, kontrol edin. Yazılmazsa görsel inince metni aşağı iter ve CLS bozulur.
Ne kadar kazandırır, nerede yanılır?
Kazanç, ilk ekranın altında kaç görsel olduğuna bağlıdır. Uzun bir yazıda ya da ürün listesinde fark ciddidir; üç görselli kısa sayfada ölçülebilir kazanç beklemeyin. Görselin kendisini WebP gibi hafif bir biçime çevirmek de ayrı bir bayt kazancıdır. Hız ölçütlerinin aramadaki yeri için Core Web Vitals yazısına bakabilirsiniz.
En sık hata, eklentiyle toptan açıp istisna tanımlamamaktır. Logo, giriş görseli ve kapak da tembel yüklenir. Kurulumdan sonra ilk ekrandaki görsellerin listesini çıkarın, hepsini istisnaya alın, sonra ölçün. Ölçmeden "hızlandı" demeyin; bu ayar yanlış kurulduğunda puanı yükseltmez, düşürür.