Tembel yükleme, bir kaynağın indirilmesini ihtiyaç duyulana kadar ertelemek için kullanılan bir tekniktir; bu, verileri korur ve kritik varlıklar için ağ çekişmesini azaltır. 2019 yılında bir web standardı haline geldi ve bugün loading="lazy" resimler için desteklenen çoğu büyük tarayıcı tarafından. Kulağa harika geliyor, ama çok fazla yavaş yükleme diye bir şey var mı?
Bu gönderi, yerel görüntü yavaş yüklemesinin benimsenmesini ve performans özelliklerini anlamak için halka açık web şeffaflık verilerini ve ad hoc A/B testini nasıl analiz ettiğimizi özetlemektedir. Bulduğumuz şey, geç yüklemenin gereksiz görüntü baytlarını azaltmak için inanılmaz derecede etkili bir araç olabileceği, ancak aşırı kullanımın performansı olumsuz etkileyebileceğidir. Somut olarak, analizimiz, görüntüleri ilk görünüm alanına daha hevesli bir şekilde yüklerken geri kalanını cömertçe tembel bir şekilde yüklerken bize her iki dünyanın da en iyisini verebileceğini gösteriyor: daha az bayt yüklendi ve geliştirilmiş Önemli Web Verileri.
Benimseme #
daki en son verilere göre HTTP Arşiviyerel görüntü yavaş yükleme tarafından kullanılır %17 web sitelerinin sayısı ve benimsenmesi hızla artıyor. Ekosistemdeki bu kadar yer, nispeten yeni bir API için dikkat çekicidir.
sorgulama HTTP Arşivi projesindeki ham veriler, ne tür web sitelerinin benimsemeyi hızlandırdığına dair daha net bir anlayış sağlıyor: yerel görüntü yavaş yükleme kullanan sitelerin %84’ü WordPress kullanıyor, %2’si başka bir CMS kullanıyor ve geri kalan %14’ü kullanmıyor bilinen bir CMS. Bu sonuçlar, nasıl WordPress ücrete öncülük ediyor evlat edinmede.
bu benimseme oranı da belirtmekte fayda var. Bir yıl önce Temmuz 2020’de, yavaş yükleme kullanan WordPress siteleri, yaklaşık 6 milyonluk (toplamın %1’i) korpusta on binlerce web sitesinden oluşuyordu. Yalnızca WordPress’te yavaş yükleme benimsenmesi, o zamandan beri 1 milyondan fazla web sitesine ulaştı (toplamın %14’ü).
korelasyonel performans #
Daha derin kazmak HTTP Arşivinde, yerel görüntü yavaş yüklemesi olan ve olmayan sayfaların En Büyük İçerikli Boyama (LCP) metriğiyle nasıl performans gösterdiğini karşılaştırabiliriz. LCP verileri, gerçek kullanıcı deneyimlerinden gelir. Chrome Kullanıcı Deneyimi Raporu (CrUX) laboratuvarda sentetik testin aksine. Aşağıdaki tablo, her bir sayfanın 75. yüzdelik LCP dağılımını görselleştirmek için bir kutu ve bıyık grafiği kullanır: çizgiler 10. ve 90. yüzdelikleri ve kutular 25. ve 75. yüzdelikleri temsil eder.
Yavaş yüklenen medyan sayfa için 3.546 ms olan geç yükleme ile karşılaştırıldığında, ortalama sayfanın 2.922 ms’lik 75. yüzdelik LCP’si vardır. Genel olarak, geç yükleme kullanan web siteleri daha kötü LCP performansına sahip olma eğilimindedir.
Bunların olduğunu belirtmek önemlidir. korelasyonel sonuçlar ve zorunlu olarak tembel yüklemeye işaret etmezler. neden daha yavaş performans. Varsayımsal olarak, WordPress siteleri biraz daha yavaş olma eğilimindeyse ve tembel yükleme kohortunu ne kadar oluşturdukları göz önüne alındığında, bu farkı açıklayabilir. Öyleyse, yalnızca WordPress sitelerine bakarak bu değişkenliği ortadan kaldırmaya çalışalım.
Ne yazık ki, WordPress sayfalarını derinlemesine incelediğimizde aynı model ortaya çıkıyor; yavaş yükleme kullananlar daha yavaş LCP performansına sahip olma eğilimindedir. Geç yükleme olmayan medyan WordPress sayfası, geç yükleme olan medyan sayfa için 3.768 ms ile karşılaştırıldığında, 3.495 ms’lik 75. yüzdelik bir LCP’ye sahiptir.
Bu yine de tembel yükleme olduğunu kanıtlamaz nedenler sayfalar yavaşlar, ancak bunu kullanmak daha yavaş performansa sahip olmakla çakışır. Nedensellik sorusunu yanıtlamaya çalışmak için laboratuvar tabanlı bir A/B testi oluşturduk.
nedensel performans #
A/B testinin amacı, yerel görüntünün WordPress çekirdeğinde uygulandığı şekliyle yavaş yüklenmesinin daha yavaş LCP performansı ve daha az görüntü baytı ile sonuçlandığı hipotezini kanıtlamak veya çürütmekti. Kullandığımız metodoloji, bir demo WordPress web sitesini aşağıdakilerle test etmekti: yirmi yirmi bir tema. Ana sayfa ve makale sayfaları gibi hem arşiv hem de tek sayfa türlerini masaüstü ve öykünülmüş mobil cihazlarda test ettik. Web Sayfası Testi. Yavaş yükleme etkin olan ve olmayan her bir sayfa kombinasyonunu test ettik ve ortalama LCP değerini ve görüntü bayt sayısını elde etmek için her testi dokuz kez çalıştırdık.
Yukarıdaki sonuçlar, masaüstü ve mobil için arşiv ve tek sayfa testleri için medyan LCP’yi milisaniye cinsinden karşılaştırır. Arşiv sayfalarında geç yüklemeyi devre dışı bıraktığımızda, LCP’nin önemli ölçüde arttığını gözlemledik. Ancak tek sayfalarda fark daha nötrdü.
Yavaş 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 daha azdır, bu nedenle bunu varyansa bağlarız ve genel olarak değişikliği nötr kabul ederiz. Karşılaştırıldığında, arşiv sayfaları arasındaki fark iki ila üç standart sapma kadardır.
Yukarıdaki sonuçlar, her test için medyan görüntü bayt sayısını (KB cinsinden) karşılaştırır. Beklendiği gibi, yavaş yükleme, görüntü bayt sayısını azaltmada çok net bir pozitif etkiye sahiptir. Gerçek bir kullanıcı tüm sayfayı aşağı kaydırırsa, tüm resimler yine de görüntü alanına geçtiklerinde yüklenir, ancak bu sonuçlar ilk sayfa yükleme performansının iyileştiğini gösterir.
A/B testinin sonuçlarını özetlemek gerekirse, WordPress tarafından kullanılan yavaş yükleme tekniği, görüntü baytlarının azaltılmasına çok açık bir şekilde yardımcı olur, ancak gecikmeli bir LCP pahasına.
Bir düzeltmeyi test etme #
Düzeltmenin nasıl uygulandığına geçmeden önce, bugün WordPress’te yavaş yüklemenin nasıl çalıştığına bakalım. Mevcut uygulamanın en önemli yönü, görüntüleri ekranın üst kısmına (görüntü alanı içinde) tembel olarak yüklemesidir. CMS blog yazısı, bunun kaçınılması gereken bir model olduğunu kabul ediyor, ancak o zamanki deneysel veriler, LCP üzerindeki etkinin minimum olduğunu ve WordPress çekirdeğindeki uygulamayı basitleştirmeye değer olduğunu gösterdi.
Bu yeni veriler ışığında, 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 görüntülerin tembel yüklenmesi, LCP gerilemesinin tamamen tersine çevrilmesine ve hatta muhtemelen hafif bir düşüşe neden olur. gelişim LCP’yi tamamen devre dışı bırakmak. Hiç tembel yükleme yapmamaktan nasıl daha hızlı olabilir? Bunun bir açıklaması, ekranın alt kısmındaki görüntülerin yüklenmemesiyle, LCP görüntüsüyle daha az ağ çekişmesi olması ve bunun da daha hızlı yüklenmesini sağlamasıdır.
Görüntü baytları açısından, düzeltmenin varsayılan davranışa kıyasla kesinlikle hiçbir değişikliği yoktur. Bu harika çünkü mevcut yaklaşımın güçlü yönlerinden biri buydu.
Bu düzeltmeyle ilgili bazı uyarılar var. WordPress, sunucu tarafında hangi görüntülerin tembel olarak yükleneceğini belirler; bu, kullanıcının görüntü alanı boyutu veya görüntülerin başlangıçta yüklenip yüklenmeyeceği hakkında hiçbir şey bilmediği anlamına gelir. Bu nedenle düzeltme, görüntülerin görünüm alanında olup olmayacağını tahmin etmek için işaretlemedeki görüntülerin göreli konumu hakkında buluşsal yöntemler kullanır. Özellikle, resim sayfadaki ilk öne çıkan resim veya ana içerikteki ilk resim ise, ekranın ekranın üst kısmında (veya ona yakın) olduğu varsayılır ve yavaş yüklenmez. Başlıktaki kelime sayısı veya ana içeriğin başındaki paragraf metni miktarı gibi sayfa düzeyindeki koşullar, görüntünün görünüm alanı içinde olup olmadığını etkileyebilir. Buluşsal yöntemin 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 bağlantı bağlantılarının kullanımı. Bu nedenlerden dolayı, düzeltmenin yalnızca genel durumda iyi performans sağlamak üzere 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.
Yuvarlanıyor #
Artık görüntüleri tembel yüklemenin daha iyi bir yolunu, tüm görüntü tasarruflarını ve daha hızlı LCP performansını belirlediğimize göre, sitelerin bunu kullanmaya başlamasını nasıl sağlayabiliriz? En yüksek ö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 yavaş yüklemenin olumsuz etkilerini ve CMS’lerin bundan kaçınmak için buluşsal yöntemleri nasıl kullanabileceğini açıklığa kavuşturmak için CMS’ler için Tarayıcı düzeyinde yavaş yükleme blog gönderisindeki kılavuzu güncelleyeceğiz.
Bu en iyi uygulamalar tüm web geliştiricileri için geçerli olduğundan, Lighthouse gibi araçlarda yavaş yükleme anti-kalıplarını işaretlemeye değer olabilir. Bakın özellik isteği Bu denetimdeki ilerlemeyi takip etmekle ilgileniyorsanız GitHub’da. O zamana kadar, geliştiricilerin geç yüklenen LCP öğelerinin örneklerini bulmak için yapabilecekleri bir şey, saha 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 parçacığı, en son LCP öğesini değerlendirecek ve geç yüklenmişse bir uyarı günlüğe kaydedecektir.
Bu aynı zamanda tembel yükleme tekniğinin keskin kenarını ve platform düzeyinde API geliştirme potansiyelini vurgular. Örneğin, Chromium’da açık bir sorun var. deney düzeltmeye benzer şekilde, ilk birkaç görüntüyü hevesle yerel olarak yükleyerek loading bağlanmak.
Sarmalamak #
Siteniz yerel görüntü yavaş yükleme kullanıyorsa, bunun nasıl uygulandığını kontrol edin ve performans maliyetlerini daha iyi anlamak için A/B testleri çalıştırın. Ekranın üst kısmına daha hevesli bir şekilde yüklenen resimlerden faydalanabilir. Bir WordPress siteniz varsa, yakında WordPress çekirdeğine iniş yapan bir yama olacaktır. Başka bir CMS kullanıyorsanız, burada açıklanan olası performans sorunlarının farkında olduklarından emin olun.
Nispeten yeni web platformu API’lerini denemek hem riskler hem de ödüller getirebilir; bunlara bir nedenden ötürü son teknoloji özellikler denmesinin nedeni budur. Yerel görüntü tembel yüklemenin zorluklarını anlamaya başlarken, daha iyi performans elde etmek için onu nasıl kullanacağımızın olumlu taraflarını da görüyoruz.
fotoğrafı çeken Frankie Lopez Açık Unsplash