Resimler geç yükleniyor

Jeremy Wagner
Rachel Andrew

Resimler, HTML'de <img> öğeleri olarak satır içi oldukları için web sayfasında görünebilir veya CSS arka plan resimleri olarak kullanabilirsiniz. Bu gönderide, her iki resim türünün de nasıl geç yükleneceğini öğ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çenek vardır: Bunlar, tarayıcılar arasında en iyi uyumluluk için birlikte kullanılabilir:

Tarayıcı düzeyinde geç yükleme kullanma

Hem Chrome hem de Firefox, loading özelliğine sahip geç yüklemeyi destekler. Bu özellik, <img> öğelerine ve ayrıca <iframe> öğelerine eklenebilir. lazy değeri, tarayıcının resmi görüntü alanındaysa hemen yüklemesini belirtir. ve kullanıcı sayfayı yakınlarına kaydırdığında diğer resimleri getirmek için kullanılır.

MDN'lerin loading alanına bakın tarayıcı uyumluluğu tablosunu inceleyin. Tarayıcı geç yüklemeyi desteklemiyorsa özellik yoksayılır ve resimler normal şekilde hemen yüklenir.

Çoğu web sitesinde, satır içi resimlere bu özelliğin eklenmesi performans artışı sağlar ve kullanıcıları, sayfayı hiç kaydırmayacakları resimler yükleyecek şekilde kaydeder. Çok sayıda resminiz varsa ve geç yükleme özelliğini desteklemeyen tarayıcı kullanıcılarının, 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 başlıklı makaleyi inceleyin.

Kesişim Gözlemcisini Kullanma

<img> öğelerinin geç yüklenmesi için çoklu dolgu yapmak üzere JavaScript'i kullanarak görünüm. Etkinse src (ve bazen srcset) özellikleri şu şekildedir: istenen resim içeriğinin URL'leriyle doldurulur.

Daha önce geç yükleme kodu yazdıysanız görevinizi tamamlamış olabilirsiniz kullanarak scroll veya resize gibi etkinlik işleyicileri kullanabilirsiniz. Bu yaklaşım uyumlu olduğu için modern tarayıcılar daha yüksek performanslı ve öğe görünürlüğünü kontrol etme işini Intersection Observer API.

Kavşak Gözlemcisi'nin kullanımı ve okunması, çeşitli sinyallere dayanan kodlara kıyasla daha kolaydır izlemek için bir gözlemci kaydetmeniz yeterlidir. öğe görünürlüğü algılama kodu yazmak yerine öğeleri kullanmanızı öneririz. Tümü geriye kalan, bir öğe görünür olduğunda ne yapılacağına 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ı bölümü vardır:

  1. Öğeyi kullanacağınız öğe olan class özelliği JavaScript'e dokunun.
  2. Aşağıdaki durumlarda görünecek bir yer tutucu resme referans veren src özelliği emin olun.
  3. Yer tutucu özellikleri olan data-src ve data-srcset özellikleri öğe görüntü alanına girdikten sonra yükleyeceğiniz resmin URL'sini içerir.

Şimdi geç yükleme için JavaScript'te Intersection Observer'ın nasıl kullanılacağına bakalım. şu işaretleme kalıbını kullanan resimleri görürsünüz:

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 tüm lazy sınıfına sahip <img> öğeleri. Kesişim Gözlemcisi varsa, img.lazy öğeleri görünüm.

Intersection Observer tüm modern tarayıcılarda mevcuttur. Dolayısıyla, onu loading="lazy" için bir çoklu dolgu olarak kullanmak, çoğu ziyaretçinin geç yükleme özelliğini kullanabilmesini sağlar.

CSS'deki resimler

Web sayfalarındaki görselleri kullanmanın en yaygın yolu <img> etiketleri olsa da, ve CSS aracılığıyla da çağrılabilir. background-image mülkü (ve diğer mülkler). 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 değerlendirmeniz gerekir.

Bağımsız olarak yüklenen <img> öğelerinin aksine ve CSS'de resim yükleme davranışı daha fazla spekülasyon. Doküman ve CSS nesnesi modeller ve oluşturma ağaç tarayıcı oluşturulduğunda, tarayıcı CSS'nin bir dokümana nasıl uygulandığını anlamak için dış kaynak talep etme. Tarayıcı bir CSS kuralı belirlediyse Şu anda mevcut olduğu şekliyle doküman için geçerli olmayan harici bir kaynağın dahil edilmesi oluşturulursa tarayıcı bunu istemez.

Bu tahmine dayalı davranış, CSS'deki resimlerin yüklenmesini ertelemek için kullanılabilir. bir öğenin görüntü alanının içinde ne zaman olduğunu belirlemek için JavaScript kullanarak ve ardından, bu öğeye stil çağırma işlemini uygulayan bir sınıf uygular. arka plan resmi. Bu, ihtiyaç anında resmin indirilmesine neden olur ilk yükte olduğu gibi. Örneğin, Şunu içeren bir öğe ele alalım: büyük hero arka plan resmi:

<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 hero arka planı içerir belirli bir CSS tarafından çağrılan resim. Ancak bu geç yükleme örneğinde, div.lazy-background öğesinin background-image özelliği, visible aracılığıyla görüntü alanında olduğunda öğeye eklenen sınıf:

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

Burada, öğenin görüntü alanında olup olmadığını kontrol etmek için JavaScript kullanın ( Kesişim Gözlemcisi!) ve visible sınıfını O sırada resim yükleyen div.lazy-background öğesi:

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, görüntülerin yüklenmesini gerçekten ihtiyaç duyulan zamana erteleyerek başlatma sırasında hem genel veri kullanımını hem de ağ çakışmasını azaltan harika bir optimizasyondur. Bu, başlatma süresini iyileştirebilir ve resim kodu çözmeleri için gereken süreyi kısaltarak ana iş parçacığında işlemeyi azaltabilir.

Ancak geç yükleme, teknik konusunda çok istekliyseniz web sitenizin Largest Contentful Paint LCP'sini olumsuz şekilde etkileyebilecek bir tekniktir. Kaçınmak isteyeceğiniz şeylerden biri, başlatma sırasında görüntü alanında bulunan resimlerin geç yüklenmesidir.

JavaScript tabanlı geç yükleyiciler kullanırken, bu çözümler src ve srcset özellikleri için yer tutucu olarak genellikle data-src veya data-srcset özelliğini kullandığından görüntü alanı içi resimlerin geç yüklenmesinden kaçınmak istersiniz. Buradaki sorun, tarayıcı önceden yükleme tarayıcısı başlatma sırasında bu resimleri bulamadığı için bu resimlerin yüklenmesinde gecikme yaşanmasıdır.

Görüntü alanı içi bir resmin geç yüklemek için tarayıcı düzeyinde geç yükleme kullanılması bile geri tetiklenebilir. Görünüm içi resme loading="lazy" uygulandığında tarayıcı, görüntü alanında olduğundan emin olana kadar o resim ertelenir ve bu durum bir 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 ihtiyacınız varsa, geç yüklemeyin ve bunu 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, önemli bir kullanıcı grubunun hâlâ eski tarayıcılara bağımlı olması gibi bir seçenek sunuluyorsa aşağıdaki kitaplıklar resimleri geç yüklemek için kullanılabilir:

  • lazysizes, tüm özelliklere sahip bir tembeldir Resimleri ve iframe'leri geç yükleyen bir kitaplık yükleme. Kullandığı desen oldukça otomatik olarak bir <img> öğelerinde lazyload sınıfı ve resim URL'lerini İçerikleri değiştirilen data-src ve/veya data-srcset özellikleri src ve/veya srcset özelliklerine göre değiştirmeniz gerekir. Kesişim kullanıyor Gözlemci (bunları çoklu doldurabilirsiniz) ve çeşitli boyutlardaki eklentilerini geç yükleme gibi şeyler yapabilir. Tembel boyutları kullanma hakkında daha fazla bilgi edinin.
  • vanilla-lazyload, geç yükleme resimleri, arka plan resimleri, videolar, iframe'ler ve ve komut dosyaları. Intersection Observer'dan yararlanır, duyarlı görüntüleri destekler ve tarayıcı düzeyinde geç yüklemeyi etkinleştirir.
  • lozad.js ise bir diğer hafif seçeneğidir. Bu nedenle, yüksek performanslı, ancak daha eski tarayıcılarda kullanabilmeniz için çoklu doldurma işlemi gerekir.
  • React'e özgü geç yükleme kitaplığına ihtiyacınız varsa react-lazyload. Bu sırada Intersection Observer kullanılmıyorsa bilinen bir tembel yöntem sağlar uygulama geliştirmeye alışkın olanlar için resim yükleme olanağı sunar.