Resimler, HTML'de <img> öğeleri veya CSS arka plan resimleri olarak satır içinde oldukları için web sayfasında görünebilir. Bu yayında, her iki resim türünü de nasıl geç yükleyeceğinizi öğreneceksiniz.
Satır içi resimler
En yaygın geç yükleme adayları, <img> öğelerinde kullanılan resimlerdir.
Satır içi resimlerde geç yükleme için üç seçeneğimiz vardır. Bunlar, tarayıcılar arasında en iyi uyumluluk için bir arada kullanılabilir:
Tarayıcı düzeyinde geç yükleme kullanma
Hem Chrome hem de Firefox, loading özelliğiyle geç yüklemeyi destekler.
Bu özellik, <img> öğelerine ve ayrıca <iframe> öğelerine eklenebilir.
lazy değeri, tarayıcıya resmi görüntü alanındaysa hemen yüklemesini ve kullanıcı sayfayı kaydırdığında diğer resimleri getirmesini bildirir.
Tarayıcı desteğinin ayrıntıları için MDN'nin tarayıcı uyumluluğu tablosunun loading alanına bakın.
Tarayıcı geç yüklemeyi desteklemiyorsa özellik yok sayılır ve resimler normal şekilde hemen yüklenir.
Çoğu web sitesi için, bu özelliğin satır içi resimlere eklenmesi performans artışı sağlar ve kullanıcıların kaydırmalarına gerek duymadıkları resimler yüklemelerinin önüne geçer. Çok sayıda resminiz varsa ve geç yükleme avantajını desteklemeyen tarayıcı kullanıcılarının olduğundan emin olmak istiyorsanız, bunu aşağıda açıklanan yöntemlerden biriyle birleştirmeniz gerekir.
Daha fazla bilgi edinmek için Web için tarayıcı düzeyinde geç yükleme konusuna bakın.
Kesişim Gözlemcisini Kullanma
<img> öğelerinin geç yüklemesini çoklu doldurma amacıyla, öğelerin görüntü alanında olup olmadığını kontrol etmek için JavaScript kullanırız. Kodlar doğru şekilde eklenmişse src (ve bazen srcset) özellikleri, istenen resim içeriğinin URL'leriyle doldurulur.
Daha önce geç yükleme kodu yazdıysanız scroll veya resize gibi etkinlik işleyicileri kullanarak görevinizi tamamlamış olabilirsiniz. Bu yaklaşım tarayıcılar arasında en uyumlu olsa da modern tarayıcılar, Intersection Observer API aracılığıyla öğe görünürlüğünü kontrol etme işini yapmak için daha etkili ve verimli bir yol sunar.
Kavşak Gözlemleyicisi'nin kullanımı ve okunması, çeşitli etkinlik işleyicilerden yararlanan koddan daha kolaydır. Çünkü, yorucu öğe görünürlüğü algılama kodu yazmak yerine yalnızca bir gözlemciyi izleme öğelerine kaydetmeniz yeterlidir. Kalan tek şey, bir öğe görünür olduğunda ne yapacağınıza karar vermektir.
Geç yüklenen <img> öğeleriniz için şu temel işaretleme kalıbını kabul edelim:
<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">
Bu işaretlemenin odaklanmanız gereken üç alakalı parçası vardır:
- Öğeyi JavaScript'te seçeceğiniz
classözelliği. - Sayfa ilk yüklendiğinde görünecek bir yer tutucu resme başvuruda bulunan
srcözelliği. - Öğe görüntü alanına girdikten sonra yükleyeceğiniz resmin URL'sini içeren yer tutucu özellikleri olan
data-srcvedata-srcsetözellikleri.
Şimdi bu işaretleme kalıbını kullanarak görüntüleri geç yüklemek için JavaScript'te Intersection Observer'ı nasıl kullanacağımızı görelim:
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to event handlers here
}
});
Bu komut dosyası, dokümanın DOMContentLoaded etkinliğinde lazy sınıfına sahip tüm <img> öğeleri için DOM'u sorgular. Intersection Observer mevcutsa img.lazy öğeleri görüntü alanına girdiğinde geri çağırma çalıştıran yeni bir gözlemci oluşturun.
Intersection Observer tüm modern tarayıcılarda kullanılabilir.
Dolayısıyla, bunu loading="lazy" için bir çoklu dolgu olarak kullanmak, geç yüklemenin çoğu ziyaretçi için kullanılabilir olmasını sağlar.
CSS'deki resimler
<img> etiketleri web sayfalarında resimleri kullanmanın en yaygın yoludur. Bununla birlikte, resimler CSS background-image özelliği (ve diğer özellikler) aracılığıyla da çağrılabilir. Tarayıcı düzeyinde geç yükleme, CSS arka plan resimleri için geçerli değildir. Bu nedenle, geç yüklenecek arka plan resimleriniz varsa diğer yöntemleri dikkate almanız gerekir.
Görünürlüğünden bağımsız olarak yüklenen <img> öğelerinin aksine, CSS'deki resim yükleme davranışı daha fazla spekülasyonla gerçekleştirilir. Belge ve CSS nesne modelleri ve oluşturma ağacı oluşturulduğunda tarayıcı, harici kaynaklar istemeden önce CSS'nin dokümana nasıl uygulandığını inceler. Tarayıcı, harici kaynağı içeren bir CSS kuralının, halihazırda oluşturulmuş olduğundan doküman için geçerli olmadığını belirlerse tarayıcı istekte bulunmaz.
Bu tahmine dayalı davranış, bir öğenin görüntü alanında ne zaman olduğunu belirlemek için JavaScript kullanılarak ve ardından arka plan resmi çağırma işleminin uygulandığı söz konusu öğeye bir sınıf uygulanarak resimlerin CSS'de yüklenmesini ertelemek için kullanılabilir. Bu durum, resmin ilk yükleme sırasında değil ihtiyaç anında indirilmesine neden olur. Örneğin, büyük bir hero arka plan resmi içeren bir öğeyi ele alalım:
<div class="lazy-background">
<h1>Here's a hero heading to get your attention!</h1>
<p>Here's hero copy to convince you to buy a thing!</p>
<a href="/buy-a-thing">Buy a thing!</a>
</div>
div.lazy-background öğesi normalde, bazı CSS'ler tarafından çağrılan hero arka plan resmini içerir. Bununla birlikte, bu geç yükleme örneğinde, div.lazy-background öğesinin background-image özelliğini görüntü alanındayken öğeye eklenen bir visible sınıfı aracılığıyla ayırabilirsiniz:
.lazy-background {
background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}
.lazy-background.visible {
background-image: url("hero.jpg"); /* The final image */
}
Buradan, öğenin görüntü alanında olup olmadığını kontrol etmek için JavaScript kullanın (Intersection Observer! ile) ve bu sırada visible sınıfını div.lazy-background öğesine ekleyin. Bu işlem resmi yükler:
document.addEventListener("DOMContentLoaded", function() {
var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
if ("IntersectionObserver" in window) {
let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
lazyBackgroundObserver.unobserve(entry.target);
}
});
});
lazyBackgrounds.forEach(function(lazyBackground) {
lazyBackgroundObserver.observe(lazyBackground);
});
}
});
Largest Contentful Paint (LCP) üzerindeki etkiler
Geç yükleme, resimlerin yüklenmesini gerçekten gerekli oldukları zamana erteleyerek başlatma sırasında hem genel veri kullanımını hem de ağ anlaşmazlığını azaltan mükemmel bir optimizasyondur. Bu işlem, başlatma süresini kısaltabilir ve resimlerin kod çözme işlemi için gereken süreyi kısaltarak ana iş parçacığındaki işleme süresini kısaltabilir.
Ancak geç yükleme, tekniğe çok meraklıysanız web sitenizin Largest Contentful Paint LCP'sini olumsuz bir şekilde etkileyebilecek bir tekniktir. Başlangıç sırasında görüntü alanında bulunan resimlerin geç yüklenmesinden kaçınmak isteyebilirsiniz.
JavaScript tabanlı geç yükleyicileri kullanırken bu çözümler genellikle src ve srcset özellikleri için yer tutucu olarak data-src ya da data-srcset özelliğini kullandığından görüntü alanı içi resimlerin geç yüklenmesinden kaçınmak isteyebilirsiniz. Buradaki sorun, tarayıcı ön yükleme tarayıcısı başlatma sırasında resimleri bulamadığı için bu resimlerin yüklenmesinin gecikecek olmasıdır.
Görüntü alanındaki bir resmin geç yüklemek için tarayıcı düzeyinde geç yükleme kullanıldığında bile geri tepebilir. Görüntü içi bir resme loading="lazy" uygulandığında, ilgili resim, tarayıcı görüntü alanında olduğundan emin olana kadar ertelenir ve bu da sayfanın LCP'sini etkileyebilir.
Başlatma sırasında görüntü alanında görünen resimleri hiçbir zaman geç yükleme. Bu, sitenizin LCP'sini ve dolayısıyla kullanıcı deneyimini olumsuz yönde etkileyecek bir kalıptır. Başlangıçta bir görüntüye ihtiyaç duyarsanız geç yükleme yapmadan, başlangıçta mümkün olduğunca hızlı bir şekilde yükleyin.
Kitaplıkları geç yükleme
Mümkün olduğunda tarayıcı düzeyinde geç yüklemeyi kullanmalısınız, ancak bunun bir seçenek olmadığı durumlarda (örneğin, eski tarayıcılara hâlâ bağımlı olan önemli bir kullanıcı grubu) resimleri geç yüklemek için aşağıdaki kitaplıklar kullanılabilir:
- lazysizes, resimleri ve iframe'leri geç yükleyen tam özellikli bir geç yükleme kitaplığıdır. Kullandığı kalıp,
<img>öğelerinde birlazyloadsınıfına otomatik olarak bağlanması ve içerikleri sırasıylasrcve/veyasrcsetözellikleriyle değiştirilendata-srcve/veyadata-srcsetözelliklerinde belirtmesi açısından burada gösterilen kod örneklerine oldukça benzer. Kesişim Gözlemcisi'ni (çoklu dolgu oluşturabilirsiniz) kullanır ve geç yüklenen video gibi şeyler yapmak için birkaç eklentiyle genişletilebilir. Geç boyutları kullanma hakkında daha fazla bilgi edinin. - vanilla-lazyload; geç yüklenen resimler, arka plan resimleri, videolar, iframe'ler ve komut dosyaları için hafif bir seçenektir. Intersection Observer'ı kullanır, duyarlı resimleri destekler ve tarayıcı düzeyinde geç yüklemeyi etkinleştirir.
- lozad.js, yalnızca Kesişim Gözlemcisini kullanan basit bir seçenektir. Bu nedenle, yüksek performans gösterir, ancak eski tarayıcılarda kullanmadan önce çoklu doldurulması gerekir.
- React'a özel bir geç yükleme kitaplığına ihtiyacınız varsa react-lazyload özelliğini kullanmayı düşünün. Intersection Observer'ı kullanmasa da React ile uygulama geliştirmeye alışkın olan kişiler için görüntülerin geç yüklenmesi için bilinen bir yöntem sağlar.