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

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

Ö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:

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ı:

• Intersection Observer API'yi kullanma
• scroll, resize veya orientationchange etkinlik işleyicilerini kullanma

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, görüntüleri cihaz görüntü alanına göre bulundukları yere bağlı olarak farklı önceliklerle 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ışındaki 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ışı. Özelliği dahil etmemekle aynıdır ve resmin, sayfadaki 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. Resmi, loading özelliği olmayan başka bir resimden daha hızlı yüklemez.

Önemli bir resmin (ör. LCP resmi) getirme önceliğini artırmak istiyorsanız 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 bağlı olarak değişir:

• Getirilen resim kaynağının türü
• Geçerli bağlantı türü

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 görüntüleme alanından uzaklık eşiklerini 3000px'ten 1250px'e düşürdük ve daha yavaş bağlantılarda (3G veya daha düşük) eşik değerini 4000px'den 2500px'e değiştirdik. Bu değişiklik iki hedefe hizmet eder:

• <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:

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

Resimlerinize boyut özellikleri ekleme

Tarayıcı, bir resmi yüklerken açıkça belirtilmediği sürece resmin boyutlarını hemen bilemez. 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, etiketleri gecikmeli yükleyip yüklemediğinizden bağımsız olarak geçerlidir ancak gecikmeli 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 belirtilmemesi, bunların kümülatif düzen kayması ü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'ün çok sayıda resimle nasıl çalıştığına dair bir örnek için bu demoyu inceleyin.

Ayrıca, <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 gecikmeli yüklemenin performans üzerindeki etkileri başlıklı makaleyi inceleyin.

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 gecikmeli yükleyebilir miyim?

Daha önce Chromium, Android için Chrome'da basit mod etkinse ve loading özelliği sağlanmamışsa veya loading="auto" olarak ayarlanmışsa ertelemeye uygun tüm resimleri otomatik olarak gecikmeli olarak yüklerdi. Ancak basit mod ve loading="auto" desteği sonlandırıldı ve Chrome'da otomatik olarak gecikmeli görüntü yükleme özelliğinin sunulması planlanmıyor.

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, görüntü alanında hemen görünmeyen resimlerle çalışabilir mi?

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:0stillendirmenin kullanılması gibi diğer görsel gizleme teknikleri, tarayıcının görseli yüklemesine neden olur. Amaçlandığı gibi çalıştığından emin olmak için uygulamanızı her zaman kapsamlı ş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üleme 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 ve tam destek sunan gecikmeli yükleme özelliği sayesinde, resimleri gecikmeli yüklemek için üçü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 özelliği destekleyip desteklemediğini algılamak için loading mülkünü 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ş ş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 seçeneğin nasıl çalıştığını 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?

<iframe loading=lazy> de standartlaştırıldı. Bu sayede loading özelliğini kullanarak iframe'leri gecikmeli olarak yükleyebilirsiniz. Daha fazla bilgi için Ekran dışı iFrame'leri yavaş yükleme zamanı başlıklı makaleyi inceleyin.

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 veya 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 875403 numaralı soruna 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 gecikmeli 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.