Tarayıcı desteği
Ö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
veyaorientationchange
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, 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 olarakloading="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:
- 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 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:
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 öğ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
, 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:0
stil 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 destekleniyorsadata-src
yerinesrc
değerini kullanın. loading
desteklenmiyorsa lazysizes'den bir yedek yükleyin ve hangi resimlerin yavaş yükleneceğini belirtmek içinlazyload
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
<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.