Çok fazla gecikmeli yüklemenin performans üzerindeki etkileri

Önemli Web Verileri'ni göz önünde bulundurarak resimleri geç yüklemeye yönelik veriye dayalı öneriler.

Felix Arntz

Rick Viscomi

Geç yükleme, verileri korumak ve kritik öğeler için ağ çekişmesini azaltmak amacıyla bir kaynağın indirilmesini ihtiyaç duyulana kadar erteleyen bir tekniktir. 2019'da web standardı haline geldi ve günümüzde resimler için loading="lazy", çoğu büyük tarayıcı tarafından destekleniyor.

Bu kılavuzda, tarayıcı düzeyinde resim geç yüklemenin benimsenme ve performans özelliklerini anlamak için herkese açık web şeffaflığı verilerinin ve geçici A/B testlerinin nasıl analiz edildiği özetlenmektedir. Bulgular arasında, geç yüklemenin gereksiz resim baytlarını azaltmak için son derece etkili bir araç olabileceği ancak aşırı kullanımın performansı olumsuz etkileyebileceği yer alıyordu. Bu analiz, ilk görüntü alanındaki resimleri daha istekli bir şekilde yüklemenin ve geri kalanını serbestçe geç yüklemenin bize her iki dünyanın da en iyisini sunabileceğini gösteriyor: daha az bayt yüklenmesi ve daha iyi Core Web Vitals.

Evlat Edinme

HTTP Arşivi'ndeki en son verilere göre, yerleşik resim geç yükleme özelliği web sitelerinin %29'u tarafından kullanılıyor ve bu özellik hızla yaygınlaşıyor.

HTTP Arşivi projesindeki ham verileri sorgulamak, ne tür web sitelerinin benimsemeyi artırdığını daha net anlamamızı sağlar: Tarayıcı düzeyinde resim geç yükleme kullanan sitelerin% 84'ü WordPress, %2'si başka bir içerik yönetim sistemi kullanır ve kalan% 14'ü bilinen bir içerik yönetim sistemi kullanmaz. Bu sonuçlar, WordPress'in benimsenme konusunda nasıl öncülük ettiğini açıkça göstermektedir.

Benimsenme oranı da dikkate değerdir. Bir yıl önce, Temmuz 2020'de, geç yükleme kullanan WordPress siteleri, yaklaşık 6 milyonluk külliyatta on binlerce web sitesini (toplamın% 1'i) oluşturuyordu. Yalnızca WordPress'te geç yükleme kullanımı o zamandan beri 1 milyondan fazla web sitesine (toplamın% 14'ü) ulaştı.

Korelasyonel performans

HTTP Arşivi'ni daha ayrıntılı incelediğimizde, tarayıcı düzeyinde resim geç yükleme özelliğinin kullanıldığı ve kullanılmadığı sayfaların performansını Largest Contentful Paint (LCP) metriği ile karşılaştırabiliriz. LCP verileri, laboratuvardaki sentetik testlerin aksine Chrome Kullanıcı Deneyimi Raporu'ndaki (CrUX) gerçek kullanıcı deneyimlerinden alınır. Aşağıdaki grafikte, her sayfanın 75. yüzdelik dilim LCP'sinin dağılımlarını görselleştirmek için kutu grafiği kullanılmıştır: Çizgiler 10. ve 90. yüzdelik dilimleri, kutular ise 25. ve 75. yüzdelik dilimleri temsil eder.

Geç yükleme kullanılmayan ortanca değer sayfanın 75. yüzdelik dilimdeki LCP'si 2.922 milisaniyeyken geç yükleme kullanılan ortanca değer sayfanın LCP'si 3.546 milisaniyedir. Genel olarak, geç yükleme kullanan web sitelerinin LCP performansı daha düşüktür.

Bunların bağıntısal sonuçlar olduğunu ve daha yavaş performansın nedeni olarak geç yüklemeyi göstermediğini belirtmek önemlidir. WordPress sitelerinin biraz daha yavaş olma eğiliminde olduğu ve geç yükleme grubunun büyük bir kısmını oluşturduğu varsayılırsa bu durum farkı açıklayabilir. Bu değişkenliği ortadan kaldırmak için odak noktasını özellikle WordPress siteleriyle daraltabilirsiniz.

Maalesef WordPress sayfaları incelendiğinde de aynı durum görülüyor. Geç yükleme kullanan sayfaların LCP performansı daha düşük oluyor. Geç yükleme kullanılmayan ortalama WordPress sayfasının 75. yüzdelik dilimdeki LCP'si 3.495 milisaniyeyken geç yükleme kullanılan ortalama sayfanın LCP'si 3.768 milisaniyedir.

Bu, geç yüklemenin sayfaların yavaşlamasına neden olduğunu kanıtlamaz ancak geç yükleme kullanıldığında performansın daha yavaş olduğu görülür. Nedensellik sorusunu yanıtlamak için laboratuvar tabanlı bir A/B testi oluşturuldu.

Nedensel performans

A/B testinin amacı, WordPress çekirdeğinde uygulandığı şekliyle yerleşik resim geç yüklemenin daha yavaş LCP performansına ve daha az resim baytına neden olduğu hipotezini kanıtlamak veya çürütmekti. Kullanılan metodoloji, twentytwentyone temasına sahip bir demo WordPress web sitesini test etmekti. WebPageTest kullanılarak masaüstü ve emülasyonlu mobil cihazlarda ana sayfa ve makale sayfalarına benzeyen hem arşiv hem de tek sayfa türleri test edildi. Geç yüklemenin etkin olduğu ve olmadığı her sayfa kombinasyonu test edildi ve her test, ortanca değer LCP değerini ve resim bayt sayısını elde etmek için dokuz kez çalıştırıldı.

Bu sonuçlar, masaüstü ve mobil cihazlar için arşiv ve tek sayfalardaki testlerin milisaniye cinsinden ortanca LCP'sini karşılaştırır. Arşiv sayfalarında geç yükleme devre dışı bırakıldığında LCP önemli ölçüde iyileşti. Ancak tek sayfalarda bu fark daha azdı.

Geç yüklemeyi devre dışı bırakmak, tek sayfaları biraz daha hızlı hale getiriyor. Ancak LCP'deki fark, hem masaüstü hem de mobil testler için bir standart sapmadan azdır. Bu nedenle, bu durum varyansa bağlanabilir ve değişikliğin genel olarak nötr olduğu kabul edilebilir. Karşılaştırma yapıldığında, arşiv sayfaları için fark iki ila üç standart sapmaya daha yakındır.

Bu sonuçlar, her test için ortanca resim baytı sayısını (KB cinsinden) karşılaştırır. Beklendiği gibi, geç yüklemenin resim bayt sayısını azaltma üzerinde çok net bir olumlu etkisi vardır. Gerçek bir kullanıcı sayfanın tamamını kaydırırsa tüm resimler görüntü alanına girdikçe yüklenir ancak bu sonuçlar, ilk sayfa yüklemesinin iyileştirilmiş performansını gösterir.

A/B testinin sonuçlarını özetlemek gerekirse WordPress tarafından kullanılan geç yükleme tekniği, LCP'nin gecikmesi pahasına resim baytlarını azaltmaya çok net bir şekilde yardımcı olur.

Düzeltmeyi test etme

WordPress'in bu deneme için mevcut geç yükleme uygulamasının en önemli yönü, görüntü alanındaki (ekranın üst kısmındaki) resimleri geç yüklemesidir. CMS blog yayını, bunun kaçınılması gereken bir kalıp olduğunu kabul ediyor. Ancak o dönemdeki deneysel veriler, LCP üzerindeki etkinin minimum düzeyde olduğunu ve WordPress çekirdeğindeki uygulamayı basitleştirmeye değdiğini gösteriyordu.

Bu yeni veriler ışığında, ekranın üst kısmındaki resimlerin geç yüklenmesini önleyen deneysel bir düzeltme oluşturuldu ve düzeltme, ilk A/B testiyle aynı koşullar altında test edildi.

Bu sonuçlar çok daha umut verici. Yalnızca ekranın alt kısmındaki resimlerin geç yüklenmesi, LCP gerilemesinin tamamen tersine dönmesine ve hatta geç yüklemeyi tamamen devre dışı bırakmaya kıyasla hafif bir iyileşmeye neden olur. Hiç geç yükleme yapmamaktan nasıl daha hızlı olabilir? Bunun bir açıklaması, ekranın alt kısmındaki resimlerin yüklenmemesiyle LCP resmiyle daha az ağ çakışması olması ve bu sayede daha hızlı yüklenmesidir.

Resim baytları açısından düzeltme, varsayılan davranışa kıyasla kesinlikle hiçbir değişiklik yapmaz. Bu harika bir şey çünkü mevcut yaklaşımın güçlü yönlerinden biri de buydu.

Bu düzeltmeyle ilgili bazı uyarılar vardır. WordPress, sunucu tarafında hangi resimlerin geç yükleneceğini belirler. Bu, kullanıcının görüntü alanı boyutu veya resimlerin başlangıçta bu alanda yüklenip yüklenmediği hakkında hiçbir şey bilmediği anlamına gelir. Bu nedenle düzeltme, resimlerin işaretlemedeki göreli konumuyla ilgili sezgisel yöntemleri kullanarak resimlerin görüntü alanına yüklenip yüklenmediğini tahmin eder. Özellikle, resim sayfadaki ilk öne çıkan resim veya ana içerikteki ilk resimse ekranın üst kısmında veya buna yakın olduğu varsayılır ve geç yüklenmez.

Başlıktaki kelime sayısı veya ana içeriğin başındaki paragraf metni miktarı gibi sayfa düzeyindeki koşullar, resmin görüntü alanında olup olmadığını etkileyebilir. Sezgisel analizlerin doğruluğunu etkileyebilecek kullanıcı düzeyinde koşullar da vardır. Özellikle görüntü alanı boyutu ve sayfanın kaydırma konumunu değiştiren yer işareti bağlantılarının kullanımı bu koşullar arasındadır.

Bu nedenle, düzeltmenin yalnızca genel durumda iyi performans sağlayacak şekilde kalibre edildiğini ve bu sonuçların tüm gerçek dünya senaryolarına uygulanabilir olması için ince ayar yapılması gerekebileceğini kabul etmek önemlidir.

Uygulama

Resimleri geç yüklemenin daha iyi bir yolu belirlendiğine göre, siteler tüm resim tasarruflarından ve daha hızlı LCP performansından nasıl yararlanmaya başlayabilir? En yüksek öncelikli değişiklik, deneysel düzeltmeyi uygulamak için WordPress çekirdeğine bir yama göndermektir. İçerik yönetim sistemleri için tarayıcı düzeyinde geç yükleme blog yayınındaki kılavuz da ekranın üst kısmında geç yüklemenin olumsuz etkilerini ve içerik yönetim sistemlerinin bundan kaçınmak için buluşsal yöntemleri nasıl kullanabileceğini açıklayacak şekilde güncellenecek.

Bu en iyi uygulamalar tüm web geliştiricileri için geçerli olduğundan, Lighthouse gibi araçlarda geç yükleme karşıtı kalıpları işaretlemek de faydalı olabilir. Bu denetimle ilgili gelişmeleri takip etmek istiyorsanız GitHub'daki özellik isteğine bakın. O zamana kadar, geliştiricilerin LCP öğelerinin geç yüklenen örneklerini bulmak için yapabilecekleri bir şey, alan verilerine daha ayrıntılı günlük kaydı eklemektir.

new PerformanceObserver((list) => {
  const latestEntry = list.getEntries().at(-1);

  if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
    console.warn('Warning: LCP element was lazy loaded', latestEntry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

Yukarıdaki JavaScript snippet'i, en son LCP öğesini değerlendirir ve geç yüklenmişse bir uyarı kaydeder.

Bu durum, geç yükleme tekniğinin dezavantajını ve platform düzeyinde API iyileştirmeleri potansiyelini de vurgular. Örneğin, Chromium'da, loading özelliğine rağmen ilk birkaç resmi düzeltmeye benzer şekilde istekli olarak yerel olarak yüklemeyi denemek için açık bir sorun vardır.

Sonuç

Siteniz tarayıcı düzeyinde resim geç yükleme kullanıyorsa nasıl uygulandığını kontrol edin ve performans maliyetlerini daha iyi anlamak için A/B testleri yapın. Ekranın üst kısmındaki resimlerin daha hızlı yüklenmesi faydalı olabilir. WordPress siteniz varsa yakında WordPress çekirdeğine bir yama eklenecektir. Başka bir İYS kullanıyorsanız burada açıklanan olası performans sorunlarından haberdar olduklarından emin olun.

Nispeten yeni web platformu API'lerini denemek hem riskli hem de faydalı olabilir. Bu nedenle, bu özelliklere "en yeni özellikler" denir. Tarayıcı düzeyinde resimlerin geç yüklenmesinin zorluklarını anlamaya başlarken, daha iyi performans elde etmek için bu özelliği nasıl kullanacağımızın avantajlarını da görüyoruz.