Geç yüklemeyle ilgili en iyi uygulamalar

Jeremy Wagner

Rachel Andrew

Geç yüklenen resimler ve videolar, olumlu ve ölçülebilir performansa sahipken bu, hafife alınacak bir görev değildir. Yanlış cevap verdiyseniz istenmeyen sonuçlar doğurabilir. Bu nedenle, aşağıdaki belgeleri korumak önemlidir: endişelerini göz önünde bulundurur.

Ekranın üst kısmına dikkat edin

Sayfadaki her bir medya kaynağını geç yükleme yöntemiyle ama bu dürtüye karşı koymanız gerekir. ekran geç yüklenmemelidir. Bu tür kaynaklar, kritik öneme sahip öğedir ve bu nedenle normal şekilde yüklenmelidir.

Geç yükleme, kaynakların yüklenmesini DOM etkileşimli hale gelene kadar geciktirir. . Şunun altındaki resimler için: bu bir sorun teşkil etmez ancak ekranın üst kısmındaki önemli kaynaklar, en kısa sürede gösterilmeleri için standart <img> öğesini kullanın.

Tabii ki, web sitelerinin nerelere yerleştirdiğiyle ilgili günümüzde farklı boyutlardaki pek çok ekranda görüntülenir. Dizüstü bilgisayarda ekranın üst kısmında görünen şey mobil cihazlarda bunun altında yer alabilir. Proje yöneticisi olarak en iyi şekilde ele alacağız. Ekibiniz ve sizin için ve bu resimleri her zaman olduğu gibi yükleyebilirsiniz. moda oluyor.

Ayrıca, ekranın alt kısmındaki gecikmeli yüklemeyi tetiklemek için eşik değeri. Bu, proje yöneticisi olarak görüntülerin başlaması için ekranın alt kısmında bir tampon bölgesi oluşturun kullanıcının sayfayı görüntü alanına kaydırmadan çok önce yüklenmesi gerekir. Örneğin, Intersection Observer API, bir rootMargin özelliği belirtmenize olanak tanır. options nesnesini ifade eder.IntersectionObserver Bu öğelere bir tampon verir. Bu da, yükleme işleminden önce geç yükleme davranışını öğe görüntü alanının içindedir:

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  // lazy-loading image code goes here
}, {
  rootMargin: "0px 0px 256px 0px"
});

rootMargin değeri, bir CSS için belirttiğiniz değerlere benziyorsa Çünkü margin mülk! Bu durumda, gözlemlenen öğenin alt kenar boşluğu (varsayılan olarak tarayıcı görünümü, (root özelliği kullanılarak belirli bir öğeye dönüştürülebilir) 256 ile genişletilir piksel. Bu, bir resim öğesi aşağıdaki gibi olduğunda geri çağırma işlevinin yürütüleceği anlamına gelir: en fazla 256 piksel uzaklıkta gösterilir ve resim yüklenmeye başlar görmeden önce.

Aynı etkiyi Intersection Observe'i desteklemeyen tarayıcılarda da elde etmek için, kaydırma etkinliği işleme kodunu kullanın ve Tampon eklemek için getBoundingClientRect işaretleyin.

Düzen kayması ve yer tutucular

Yer tutucular kullanılmazsa medyanın geç yüklenmesi düzende kaymaya neden olabilir. Bu değişiklikler kullanıcıların kafasını karıştırabilir ve pahalı DOM düzenini tetikleyebilir. işlemlerinizde bir hataya neden olabilir. En azından bir düz renk yer tutucusu ve tablodaki veya LQIP veya Bir medyanın içeriğine dair ipucu veren SQIP öğe geri yüklenir.

<img> etiketleri için src başlangıçta bir yer tutucuya işaret edene kadar özelliği nihai resim URL'si ile güncellendi. poster özelliğini Yer tutucu resme işaret eden <video> öğesi. Ek olarak, width ve Hem <img> hem de <video> etiketlerinde height özellikleri. Böylece proje daha yer tutuculardan nihai resimlere geçiş yapmak oluşturulan boyutu değiştirmez öğenin etkisi.

Resim kodu çözme gecikmeleri

JavaScript'te büyük resimler yüklemek ve bunları DOM'ye bırakmak, kullanıcı arayüzünün kısa bir süre yanıt vermemesine neden olan ana iş parçacığı gereken süreyi ifade eder. decode kullanarak görüntülerin kodunu eşzamansız olarak çözme yöntem eklemek bu tür olumsuzlukları azaltabilir, Dikkat: Henüz her yerde kullanılamamaktadır ve geç yükleme mantığını karmaşıklaştırır. Kullanmak istiyorsanız bunu kontrol etmeniz gerekir. Aşağıdakiler Image.decode() öğesini bir yedekle nasıl kullanabileceğiniz:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) {
  // Fancy decoding logic
  newImage.decode().then(function() {
    imageContainer.appendChild(newImage);
  });
} else {
  // Regular image load
  imageContainer.appendChild(newImage);
}

Aşağıdaki kodu görmek için bu CodePen bağlantısına bu örneğe benzer bir kod yazın. Resimlerinizin çoğu oldukça küçükse bunun sizin için çok bir etkisi olmayabilir ancak daha geç yükleme ve DOM'ye ekleme işlemleri gerçekleştirebilirsiniz.

Öğeler yüklenmediğinde

Bazen medya kaynakları bir nedenden dolayı (veya başka bir nedenden dolayı) yüklenemeyebilir. meydana gelir. Bu ne zaman olabilir? Duruma göre değişir ama varsayıma dayalı bir senaryo verelim. Sizin için kısa bir süreliğine HTML önbelleğe alma politikanız (ör. beş dakika) ve kullanıcı siteyi ziyaret eder veya kullanıcı bir süre için eski bir sekmeyi açık bırakırsa uzun süre (ör. birkaç saat) yer alıp içeriğinizi okumak için geri gelir. Bu sürecin bir noktasında yeniden dağıtım gerçekleşir. Bu dağıtım sırasında Resim kaynağının adı, karma tabanlı sürüm oluşturma nedeniyle değişiyor veya kaldırıldı Hepsini. Kullanıcı görüntüyü geç yüklediğinde kaynak ve dolayısıyla başarısız olur.

Bunlar göreceli olarak nadir durumlardan görülse de, yedeklenmiş olması faydalı olabilir. planlamanızı kolaylaştırır. Resimler için böyle bir çözüm, bu:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

newImage.onerror = function(){
  // Decide what to do on error
};
newImage.onload = function(){
  // Load the image
};

Bir hata olması durumunda ne yapacağınıza kararınız uygulamanıza bağlıdır. Örneğin, Örneğin, resim yer tutucu alanını, Kullanıcının resmi tekrar yüklemeyi denemesi veya yalnızca bir hata mesajı göstermesi ifadesini girin.

Başka senaryolar da ortaya çıkabilir. Ne yaparsanız yapın kullanıcıya bir hata oluştuğunda sinyal gönderir ve muhtemelen bir işlem yapmasını bir şeyler ters gittiğinde almanız gerekenleri öğrenin.

JavaScript'in kullanılabilirliği

JavaScript'in her zaman kullanılabilir olduğu varsayılmamalıdır. Bir geç yüklenen resimler için, resimleri şurada gösterecek <noscript> işaretlemesi sunabilirsiniz: JavaScript'in kullanılamadığı durumda. Olası en basit yedek örneği, JavaScript kapalıysa resim sunmak için <noscript> öğelerini kullanma:

JavaScript devre dışıysa kullanıcılar hem yer tutucu resmi hem de <noscript> öğelerinin bulunduğu resim. Bu sorunu gidermek için <html> etiketinde no-js sınıfı şu şekilde görünür:

<html class="no-js">

Ardından, tüm stil sayfalarından önce <head> içine bir satır içi komut dosyası satırı yerleştirin <html> etiketinden no-js sınıfını kaldıran <link> etiketleri üzerinden istenir öğesini eklemeniz gerekir:

<script>document.documentElement.classList.remove("no-js");</script>

Son olarak, JavaScript kullanılamıyor:

.no-js .lazy {
  display: none;
}

Bu, yer tutucu resimlerin yüklenmesini engellemez ancak gerekir. JavaScript'i devre dışı olan kullanıcılar yer tutucudan daha fazlasını alır yer tutuculardan daha iyidir. Ayrıca, Tümü'ne dokunun.