Web için tarayıcı düzeyinde resim geç yükleme

Tarayıcı desteği

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 15.4.

Özel yavaş yükleme kodu yazmak veya ayrı bir JavaScript kitaplığı kullanmak zorunda kalmadan resimleri yavaş yüklemek için loading özelliğini kullanabilirsiniz. Özelliğin demosunu aşağıda bulabilirsiniz:

Geç yüklenen resimler, kullanıcı sayfada gezinirken yüklenir.

Bu sayfada, tarayıcıda yavaş yüklemenin uygulanmasıyla ilgili ayrıntılar açıklanmaktadır.

Neden tarayıcı düzeyinde geç yükleme?

HTTP Arşivi'ne göre, resimler çoğu web sitesi için en çok istenen öğe türüdür ve genellikle diğer kaynaklardan daha fazla bant genişliği kullanır. 90. yüzdelik dilimdeki siteler, masaüstü ve mobil cihazlarda 5 MB'tan fazla resim gönderiyor.

Önceden ekran dışındaki resimlerin yüklenmesini ertelemek için iki yöntem vardı:

Her iki seçenek de geliştiricilerin yavaş yükleme davranışını eklemesine olanak tanır. Birçok geliştirici, kullanımı daha da kolay soyutlamalar sağlamak için üçüncü taraf kitaplıkları oluşturmuştur.

Ancak doğrudan tarayıcı tarafından desteklenen yavaş yükleme özelliği sayesinde harici bir kitaplığa gerek yoktur. Tarayıcı düzeyinde geç yükleme, istemci JavaScript'i devre dışı bıraksa bile resimlerin yüklenmeye devam etmesini sağlar. Ancak yüklemenin yalnızca JavaScript etkinken ertelendiği unutulmamalıdır.

loading özelliği

Chrome, resimleri cihazın görüntü alanına göre bulundukları yere bağlı olarak farklı önceliklerde yükler. Görüntü alanı altındaki resimler daha düşük öncelikli olarak yüklenir ancak sayfa yüklenirken getirilmeye devam eder.

Ekran dışı resimlerin yüklenmesini tamamen ertelemek için loading özelliğini kullanabilirsiniz:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

loading özelliği için desteklenen değerler şunlardır:

  • lazy: Kaynağın görüntü alanından hesaplanmış bir mesafeye ulaşana kadar yüklenmesini erteleyin.
  • eager: Tarayıcının varsayılan yükleme davranışı. Bu davranış, özelliğin eklenmemesiyle aynıdır ve resmin sayfada konumundan bağımsız olarak yüklendiği anlamına gelir. Bu varsayılan ayardır ancak açık bir değer yoksa araçlarınız otomatik olarak loading="lazy" eklerse veya linter'iniz açıkça ayarlanmadığında şikayet ederse açıkça ayarlamak yararlı olabilir.

loading özelliği ile getirme önceliği arasındaki ilişki

eager değeri, resim ekranda değilse yüklemeyi daha fazla geciktirmeden resmi her zamanki gibi yükleme talimatı verir. Resim, loading özelliğine sahip olmayan diğer bir resimden daha hızlı yüklenmez.

Önemli bir resmin getirme önceliğini artırmak istiyorsanız (örneğin, LCP resmi) fetchpriority="high" ile Getirme Önceliği'ni kullanın.

loading="lazy" ve fetchpriority="high" içeren bir resim, ekranda değilken gecikmeli olarak getirilir ve görüntü alanının neredeyse içinde olduğunda yüksek öncelikli olarak getirilir. Tarayıcı büyük olasılıkla bu resmi zaten yüksek öncelikli olarak yükleyeceğinden bu kombinasyon gerçekten gerekli değildir.

Görüntü alanından uzaklık eşikleri

Kaydırma yapmadan hemen görüntülenebilen tüm resimler normal şekilde yüklenir. Cihaz görüntü alanının çok altındaki resimler yalnızca kullanıcı ekranı kaydırarak bu resimlere yaklaştığında getirilir.

Chromium'un geç yükleme uygulaması, ekran dışındaki görsellerin görüntü alanında görünür hale gelmeden çok önce getirilerek kullanıcı ekranı kaydırdığında yüklemelerinin tamamlanmasını sağlayacak kadar erken yüklenmesini sağlamaya çalışır.

Mesafe eşiği aşağıdaki faktörlere göre değişir:

Farklı etkili bağlantı türlerinin varsayılan değerlerini Chromium kaynağında bulabilirsiniz. DevTools'da ağı tıklayarak bu farklı eşiklerle denemeler yapabilirsiniz.

Veri tasarrufu ve görüntüleme alanından uzaklık eşikleri iyileştirildi

Temmuz 2020'de Chrome, geliştirici beklentilerini daha iyi karşılamak için resimlerin görüntüleme alanından uzaklık eşiklerini hizalamak amacıyla önemli iyileştirmeler yaptı.

Hızlı bağlantılarda (4G) Chrome'un 3000px olan görüntü alanından uzaklık eşiklerini 1250px değerine, daha yavaş bağlantılarda (3G veya daha düşük) ise 4000px olan eşiği 2500px olarak değiştirdik. Bu değişiklikle iki şey sağlanıyor:

  • <img loading=lazy>, JavaScript'in yavaş yükleme kitaplıklarının sunduğu deneyime daha yakın davranır.
  • Yeni görüntüleme alanından uzaklık eşikleri, kullanıcı ekranı kaydırdığında resimlerin büyük olasılıkla yüklenmiş olacağı anlamına gelir.

Aşağıda, hızlı bağlantı (4G) kullanan demolarımızdan birinde eski ve yeni görüntü alanı mesafesi eşikleri arasındaki karşılaştırmayı bulabilirsiniz:

Resim geç yükleme için yeni ve iyileştirilmiş eşikler. Bu eşikler, hızlı bağlantılarda görüntüleme alanından uzaklık eşiklerini 3.000 pikselden 1.250 piksele düşürür.
Tarayıcı düzeyinde gecikmeli yükleme için kullanılan eski ve yeni eşiklerin karşılaştırması.

ve yeni eşikler ile LazySizes (popüler bir JavaScript gecikmeli yükleme kitaplığı) arasındaki farklar:

Chrome&#39;daki yeni görüntü mesafesi eşikleri, aynı ağ koşullarında LazySizes&#39;ın 70 KB&#39;ta yüklediği görüntülere kıyasla 90 KB&#39;ta yüklenen görüntüler.
Chrome ve LazySizes'ta ertelenen yükleme için kullanılan eşiklerin karşılaştırması.

Resimlerinize boyut özellikleri ekleme

Tarayıcı bir resmi yüklerken, açıkça belirtilmediği sürece resmin boyutlarını hemen öğrenmez. Tarayıcının sayfalarda resimler için yeterli alan ayırmasına izin vermek ve rahatsız edici düzenleme değişikliklerini önlemek amacıyla tüm <img> etiketlerine width ve height özelliklerini eklemenizi öneririz.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Alternatif olarak, değerlerini doğrudan satır içi bir biçimde belirtebilirsiniz:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

Boyutları ayarlamayla ilgili en iyi uygulama, <img> etiketleri için bunları yavaş yükleyip yüklemediğinizden bağımsız olarak geçerlidir ancak yavaş yükleme, bu uygulamayı daha önemli hale getirebilir.

Chromium'da yavaş yükleme, resimlerin görünür hale gelir gelmez yüklenme olasılığını artıracak şekilde uygulanır ancak yine de doğru zamanda yüklenmeme ihtimali vardır. Bu durumda, resimlerinizde width ve height öğelerini belirtmemek, bu öğelerin Cumulative Layout Shift üzerindeki etkisini artırır. Resimlerinizin boyutlarını belirtemiyorsanız bunları yavaş yüklemek, artan düzen kaydırma riski altında ağ kaynaklarından tasarruf etmenizi sağlayabilir.

Çoğu durumda, boyutları belirtmezseniz görseller yine de yavaş yüklenir ancak dikkat etmeniz gereken birkaç uç durum vardır. width ve height belirtilmezse resim boyutları varsayılan olarak 0x0 piksel olur. Resimleriniz varsa tarayıcı, her resim yer kaplamadığı ve ekrandan dışarı itilmediği için başlangıçta bunların hepsinin görüntüleme alanının içine sığacağına karar verebilir. Bu durumda tarayıcı her şeyi yüklemeye karar verir ve sayfa daha yavaş yüklenir.

loading özelliğinin çok sayıda resimle nasıl çalıştığına dair bir örnek için bu demoya bakın.

<picture> öğesini kullanarak tanımladığınız resimleri de yavaş yükleyebilirsiniz:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Tarayıcı, <source> öğelerinden hangisinin yükleneceğine karar verse de yedek <img> öğesine yalnızca loading eklemeniz gerekir.

İlk görüntü alanında görünen resimleri her zaman isteğe bağlı olarak yükleme

Kullanıcı sayfayı ilk kez yüklediğinde görünen görseller ve özellikle LCP görselleri için tarayıcının varsayılan istekli yüklemesini kullanın. Böylece bu görseller hemen kullanılabilir. Daha fazla bilgi için Çok fazla geç yüklemenin performans üzerindeki etkileri başlıklı makaleye bakın.

loading=lazy öğesini yalnızca ilk görüntü alanının dışındaki resimler için kullanın. Tarayıcı, resmin sayfadaki yerini öğrenene kadar resmin gecikmeli yüklemesini yapamaz. Bu da resimlerin daha yavaş yüklenmesine neden olur.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Kontrollü azalma

loading özelliğini desteklemeyen tarayıcılar bu özelliği yoksayar. Bu sayfalar, yavaş yüklemenin avantajlarından yararlanamaz ancak bu özelliği eklemenin olumsuz bir etkisi yoktur.

SSS

Tarayıcı düzeyinde yavaş yükleme hakkında sık sorulan bazı sorular.

Chrome'da resimleri otomatik olarak geç yükleyebilir miyim?

Daha önce Chromium, Android için Chrome'da Basit mod'un etkinleştirilmesi ve loading özelliğinin sağlanmaması veya loading="auto" olarak ayarlanması durumunda ertelenmeye çok uygun olan resimleri otomatik olarak geç yüklüyordu. Bununla birlikte, Basit mod ve loading="auto" kullanımdan kaldırılmıştır ve Chrome'da resimlerin otomatik olarak geç yüklenmesi için bir plan yoktur.

Bir resmin yüklenmeden önce görüntü alanına ne kadar yakın olması gerektiğini değiştirebilir miyim?

Bu değerler sabit kodlanmıştır ve API üzerinden değiştirilemez. Ancak tarayıcılar farklı eşik mesafeleri ve değişkenleriyle deneme yaparken bu değerler gelecekte değişebilir.

CSS arka plan resimleri loading özelliğini kullanabilir mi?

Hayır, yalnızca <img> etiketleriyle kullanabilirsiniz.

loading="lazy" kullanıldığında, görünmeyen ancak hesaplanan mesafe içinde olan resimlerin yüklenmesi engellenebilir. Bu resimler, belirli ekran boyutları için bir bantın arkasında veya CSS tarafından gizlenmiş olabilir. Örneğin, Chrome, Safari ve Firefox, resim öğesinde veya üst öğede display: none; stilini kullanarak resimleri yüklemez. Ancak opacity:0stil kullanma gibi diğer görsel gizleme teknikleri, tarayıcının görseli yüklemesine neden olur. Amaçlanan şekilde çalıştığından emin olmak için uygulamanızı her zaman ayrıntılı bir şekilde test edin.

Chrome 121, bantlar gibi yatay kaydırmalı resimlerin davranışını değiştirdi. Bu eşikler artık dikey kaydırmayla aynı eşikleri kullanır. Bu, bant kullanım alanında resimlerin görüntü alanında görünmeden önce yükleneceği anlamına gelir. Bu, resim yüklemenin kullanıcı tarafından fark edilme olasılığının daha düşük olduğu ancak daha fazla indirme işleminin yapıldığı anlamına gelir. Chrome'daki davranışı Safari ve Firefox ile karşılaştırmak için yatay yavaş yükleme demosunu kullanın.

Resimleri gecikmeli yüklemek için zaten üçüncü taraf kitaplığı veya komut dosyası kullanıyorsam ne yapmalıyım?

Modern tarayıcılarda yerleşik olarak bulunan geç yükleme özelliğinin tam desteği sayesinde, resimleri geç yüklemek için muhtemelen üçüncü taraf kitaplığına veya komut dosyasına ihtiyacınız yoktur.

loading="lazy" ile birlikte üçüncü taraf kitaplığı kullanmaya devam etmenin bir nedeni, özelliği desteklemeyen tarayıcılar için bir polyfill sağlamak veya yavaş yüklemenin ne zaman tetikleneceği üzerinde daha fazla kontrole sahip olmaktır.

Yavaş yüklemeyi desteklemeyen tarayıcılarla nasıl başa çıkacağım?

Tarayıcı düzeyinde gecikmeli görüntü yükleme, tüm büyük tarayıcılarda iyi desteklenir ve JavaScript'e yönelik ek bağımlılıkların ortadan kaldırılması için çoğu kullanım alanı için önerilir.

Ancak daha fazla tarayıcı desteklemeniz gerekiyorsa veya gecikmeli yükleme eşikleri üzerinde daha fazla kontrole sahip olmak istiyorsanız sitenizdeki resimleri gecikmeli yüklemek için üçüncü taraf kitaplığı kullanabilirsiniz.

Bir tarayıcının bu özelliği destekleyip desteklemediğini tespit etmek için loading özelliğini kullanabilirsiniz:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

Örneğin, lazysizes popüler bir JavaScript yavaş yükleme kitaplığıdır. Yalnızca loading desteklenmediğinde yedek kitaplık olarak lazysizes yüklemek için loading özelliğinin desteğini algılayabilirsiniz. İşleyiş şekli şu şekildedir:

  • Desteklenmeyen tarayıcılarda erken yüklemeyi önlemek için <img src> değerini <img data-src> ile değiştirin. loading özelliği destekleniyorsa data-src yerine src değerini kullanın.
  • loading desteklenmiyorsa lazysizes'den bir yedek yükleyin ve hangi resimlerin yavaş yükleneceğini belirtmek için lazyload sınıfını kullanarak başlatın:
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Bu kalıbın demo sürümünü burada bulabilirsiniz. Yedek özelliğini çalışırken görmek için eski bir tarayıcıda deneyin.

Iframe'ler için geç yükleme özelliği tarayıcılarda da desteklenir mi?

Tarayıcı desteği

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 121.
  • Safari: 16.4.

<iframe loading=lazy> da standart hale getirildi. Bu sayede loading özelliğini kullanarak iframe'leri yavaş yükleyebilirsiniz. Daha fazla bilgi için Ekran dışı iframe'leri geç yüklemenin zamanı geldi başlıklı makaleye göz atın.

Tarayıcı düzeyinde gecikmeli yükleme, web sayfasındaki reklamları nasıl etkiler?

Kullanıcıya resim veya iFrame olarak gösterilen tüm reklamlar, diğer tüm resimler ya da iFrame'ler gibi yavaş yüklenir.

Web sayfası yazdırıldığında resimler nasıl işlenir?

Sayfa yazdırıldığında tüm resimler ve iFrame'ler hemen yüklenir. Ayrıntılar için sorun numarası 875403'e bakın.

Lighthouse, tarayıcı düzeyinde geç yüklemeyi tanıyor mu?

Lighthouse 6.0 ve sonraki sürümler, farklı eşikler kullanabilen ekran dışı resimlerin gecikmeli yüklenmesiyle ilgili yaklaşımları hesaba katar. Bu sayede, Ekran dışı resimleri erteleme denetimini geçebilirler.

Performansı artırmak için resimleri geç yükleme

Resimlerin geç yüklenmesi için tarayıcı desteği, sayfalarınızın performansını artırmanızı önemli ölçüde kolaylaştırabilir.

Chrome'da bu özellik etkinken olağan dışı bir davranış fark ediyor musunuz? Hata bildirin.