Loading lazy

loading="lazy" ile görselleri tembel yüklemeyi öğrenirsin.

loading="lazy" ne işe yarar?

Bir sayfa açıldığında tarayıcı, görselleri indirmeye hemen başlar. Oysa ekranın altında kalan görselleri kullanıcı henüz göremez. <img> etiketine loading="lazy" özniteliğini eklersen tarayıcı, görseli yalnızca kullanıcı yaklaşınca indirir.

Bu yöntem tembel yükleme (lazy loading) olarak bilinir. İlk sayfa çizimini hızlandırır ve veri tüketimini azaltır. Çok görselli galerilerde ve uzun yazılarda en çok farkı burada hissedersin.

Ne zaman kullanmalısın?

Tembel yükleme her görsel için uygun değildir. Ekranın üstünde ilk açılışta görünen görsellere lazy ekleme; tarayıcı bunları zaten hemen yükler, aksine gecikme yaratabilir.

Buna karşılık uzun galerilerde, blog yazısındaki görsellerde ve alt kısma yakın içeriklerde lazy mükemmel çalışır. <img loading="lazy"> yazman yeterli; ek bir betik gerekmez.

Uygulama Galeriyi tembel yükle

Body içinde iki <figure> var; her birinin içinde bir <img> ve bir <figcaption> bulunuyor. Her iki <img> etiketine loading="lazy" özniteliğini ekle.

Örnek çözümü göster

<body>
  <figure>
    <img src="/gorseller/kedi.jpg" alt="Sokak kedisi" loading="lazy">
    <figcaption>Sokak kedisi</figcaption>
  </figure>
  <figure>
    <img src="/gorseller/kopek.jpg" alt="Park köpeği" loading="lazy">
    <figcaption>Park köpeği</figcaption>
  </figure>
</body>

Kendini test et

loading="lazy" özniteliği ne yapar?
- Görseli sayfa açılışında yükler
- Görseli yalnızca kullanıcı yaklaşınca yükler
- Görseli hiç yükletmez
- Görseli yeniden boyutlandırır
Cevabı göster

Görseli yalnızca kullanıcı yaklaşınca yükler — Doğru. lazy, görseli yalnızca kullanıcı yaklaşınca indirir.

img'e loading ekle

<img src="/gorseller/orman.jpg" alt="Orman" ____>

Cevabı göster

<img src="/gorseller/orman.jpg" alt="Orman" loading="lazy">

loading değerini anlamıyla eşleştir

loading="lazy"

Tembel yükler
loading="eager"

Hemen yükler
loading="auto"

Tarayıcıya bırakır

Sıradaki ders: Decoding async

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler