Çok fazla geç yüklemenin performans etkileri

Resimlerin geç yüklenmesi için Core Web Vitals'a göre veriye dayalı öneri.

Felix Arntz

Rick Viscomi

Geç yükleme, bir kaynağın indirilmesini gerekli olana kadar erteleyen bir tekniktir. Bu teknik, verileri korur ve kritik öğeler için ağ anlaşmazlığını azaltır. Bu uygulama 2019'da web standardı haline geldi ve bugün resimler için loading="lazy", önde gelen çoğu tarayıcı tarafından destekleniyor. Kulağa güzel geliyor ama çok fazla geç yükleme gibi bir şey de olabilir mi?

Bu yayında, yerel görüntü geç yüklemesinin benimsenme ve performans özelliklerini anlamak için herkese açık web şeffaflığı verilerini ve anlık A/B testlerini nasıl analiz ettiğimiz özetlenmektedir. Geç yüklemenin, gereksiz resim baytlarını azaltmak için inanılmaz etkili bir araç olabileceğini, ancak aşırı kullanımın performansı olumsuz etkileyebileceğini tespit ettik. Somut olarak yaptığımız analiz, resimlerin ilk görüntü alanına daha hevesle yüklenmesini, geri kalanını ise serbest bir şekilde yüklemenin iki dünyanın da en iyi özelliklerini sağlayabileceğini göstermektedir: Daha az bayt yüklüyor ve Core Web Vitals'ı geliştiriyor.

Evlat Edinme

HTTP Arşivi'ndeki en güncel verilere göre, web sitelerinin %17'si yerel resim geç yükleme özelliğini kullanıyor ve bu özelliğin benimsenme oranı hızla artıyor. Ekosistemde bu şekilde bir dayanak noktası, nispeten yeni bir API için oldukça dikkat çekicidir.

HTTP Arşivi projesinde ham verilerin sorgulanması, ne tür web sitelerinin benimsenme sağladığını daha net anlamamızı sağlar: Yerel görüntü geç yükleme özelliği kullanan sitelerin% 84'ü WordPress, %2'si başka bir İYS kullanır ve geri kalan% 14'ü bilinen bir İYS kullanmaz. Bu sonuçlar, WordPress'in benimsenmede nasıl öncülük ettiğini açıkça ortaya koyuyor.

Benimseme oranı da dikkate değer. Bir yıl önce Temmuz 2020'de, geç yükleme yöntemini kullanan WordPress sitelerinin yaklaşık 6 milyon (toplamın% 1'i) kitaplığı on binlerce web sitesinden oluşuyordu. Yalnızca WordPress'te geç yükleme kullanımı, o zamandan beri 1 milyondan fazla web sitesine (toplamın% 14'ü) yayılmış durumda.

İlişkisel performans

HTTP Arşivi'ni daha ayrıntılı inceleyerek, yerel resim geç yüklemesi olan ve olmayan sayfaların performansını Largest Contentful Paint (LCP) metriğiyle karşılaştırabiliriz. LCP verileri, laboratuvardaki sentetik testlerin aksine Chrome Kullanıcı Deneyimi Raporu'ndaki (CrUX) gerçek kullanıcı deneyimlerinden elde edilir. Aşağıdaki grafikte, her sayfanın 75. yüzdelik dilim LCP'sinin dağılımlarını görselleştirmek için kutu ve bıyık grafiği kullanılmaktadır: Çizgiler 10. ve 90. yüzdelik dilimleri, kutular ise 25. ve 75. yüzdelik dilimleri temsil etmektedir.

Geç yüklenmeyen ortanca sayfanın LCP değeri 2.922 ms'dir. 75. yüzdelik dilimdeki LCP değeri ise geç yüklenen ortalama sayfa için 3.546 ms'dir. Genel olarak, geç yükleme kullanan web sitelerinin LCP performansı daha düşük olma eğilimindedir.

Bunların ilişkisel sonuçlar olduğunu ve performansın yavaş olmasının nedeni olarak geç yüklemeye işaret etmezler. Varsayımsal olarak, WordPress sitelerinin biraz daha yavaş olma eğilimi varsa ve bu sitelerin geç yükleme kohortunu oluşturduğu düşünülürse bu fark açıklanabilir. Sadece WordPress sitelerine bakarak bu değişkenliği ortadan kaldırmaya çalışalım.

Ne yazık ki WordPress sayfalarını ayrıntılı olarak incelediğimizde aynı kalıp ortaya çıkar. Geç yükleme kullananların LCP performansı genellikle daha yavaş olur. Geç yükleme içermeyen WordPress sayfasının ortanca değerindeki LCP değeri 3.495 ms'dir. Geç yüklenen ortalama sayfa değeri 3.768 ms'dir.

Bu durum, geç yüklemenin sayfaların yavaşlamasına neden olduğunu yine de kanıtlamaz ancak bu yöntemin kullanılması, performansın daha yavaş olmasıyla aynı zamana denk gelir. Nedensellik sorusunu cevaplamaya çalışmak için laboratuvar tabanlı bir A/B testi oluşturduk.

Nedensel performans

A/B testinin hedefi, WordPress çekirdeğinde uygulandığı gibi yerel resim geç yüklemenin daha yavaş LCP performansı ve daha az resim baytı ile sonuçlandığı hipotezini kanıtlamak veya çürütmekti. Kullandığımız metodoloji, twentytwentyone temasına sahip bir demo WordPress web sitesini test etmekti. Hem arşiv hem de tek sayfa türlerini (ana sayfa ve makale sayfaları gibi) masaüstünde ve emüle edilmiş mobil cihazlarda WebPageTest'i kullanarak test ettik. Geç yüklemenin etkin olduğu ve olmadığı her bir sayfa kombinasyonunu test ettik ve ortanca LCP değeri ile resim baytı sayısını öğrenmek için her bir testi dokuz kez gerçekleştirdik.

Yukarıdaki sonuçlar, arşivdeki testler için milisaniye cinsinden ortanca LCP değerini ve masaüstü ile mobil cihazlar için tek sayfalık olanı karşılaştırır. Arşiv sayfalarında geç yüklemeyi devre dışı bıraktığımızda LCP'nin önemli bir marjda iyileşme sağladığını gözlemledik. Ancak, tek sayfalarda bu fark daha nötr düzeydeydi.

Geç yüklemeyi devre dışı bırakmanın etkisinin aslında tek sayfaları biraz daha hızlı hale getirdiğini belirtmekte fayda var. Bununla birlikte, LCP'deki fark hem masaüstü hem de mobil testler için bir standart sapmadan azdır. Bu nedenle, bunu varyansla ilişkilendirir ve genel olarak değişimi nötr kabul ederiz. Karşılaştırıldığında, arşiv sayfaları için fark iki veya üç standart sapmaya benzer.

Yukarıdaki sonuçlar, her bir 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 son derece olumlu bir etkisi vardır. Gerçek bir kullanıcı tüm sayfayı aşağı kaydırırsa görüntü alanına geçerken tüm resimler yine de yüklenir, ancak bu sonuçlar ilk sayfa yüklemesinde sağlanan performansın iyileşmesini gösterir.

A/B testinin sonuçlarını özetlersek, WordPress tarafından kullanılan geç yükleme tekniği açıkça görüntü baytlarının azaltılmasına yardımcı olur, ancak bunu yaparken LCP gecikmesine neden olur.

Düzeltme testi

Düzeltmenin nasıl uygulandığına geçmeden önce, geç yüklemenin WordPress'te bugün nasıl çalıştığına göz atalım. Mevcut uygulamanın en önemli yönü, resimleri ekranın üst kısmına (görüntü alanı içinde) geç yüklemesidir. CMS blog yayını, bundan kaçınılması gereken bir kalıp olarak bunu onaylamakta, ancak o zamanki deneysel veriler LCP üzerindeki etkinin çok az olduğunu ve WordPress çekirdeğindeki uygulamayı basitleştirmeye değer olduğunu göstermiştir.

Bu yeni verileri göz önünde bulundurarak, ekranın üst kısmındaki resimlerin geç yüklenmesini önleyen deneysel bir düzeltme oluşturduk ve bunu ilk A/B testiyle aynı koşullar altında test ettik.

Bu sonuçlar çok daha umut verici. Yalnızca ekranın alt kısmındaki resimleri geç yüklemek, LCP regresyonunun tamamen geri alınmasına ve hatta LCP'nin tamamen devre dışı bırakılmasına kıyasla ufak bir iyileştirmeye neden olabilir. Hiç tembel yükleme olmamasındansa bu nasıl daha hızlı olabilir? Bu durumun bir açıklaması, ekranın alt kısmındaki resimler yüklenmediğinde LCP görüntüsü ile daha az ağ çakışmasının yaşanması ve bunun daha hızlı yüklenmesini sağlar.

Resim baytları açısından, düzeltmede varsayılan davranışla karşılaştırıldığında hiçbir değişiklik yoktur. Bu mükemmel çünkü mevcut yaklaşımın güçlü yanlarından biri 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 görüntülerin başlangıçta bu görüntü alanına yüklenip yüklenmeyeceğini bilmediği anlamına gelir. Dolayısıyla düzeltme, resimlerin görüntü alanında olup olmayacağını tahmin etmek için işaretlemedeki resimlerin göreli konumuyla ilgili buluşsal yöntemler kullanır. Özellikle, resim sayfadaki ilk öne çıkan resim veya ana içerikteki ilk resimse ekranın üst kısmında (veya ona yakın) olduğu varsayılır ve geç yüklenmez. Başlıktaki kelime sayısı veya ana içeriğin başlarındaki paragraf metninin miktarı gibi sayfa düzeyindeki koşullar, resmin görüntü alanında olup olmadığını etkileyebilir. Bulguların doğruluğunu etkileyebilecek kullanıcı düzeyinde koşullar da vardır. Bu durum, özellikle sayfanın kaydırma konumunu değiştiren görüntü alanı boyutu ve sabit bağlantıların kullanımını etkileyebilir. Bu nedenlerle, düzeltmenin yalnızca genel durumda iyi performans sağlayacak şekilde kalibre edildiğini ve bu sonuçları tüm gerçek senaryolara uygulanabilir hale getirmek için ince ayarlar yapılması gerekebileceğini kabul etmek önemlidir.

Kullanıma sunma

Artık resimleri geç yüklemenin daha iyi bir yolunu, tüm resim tasarruflarını ve daha hızlı LCP performansını tespit ettiğimize göre, sitelerin bunu kullanmaya başlamasını nasıl sağlayabiliriz? En öncelikli değişiklik, deneysel düzeltmeyi uygulamak için WordPress çekirdeğine bir yama göndermektir. Ayrıca, ekranın üst kısmındaki geç yüklemenin olumsuz etkilerini ve İYS'lerin bunu önlemek için buluşsal yöntemleri nasıl kullanabileceğini netleştirmek amacıyla CMS'ler için tarayıcı düzeyinde geç yükleme blog yayınındaki kılavuzu da güncelleyeceğiz.

Bu en iyi uygulamalar tüm web geliştiricileri için geçerli olduğundan Lighthouse gibi araçlarda geç yüklenen antikalıpları işaretlemek iyi olabilir. Denetimdeki ilerleme durumunu takip etmek isterseniz GitHub'daki özellik isteği bölümüne bakın. O zamana kadar, geliştiricilerin geç yüklenen LCP öğelerinin örneklerini bulmak için yapabilecekleri ş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 ayrıca, geç yükleme tekniğinin keskin bir yönünü ve platform düzeyinde API iyileştirmeleri potansiyelini de vurgular. Örneğin, Chromium'da, loading özelliğine rağmen düzeltmeye benzer şekilde ilk birkaç resmi yerel olarak yerel olarak deneme yapmak için açık bir sorun vardır.

Özet

Siteniz yerel görüntü geç yüklemesi kullanıyorsa bunun nasıl uygulandığını kontrol edin ve performans maliyetlerini daha iyi anlamak için A/B testleri yapın. Ekranın üst kısmına resimler daha hevesli bir şekilde yüklendiğinden bu çözüm işe yarayabilir. Bir WordPress siteniz varsa yakında WordPress'in çekirdeğinde bir yama açılışının olacağını umuyoruz. Başka bir İYS kullanıyorsanız da burada açıklanan olası performans sorunlarının bildiklerinden emin olun.

Nispeten yeni web platformu API'lerini denemek hem riskleri hem de ödülleri içerebilir. Bunun bir nedeni vardır. Yerel resim geç yüklemenin ne kadar zahmetli olduğunu anlamaya başlamaya başlamış olsak da daha iyi performans elde etmek için bu yöntemi kullanmanın olumlu yanlarını da görüyoruz.

Fotoğraf: Frankie Lopez'in Unsplash'teki