Geç yüklemeyle ilgili en iyi uygulamalar

Jeremy Wagner

Rachel Andrew

Resim ve videoların geç yüklenmesi, performansla ilgili olumlu ve ölçülebilir yararlar sağlasa da bu, hafife alınmayacak bir görev değildir. Yanlış yaparsanız istenmeyen sonuçlar oluşabilir. Bu nedenle, aşağıdaki endişeleri göz önünde bulundurmak önemlidir.

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

Sayfadaki her bir medya kaynağını JavaScript ile geç yükleme seçeneği gelebilir, ancak bu isteği yerine getirmeniz gerekir. Ekranın üst kısmında kalan hiçbir şey geç yüklenmemelidir. Bu tür kaynaklar, kritik varlıklar olarak kabul edilmeli ve bu nedenle normal şekilde yüklenmelidir.

Geç yükleme, DOM etkileşimli hale gelene kadar kaynakların yüklenmesini geciktirir ve komut dosyalarının yüklenmesini tamamlayıp yürütmeye başlar. Ekranın alt kısmındaki resimler için bu durum bir sorun teşkil etmez ancak ekranın üst kısmındaki önemli kaynaklar, mümkün olan en kısa sürede gösterilmeleri için standart <img> öğesiyle yüklenmelidir.

Elbette, günümüzde web sitelerinin farklı boyutlardaki çok fazla sayıda ekranda görüntülendiği günümüzde hangi alanın ne kadar durduğu çok net değil. Dizüstü bilgisayarda ekranın üst kısmındaki öğeler, mobil cihazlarda da altında yer alabilir. Bu konuyu her durumda en iyi şekilde ele almak için etkili bir öneri yoktur. Sayfanızın önemli öğelerinin bir envanterini oluşturmanız ve bu resimleri tipik bir şekilde yüklemeniz gerekir.

Ayrıca, geç yüklemeyi tetikleme eşiği olarak katlama çizgisi konusunda çok katı olmak istemeyebilirsiniz. Görüntülerin kullanıcı tarafından görüntü alanına kaydırılmadan çok önce yüklenmeye başlaması için ekranın alt kısmında bir arabellek bölgesi oluşturmak amaçlarınız açısından daha ideal olabilir. Örneğin, Intersection Observer API'si yeni bir IntersectionObserver örneği oluşturduğunuzda seçenekler nesnesinde rootMargin özelliği belirtmenize olanak tanır. Bu, öğelere etkili bir şekilde bir tampon verir. Bu da, öğe görüntü alanına girmeden önce geç yükleme davranışını tetikler.

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

rootMargin değeri bir CSS margin mülkü için belirteceğiniz değerlere benziyorsa bunun nedeni budur. Bu durumda, gözlemlenen öğenin alt kenar boşluğu (varsayılan olarak tarayıcı görüntü alanı; ancak bu, root özelliği kullanılarak belirli bir öğeyle değiştirilebilir) 256 piksel genişletilir. Bu, geri çağırma işlevinin bir resim öğesi görüntü alanının 256 piksel içinde olduğunda yürütüleceği ve kullanıcı gerçekten görmeden resmin yüklenmeye başlayacağı anlamına gelir.

Aynı etkiyi Intersection Observe'i desteklemeyen tarayıcılarda da elde etmek için kaydırma etkinliği işleme kodunu kullanın ve getBoundingClientRect onayınızı arabellek içerecek şekilde ayarlayın.

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 sistem kaynaklarını tüketerek jant'a yol açan pahalı DOM düzeni işlemlerini tetikleyebilir. En azından, hedef resimle aynı boyutları taşıyan düz renk yer tutucusu veya yüklenmeden önce medya öğesinin içeriğine dair ipucu veren LQIP ya da SQIP gibi teknikler kullanabilirsiniz.

<img> etiketlerinde, src bu özellik nihai resim URL'si ile güncellenene kadar başlangıçta bir yer tutucuya işaret etmelidir. Yer tutucu resme işaret etmek için bir <video> öğesinde poster özelliğini kullanın. Buna ek olarak, hem <img> hem de <video> etiketlerinde width ve height özelliklerini kullanın. Bu, yer tutuculardan nihai resimlere geçişin, medya yüklenirken öğenin oluşturulan boyutunu değiştirmemesini sağlar.

Resim kodu çözme gecikmeleri

JavaScript'te büyük resimlerin yüklenip DOM'ye bırakılması, ana iş parçacığını bağlayabilir. Bu da kod çözme işlemi sırasında kullanıcı arayüzünün kısa bir süre için yanıt vermemesine neden olabilir. DOM'ye eklemeden önce decode yöntemini kullanarak görüntülerin kodunu eşzamansız olarak çözme bu tür olumsuz durumları azaltabilir. Ancak dikkatli olun: Henüz her yerde kullanıma sunulmamıştır ve geç yükleme mantığını daha karmaşık hale getirir. Kullanmak istiyorsanız bunu kontrol etmeniz gerekir. Aşağıda, Image.decode() ürününü bir yedek ile nasıl kullanabileceğiniz gösterilmektedir:

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);
}

Bu örneğe benzer bir kodu uygulamalı olarak görmek için bu CodePen bağlantısına göz atın. Resimlerinizin çoğu oldukça küçükse bu sizin için pek bir şey ifade etmeyebilir, ancak büyük resimlerin geç yüklenmesi ve DOM'ye eklenmesi sırasında olumsuzlukları azaltmaya kesinlikle yardımcı olabilir.

Öğeler yüklenmediğinde

Bazen medya kaynakları bir nedenden dolayı yüklenemez ve hatalar ortaya çıkar. Bu ne zaman olabilir? Bu duruma göre değişir, ancak varsayıma dayalı bir senaryonuz şudur: HTML önbelleğe alma politikanız kısa bir süreliğine (ör. beş dakika) geçerli olur ve kullanıcı siteyi ziyaret eder veya eski bir sekmeyi uzun süre açık bırakırsa (ör. birkaç saat) ve geri dönü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 bir görüntü kaynağının adı, karma tabanlı sürüm oluşturma nedeniyle değişir veya tamamen kaldırılır. Kullanıcı görüntüyü geç yüklediğinde kaynak kullanılamaz ve bu nedenle başarısız olur.

Bunlar nispeten nadir meydana gelse de geç yükleme başarısız olursa bir yedek planınız olması faydalı olabilir. Resimler için bu tür bir çözüm şuna benzer şekilde görünebilir:

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, resim yer tutucu alanını kullanıcının resmi tekrar yüklemeyi denemesine olanak tanıyan bir düğmeyle değiştirebilir veya resim yer tutucu alanında bir hata mesajı görüntüleyebilirsiniz.

Başka senaryolar da ortaya çıkabilir. Ne yaparsanız yapın, bir hata oluştuğunda kullanıcıya bilgi vermek ve bir şeyler ters gittiğinde muhtemelen o kişiye yapılacak işlemi açıklamak hiç de kötü bir fikir değildir.

JavaScript'in kullanılabilirliği

JavaScript'in her zaman kullanılabilir olduğu varsayılmamalıdır. Resimleri geç yükleyecekseniz JavaScript'in kullanılamadığı durumlarda resimleri gösteren <noscript> işaretlemesi sunabilirsiniz. Olası en basit yedek örnek, JavaScript kapalıysa resimleri sunmak için <noscript> öğelerinin kullanılmasını içerir:

JavaScript devre dışıysa kullanıcılar yer tutucu resmi ve <noscript> öğelerinin içerdiği resmi de görür. Bu sorunu aşmak için <html> etiketine şu şekilde bir no-js sınıfı yerleştirin:

<html class="no-js">

Ardından, <link> etiketleri aracılığıyla herhangi bir stil sayfası istenmeden önce, JavaScript açıksa no-js sınıfını <html> öğesinden kaldıran bir satır içi komut dosyası satırı <head> içine yerleştirin:

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

Son olarak, JavaScript kullanılamadığında gecikmeli bir sınıfa sahip öğeleri gizlemek için bazı CSS'ler kullanın:

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

Bu, yer tutucu resimlerin yüklenmesini engellemez ancak daha çok tercih edilen bir sonuçtur. JavaScript'i devre dışı olan kullanıcılar, yer tutucu resimlerden daha fazlasını alırlar. Bu, yer tutuculardan daha iyidir ve hiçbir anlamlı resim içeriği barındırmaz.