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ı azaltmaktır.
Nasıl açılır?
Modern tarayıcılarda ek bir kütüphane gerekmez, görsel etiketine loading="lazy" yazmak yeter. Aynı öznitelik gömülü çerçevelerde de çalışır.
İ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ç keşfeder ve LCP süreniz uzar. Yani hız için yaptığınız şey hızı bozar.
Kural basit: ilk ekranda görünen görsel tembel yüklenmez. Tersine, ona öncelik verilir. Kendi blog sayfalarımda kapak görseli hem loading="eager" ile hem de sayfanın en başındaki bir ön yükleme satırıyla işaretli.
Genişlik ve yükseklik yazmayı unutmayın
Tembel yüklenen her görsele width ve height yazın. Yazmazsanız görsel indiğinde metni aşağı iter ve CLS puanınız bozulur. Ziyaretçi açısından bu, okuduğu satırın gözünün önünde kaymasıdır.
Ne kadar kazandırır?
Kazanç, ilk ekranın altında kaç görsel olduğuna bağlıdır. Uzun bir blog yazısında ya da ürün listesinde fark ciddidir. Üç görselli kısa bir sayfada ise ölçülebilir bir kazanç beklemeyin.
Sık yapılan hata
Eklentiyle toptan açıp hiçbir istisna tanımlamamak. Böyle kurulduğunda logo, hero görseli ve kapak da tembel yüklenir. Kurulumdan sonra ilk ekrandaki görsellerin listesini çıkarıp hepsini istisnaya alın, sonra ölçün.