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

Yerleşik geç yükleme özelliği nihayet kullanıma sunuldu.

Resimlerin geç yüklenmesi için tarayıcı düzeyinde destek artık web'de desteklenmektedir. Bu videoda özelliğin demosu gösterilmektedir:

Özel geç yükleme kodu yazmaya veya ayrı bir JavaScript kitaplığı kullanmaya gerek kalmadan resimleri geç yüklemek için loading özelliğini kullanabilirsiniz. Ayrıntılara göz atalım.

Tarayıcı uyumluluğu

loading özelliğini desteklemeyen tarayıcılar, yan etkileri olmadan bu özelliği yoksayar.

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 tüm kaynaklardan daha fazla bant genişliği kullanır. 90. yüzdelik dilimde siteler, masaüstü ve mobil cihazlarda 5 MB'tan fazla resim gönderir. Çok fazla kedi resmi var.

Daha önce, ekran dışı resimlerin yüklenmesini ertelemenin iki yolu vardı:

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

Her iki seçenek de geliştiricilerin geç yükleme işlevini içermesini sağlayabilir. Birçok geliştirici, kullanımı daha da kolay soyutlamalar sağlamak için üçüncü taraf kitaplıklar oluşturmuştur. Bununla birlikte, tarayıcı tarafından doğrudan desteklenen geç yükleme sayesinde harici bir kitaplığa gerek yoktur. Tarayıcı düzeyinde geç yükleme, istemcide JavaScript devre dışı olsa bile resimlerin ertelenmiş yükleme işleminin çalışmaya devam etmesini sağlar.

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ının altındaki resimler daha düşük öncelikle yüklenir, ancak yine de sayfa yüklenirken getirilirler.

Kaydırma yoluyla erişilen 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 yüklenmesini, görüntü alanından hesaplanmış bir mesafeye ulaşana kadar erteleyin.
• eager: Tarayıcının varsayılan yükleme davranışı. Bu, özelliği eklememekle aynıdır ve resmin, sayfanın neresinde olursa olsun yüklenmesi anlamına gelir. Bu varsayılan değer olsa da, açık bir değer yoksa araçlarınız loading="lazy" değerini otomatik olarak eklerse veya linter aracınız açıkça ayarlanmadıysa bu ayarın açıkça belirlenmesi yararlı olabilir.

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

eager değeri sadece resmin normal şekilde yüklenmesi için verilen bir talimattır. Resim ekran dışındaysa yükleme işleminin daha fazla geciktirilmesi gerekmez. Resmin, loading="eager" özelliği bulunmayan başka bir resimden daha hızlı yükleneceğini ima etmez.

Tarayıcılar kaynakları çeşitli buluşsal yöntemlere göre önceliklendirir ve loading özelliği, resim kaynağının sıradaki nasıl önceliklendirildiğini değil, yalnızca ne zaman sıraya alındığını belirtir. eager ifadesi, tarayıcıların varsayılan olarak her zamanki istekli sıraya ekleme araçlarını kullanır.

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

loading="lazy" ve fetchpriority="high" içeren bir resmin ekran dışındayken de geciktirileceğini ve neredeyse görüntü alanı içinde olduğunda yüksek bir öncelikle getirileceğini unutmayın. Yine de, büyük olasılıkla bu durumda yüksek öncelikli getirilecektir. Dolayısıyla, bu kombinasyona gerçekten ihtiyaç duyulmamalı ve kullanılmamalıdır.

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

Ekranın üst kısmında bulunan, yani kaydırmadan hemen görüntülenebilir tüm resimler normal şekilde yüklenir. Cihaz görüntü alanının çok altında olanlar yalnızca kullanıcı sayfayı kaydırdığında getirilir.

Chromium'un geç yükleme uygulaması, ekran dışı resimlerin kullanıcı sayfayı kaydırdığında yüklenmelerinin bitmesi için yeterince erken yüklenmesini sağlamaya çalışır. Yakındaki resimleri görüntü alanında görünür hale gelmeden uzun süre önce getirerek, görünür hale gelene kadar yüklenme olasılıklarını en üst düzeye çıkarırız.

JavaScript geç yükleme kitaplıklarıyla karşılaştırıldığında, görünüme kaydırılan resimleri getirme eşikleri geleneksel olarak kabul edilebilir.

Mesafe eşiği sabit değildir ve çeşitli faktörlere bağlı olarak değişir:

• Getirilen resim kaynağının türü
• Etkili bağlantı türü

Farklı etkili bağlantı türleri için varsayılan değerleri Chromium kaynağında bulabilirsiniz. Bu sayılar ve hatta yalnızca görüntü alanından belirli bir mesafeye ulaşıldığında getirme yaklaşımı, Chrome ekibinin ne zaman yüklenmeye başlayacağını belirlemek için bulgusal yöntemleri geliştirdikçe gelecekte değişebilir.

İyileştirilmiş veri tasarrufu ve görüntü alanından uzaklık eşikleri

Temmuz 2020 itibarıyla Chrome, geliştiricilerin beklentilerini daha iyi karşılamak amacıyla görüntü geç yüklemenin görüntü alanından uzaklığı eşiklerini uyumlu hale getirmek için önemli iyileştirmeler yaptı.

Hızlı bağlantılarda (4G) Chrome'un görüntü alanından mesafe eşiklerini 3000px iken 1250px, daha yavaş bağlantılarda (3G veya daha düşük) ise 4000px olan eşiği 2500px olarak değiştirdik. Bu değişimle sonuçlanacak iki şey var:

• <img loading=lazy>, JavaScript geç yükleme kitaplıklarının sunduğu deneyime daha yakın davranır.
• Yeni görüntü alanından uzaklık eşikleri, görüntülerin kullanıcı sayfayı kaydırana kadar muhtemelen yüklenmiş olduğunu garantilememize olanak tanımaktadır.

Hızlı bağlantı (4G) üzerinden kullanılan demolarımızdan birinin eski ve yeni görüntü alanından uzaklık eşiklerinin karşılaştırmasını aşağıda bulabilirsiniz:

Eski eşikler ve yeni eşikler:

ve yeni eşikler ile LazySizes (popüler bir JS geç yükleme kitaplığı) karşılaştırması:

Farklı tarayıcılarda görüntü alanından uzaklık eşiklerine yaklaşım konusunda daha iyi uyum sağlamak için web standartları topluluğuyla birlikte çalışmaya kararlıyız.

Resimler boyut özelliklerini içermelidir

Tarayıcı bir resmi yüklerken, açıkça belirtilmediği sürece resmin boyutlarını hemen bilmez. Tarayıcının bir sayfada resimlere yeterli alan ayırmasını sağlamak için tüm <img> etiketlerinin hem width hem de height özelliklerini içermesi önerilir. Boyutlar belirtilmediğinde, düzen kaymaları gerçekleşebilir. Bu kaymalar, yüklenmesi biraz zaman alan sayfalarda daha belirgindir.

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

Alternatif olarak, değerlerini doğrudan bir satır içi stilde belirtin:

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

Boyutları ayarlamayla ilgili en iyi uygulama, geç yüklenip yüklenmediklerine bakılmaksızın <img> etiketleri için geçerlidir. Geç yükleme sayesinde bu durum daha alakalı hale gelebilir. Modern tarayıcılarda resimler için width ve height değerlerinin ayarlanması, tarayıcıların gerçek boyutlarını tahmin etmesine de olanak tanır.

Çoğu senaryoda, boyutlar eklenmezse resimler yine de geç yüklenir. Ancak bilmeniz gereken birkaç uç durum vardır. width ve height belirtilmezse resim boyutları başlangıçta 0×0 piksel olur. Bu tür resimlerden oluşan bir galeriniz varsa, her biri neredeyse hiç yer kaplamadığı ve hiçbir resim ekran dışına aktarılmadığı için, tarayıcı tümünün başlangıçta görüntü alanının içine sığdığı sonucuna varabilir. Bu durumda tarayıcı, tümünün kullanıcı tarafından görünür olduğunu belirler ve her şeyi yüklemeye karar verir.

Ayrıca, resim boyutlarının belirtilmesi, düzen kayması olasılığını azaltır. Resimleriniz için boyut ekleyemiyorsanız, bunları geç yüklemek, ağ kaynaklarını kaydetme ve potansiyel olarak düzen kayması riskiyle karşı karşıya kalma arasında bir denge yaratabilir.

Chromium'da geç yükleme, resimlerin görünür hale geldikten sonra yüklenebileceği şekilde uygulanır ancak küçük bir olasılık da hâlâ yüklenmeyebilir. Bu durumda, bu tür resimlerde width ve height özelliklerinin eksik olması, Cumulative Layout Shift'teki etkilerini artırır.

<picture> öğesi kullanılarak tanımlanan resimler geç yüklenebilir:

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

<source> öğelerinin herhangi birinden hangi resmin yükleneceğine tarayıcı karar verecek olsa da loading özelliğinin yalnızca yedek <img> öğesine eklenmesi gerekir.

İlk görünür görüntü alanındaki resimleri geç yüklemekten kaçının

Görünür ilk görüntü alanındaki resimler için loading=lazy ayarı yapmaktan kaçınmalısınız. Bu, özellikle LCP resimleri için geçerlidir. Daha fazla bilgi için Çok fazla geç yüklemenin performans etkileri başlıklı makaleyi inceleyin.

Mümkünse yalnızca ekranın alt kısmına yerleştirilen resimlere loading=lazy eklemeniz önerilir. Özenle yüklenen resimler hemen getirilebilir. Ancak geç yüklenen resimler ise şu anda tarayıcının, resmin sayfada nerede bulunduğunu öğrenene kadar beklemesi gerekir. Bu durumda, kullanılabilir olması için IntersectionObserver kullanılır.

Genel olarak, görüntü alanındaki tüm resimler tarayıcının varsayılanları kullanılarak merakla yüklenmelidir. Görüntü alanı içindeki resimlerde böyle olması için loading=eager belirtmeniz gerekmez.

<!-- 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ğin varlığını yoksayar. Bu tarayıcılar geç yüklemenin avantajlarından yararlanmayacak olsa da özelliğin dahil edilmesi bu tarayıcılar üzerinde olumsuz bir etkiye sahip değildir.

SSS

Chrome'da görselleri otomatik olarak geç yükleme planı var mı?

Chromium daha önce, Android için Chrome'da Basit mod'un etkinleştirildiği ve loading özelliğinin sağlanmadığı veya loading="auto" olarak ayarlandığı durumlarda ertelenmeye uygun resimleri otomatik olarak geç yüklüyordu. Ancak, Basit mod kullanımdan kaldırılmıştır (standart olmayan loading="auto" olarak) ve şu anda Chrome'da görüntülerin otomatik olarak geç yüklenmesiyle ilgili bir plan bulunmamaktadır.

Yükleme tetiklenmeden önce bir resmin ne kadar yakın olması gerektiğini değiştirebilir miyim?

Bu değerler sabit kodludur ve API üzerinden değiştirilemez. Ancak, tarayıcılar farklı eşik mesafeleri ve değişkenleriyle denemeler yaptığından gelecekte bu değerler değişebilir.

CSS arka plan resimleri loading özelliğinden yararlanabilir mi?

Hayır, şu anda yalnızca <img> etiketleriyle kullanılabilir.

Cihazın görüntü alanında bulunan resimlerin geç yüklenmesinin bir dezavantajı var mı?

Chrome, loading=lazy resimlerini ön yükleme tarayıcısına önceden yüklemez ve tüm düzen tamamlanıncaya kadar bu tür resimleri getirmeyi geciktirdiği için ekranın üst kısmındaki resimlere loading=lazy eklememek daha güvenlidir. Daha fazla bilgi için İlk görünür görüntü alanındaki geç yüklenen resimlerden kaçınma konusuna bakın.

loading özelliği, görüntü alanında olan ancak hemen görünür olmayan (örneğin, bir bandın arkasında olan veya belirli ekran boyutlarında CSS tarafından gizlenen) resimlerle nasıl çalışır?

loading="lazy" kullanımı, hesaplanan mesafe içinde görünür olmadıklarında yüklenmelerini engelleyebilir. Örneğin, Chrome, Safari ve Firefox, resim öğesinde veya üst öğede display: none; stilini kullanarak resimleri yüklemez. Bununla birlikte, resimleri gizlemeye yönelik diğer teknikler (ör. opacity:0 stilini kullanma) resimlerin yüklenmesine neden olur. Gerektiği gibi çalıştığından emin olmak için uygulamanızı her zaman kapsamlı bir şekilde test edin.

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

Artık modern tarayıcılarda yerel geç yüklemenin tam desteği sayesinde, resimleri geç yüklemek için hâlâ bir üçüncü taraf kitaplığına veya komut dosyasına ihtiyacınız olup olmadığını tekrar değerlendirmek isteyebilirsiniz.

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

Geç yüklemeyi desteklemeyen tarayıcıları nasıl ele alabilirim?

Sitenizde resimleri geç yüklemek için bir çoklu dolgu oluşturun veya bir üçüncü taraf kitaplığı kullanın. loading özelliği, özelliğin tarayıcıda desteklenip desteklenmediğini algılamak için kullanılabilir:

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

Örneğin, lazysizes popüler bir JavaScript geç yükleme kitaplığıdır. Geç boyutları yalnızca loading desteklenmediğinde yedek kitaplık olarak yüklemek için loading özelliği desteğini tespit edebilirsiniz. Bu yöntem şu şekilde çalışır:

• Desteklenmeyen tarayıcılarda hızlı yükleme yapılmasını önlemek için <img src> değerini <img data-src> ile değiştirin. loading özelliği destekleniyorsa data-src değerini src ile değiştirin.
• loading desteklenmiyorsa bir yedek (lazysizes) yükleyin ve başlatın. Lazysizes dokümanlarına göre, hangi görüntülerin geç yükleneceğini belirtmenin bir yolu olarak lazyload sınıfını kullanırsınız.

<!-- 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 demosunu burada bulabilirsiniz. Yedeğin nasıl çalıştığını görmek için eski bir tarayıcıda deneyin.

iframe'ler için geç yükleme, tarayıcılarda da desteklenir mi?

<iframe loading=lazy> politikası da standart hale getirilmiş olup Chromium ve Safari'de zaten uygulanmaktadır. Bu, iframe'leri loading özelliğini kullanarak geç yüklemenize olanak tanır. Daha fazla bilgi için iframe geç yükleme ile ilgili bu özel makaleye bakın.

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

Kullanıcıya, herhangi bir resim veya iframe gibi resim veya iframe geç yükleme biçiminde gösterilen tüm reklamlar.

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

Sayfa yazdırıldıysa 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ır mı?

Lighthouse 6.0 ve sonraki sürümler, farklı eşikler kullanabilen ekran dışı resim geç yükleme yaklaşımlarında, Ekran dışı resimleri erteleme denetiminden geçebilmelerini sağlar.

Sonuç

Geç yüklenen resimleri desteklemek, web sayfalarınızın performansını iyileştirmenizi önemli ölçüde kolaylaştırabilir.

Chrome'da bu özelliğin etkinleştirilmesiyle ilgili olağan dışı bir davranış fark ettiniz mi? Hata bildiriminde bulunun!