Core Web Vitals'ı dikkate alarak resimlerin geç yüklenmesi için veriye dayalı öneriler.
Geç yükleme, verileri korumak ve kritik öğeler için ağ anlaşmazlığını azaltmak amacıyla kaynağın indirilmesini ihtiyaç duyulana kadar erteleyen bir tekniktir. 2019'da bir web standardı haline geldi ve bugün 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üklemesinin benimsenme ve performans özelliklerini anlamak için herkese açık web şeffaflığı verilerinin ve geçici A/B testinin nasıl analiz edildiği özetlenmiştir. Bulgular, geç yüklemenin gereksiz resim baytlarını azaltmak için son derece etkili bir araç olabileceğini, ancak aşırı kullanımın performansı olumsuz yönde etkileyebileceğini gösterdi. Bu analiz daha somut bir şekilde, resimlerin ilk görüntü alanı içinde daha istekli bir şekilde yüklenmesini, geri kalanının da serbest bir şekilde geç yüklenmesini sağlamanın iki yöntemden de yararlanabileceğini göstermektedir: daha az bayt yüklenmiş ve iyileştirilmiş Core Web Vitals.
Evlat Edinme
HTTP Arşivi'ndeki en son verilere göre, web sitelerinin %29'u yerleşik görüntü geç yükleme özelliğini kullanıyor ve bu özelliğin kullanımı hızla artıyor.
HTTP Arşivi projesindeki ham verileri sorgulamak, ne tür web sitelerinin benimsenmesine katkıda bulunduğunu daha iyi anlamamızı sağlar: Tarayıcı düzeyinde resim geç yükleme kullanan sitelerin% 84'ü WordPress, %2'si başka bir İYS kullanır ve kalan% 14'ü bilinen bir İYS kullanmıyor. Bu sonuçlar, WordPress'in benimseme sürecinde nasıl öncülük ettiğini açıkça göstermektedir.
Benimseme oranını da unutmamak gerekir. Bir yıl önce Temmuz 2020'de, geç yükleme kullanan WordPress siteleri yaklaşık 6 milyonu (toplamın% 1'i) içeren on binlerce web sitesini oluşturdu. Yalnızca WordPress'te geç yükleme uygulaması o zamandan beri 1 milyondan fazla web sitesine (toplamın% 14'ü) ulaştı.
Bağıntısal performans
HTTP Arşivi'nin daha derinlerine inildiğinde, tarayıcı düzeyinde resim geç yüklemesi olan ve olmayan sayfaların Largest Contentful Paint (LCP) metriğiyle nasıl performans gösterdiği karşılaştırılabilir. LCP verileri, laboratuvardaki sentetik testlerden ziyade Chrome Kullanıcı Deneyimi Raporu'ndaki (CrUX) gerçek kullanıcı deneyimlerinden elde edilir. Aşağıdaki grafikte, her bir sayfanın dağılımını görselleştirmek için kutu ve bipek grafiği kullanılmıştır. 75. yüzdelik dilim LCP: Çizgiler 10. ve 90. yüzdelik dilimleri, kutular ise 25. ve 75. yüzdelik dilimleri temsil eder.
Geç yüklenmeyen ortanca sayfanın LCP'si 2.922 milisaniye iken 75. yüzdelik dilimde LCP değeri bulunurken geç yüklenen ortanca değer bu sayfa için 3.546 milisaniyedir. Genel olarak, geç yükleme kullanan web sitelerinin LCP performansı daha düşük olur.
Bunların korelasyonel sonuçlar olduğunu ve daha yavaş performansın nedeni olan yavaş yüklemeye işaret etmezler. Varsayımsal olarak, WordPress siteleri biraz daha yavaş olma eğilimindeyse ve geç yükleme grubunu ne kadar oluşturduğu dikkate alındığında, bu fark açıklanabilir. Bu değişkenliği ortadan kaldırmak için odak noktası özellikle WordPress siteleriyle sınırlandırılabilir.
Ne yazık ki, WordPress sayfalarını ayrıntılı olarak incelediğimizde de aynı durum ortaya çıkıyor. geç yükleme kullananların LCP performansı daha düşük olur. Geç yüklenmeyen ortanca WordPress sayfasının LCP değeri 3.495 milisaniye iken 75. yüzdelik dilim LCP'ye sahiptir. Geç yüklenen ortanca değer bu sayfa için 3.768 milisaniyedir.
Bu durum, geç yüklemenin sayfaların yavaşlamasına neden olduğunu kanıtlamaz ancak bu yöntemin kullanılması, performansın daha yavaş olmasıyla örtüşmektedir. Nedensellik sorusunu cevaplamak için laboratuvar tabanlı bir A/B testi oluşturuldu.
Nedensel performans
A/B testinin amacı, WordPress çekirdeğinde uygulanan yerleşik görüntü geç yüklemesinin daha yavaş LCP performansı ve daha az resim baytı ile sonuçlandığı hipotezini kanıtlamak veya çürütmekti. Kullanılan metodoloji bir WordPress web sitesini twentytwentyone temasıyla test etmekti. Hem arşiv hem de tek sayfa türleri (ana sayfa ve makale sayfaları gibi), masaüstü bilgisayarlarda ve emüle mobil cihazlarda WebPageTest kullanılarak test edildi. Geç yüklemenin etkin olduğu ve etkinleştirilmediği her sayfa kombinasyonu test edilmiş ve her test, ortanca LCP değeri ve resim baytı sayısını elde etmek için dokuz kez çalıştırılmıştır.
| Dizi | varsayılan | devre dışı | Varsayılandan fark |
|---|---|---|---|
| twentytwentyone-archive-desktop | 2.029 | 1.759 | -%13 |
| twentytwentyone-arşiv-mobil | 1.657 | 1.403 | -%15 |
| twentytwentyone-tek-masaüstü | 1.655 | 1.726 | %4 |
| twentytwentyone-tek-mobil | 1.352 | 1.384 | %2 |
Bu sonuçlar, arşivdeki testler için ortanca LCP değerini ve masaüstü ve mobil için tek sayfalardaki ortanca değeri karşılaştırır. Arşiv sayfalarında geç yükleme devre dışı bırakıldığında LCP, kayda değer bir fark arttı. Ancak tek sayfalarda daha az fark yarattı.
Geç yüklemenin devre dışı bırakılması, tek sayfaları biraz daha hızlı hale getiriyor. Bununla birlikte, LCP farkı, hem masaüstü hem de mobil testler için bir standart sapmadan daha azdır. Bu nedenle bu, varyansla ilişkilendirilebilir ve değişikliğin genel olarak nötr olduğu kabul edilebilir. Karşılaştırıldığında, arşiv sayfaları arasındaki fark, iki ila üç standart sapmaya daha yakındır.
| Dizi | varsayılan | devre dışı | Varsayılandan fark |
|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | %103 |
| twentytwentyone-arşiv-mobil | 172 | 378 | %120 |
| twentytwentyone-tek-masaüstü | 301 | 850 | %183 |
| twentytwentyone-tek-mobil | 114 | 378 | %233 |
Bu sonuçlar, her test için resim baytlarının ortanca değerini (KB cinsinden) karşılaştırır. Beklendiği gibi, geç yüklemenin resim baytlarının sayısını azaltmada çok açık olumlu bir etkisi vardır. Gerçek bir kullanıcı tüm sayfayı kaydırırsa tüm resimler görüntü alanına girerken de yine de yüklenir, ancak bu sonuçlar ilk sayfa yükleme işleminin iyileştirilmiş performansını gösterir.
A/B testinin sonuçlarını özetlemek gerekirse, WordPress'in kullandığı geç yükleme tekniği, gecikmeli bir LCP pahasına resim baytlarının azaltılmasına yardımcı olduğu açıkça bellidir.
Bir düzeltmeyi test etme
WordPress'in en önemli özelliği Bu denemenin mevcut geç yükleme uygulaması, resimleri görüntü alanı içinde (ekranın üst kısmı) geç yüklenmesidir. İçerik yönetim sistemi blog yayını, bu durumu kaçınılması gereken bir kalıp olarak kabul ediyor. Ancak o dönemdeki deneysel veriler, LCP üzerindeki etkinin minimum düzeyde olduğunu ve WordPress çekirdeğinde uygulamanın basitleştirilmesine değdiğini gösterdi.
Bu yeni veriler ışığında, ekranın üst kısmındaki resimlerin geç yüklenmesini önleyen deneysel bir düzeltme oluşturuldu ve bu düzeltme, ilk A/B testiyle aynı koşullarda test edildi.
| Dizi | varsayılan | devre dışı | düzelt | Varsayılandan fark | Devre dışı olanlara göre fark |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 2.029 | 1.759 | 1.749 | -%14 | -%1 |
| twentytwentyone-arşiv-mobil | 1.657 | 1.403 | 1.352 | -%18 | -%4 |
| twentytwentyone-tek-masaüstü | 1.655 | 1.726 | 1.676 | %1 | -%3 |
| twentytwentyone-tek-mobil | 1.352 | 1.384 | 1.342 | -%1 | -%3 |
Bu sonuçlar çok daha umut verici. Yalnızca ekranın alt kısmındaki resimlerin geç yüklenmesi, LCP regresyonunun tamamen geri alınmasıyla sonuçlanır ve hatta geç yüklemeyi tamamen devre dışı bırakmaya kıyasla küçük bir iyileştirme bile olabilir. Hiç geç yüklememekten daha hızlı olmak için ne yapabiliriz? Bunun bir açıklaması, ekranın alt kısmındaki resimler yüklenmediğinde LCP resmiyle daha az ağ çakışması yaşanması ve bunun da daha hızlı yüklenmesini sağlar.
| Dizi | varsayılan | devre dışı | düzelt | Varsayılandan fark | Devre dışı olanlara göre fark |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 577 | %0 | -%51 |
| twentytwentyone-arşiv-mobil | 172 | 378 | 172 | %0 | -%54 |
| twentytwentyone-tek-masaüstü | 301 | 850 | 301 | %0 | -%65 |
| twentytwentyone-tek-mobil | 114 | 378 | 114 | %0 | -%70 |
Bu düzeltmede, varsayılan davranışa kıyasla resim baytları açısından hiçbir değişiklik yoktur. Bu harika bir şey çünkü bu, mevcut yaklaşımın güçlü yanlarından biriydi.
Bu düzeltmede bazı uyarılara yer verilmektedir. WordPress, hangi resimlerin sunucu tarafında geç yükleneceğini belirler, yani kullanıcının görüntü alanı boyutu veya resimlerin başlangıçta görüntülenip yüklenmediği hakkında hiçbir şey bilmez. Bu düzeltmede, resimlerin mevcut görüntü alanında yüklenip yüklenmeyeceğini tahmin etmek için işaretlemedeki göreli konumu. Özellikle, resim, sayfada ilk öne çıkarılan resimse 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ında yer alan paragraf metni miktarı gibi sayfa düzeyindeki koşullar, resmin görüntü alanı içinde olup olmadığını etkileyebilir. Ayrıca, buluşsal yöntemlerin doğruluğunu etkileyebilecek kullanıcı düzeyinde koşullar, özellikle görüntü alanı boyutu ve sayfanın kaydırma konumunu değiştiren sabit bağlantıların kullanımı vardır.
Bu nedenlerle, düzeltmenin yalnızca genel durumda iyi performans sağlayacak şekilde kalibre edildiğini ve bu sonuçların tüm gerçek senaryolara uygun 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, tüm resim tasarrufları ve daha hızlı LCP performansı sağlandığına göre, siteler bu özelliği kullanmaya nasıl başlayabilir? En yüksek öncelikli değişiklik, deneysel düzeltmenin uygulanması için WordPress çekirdeğine bir yama göndermektir. İYS'ler için tarayıcı düzeyinde geç yükleme blog yayınındaki kılavuz, ekranın üst kısmında geç yüklemenin olumsuz etkilerini ve İYS'lerin bu durumdan kaçınmak için buluşsal yöntemleri nasıl kullanabileceğini netleştirmek amacıyla güncellenecektir.
Bu en iyi uygulamalar tüm web geliştiricileri için geçerli olduğundan, Lighthouse gibi araçlarda geç yükleme anti kalıplarını işaretlemeniz de faydalı olabilir. Söz konusu denetimle ilgili ilerleme durumunu takip etmek isterseniz GitHub'daki özellik isteğine bakın. O zamana kadar, geliştiricilerin geç yüklenen LCP öğesi örneklerini bulmak için yapabileceği bir şey de 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});
Önceki JavaScript snippet'i, en son LCP öğesini değerlendirir ve geç yüklenmişse bir uyarı kaydeder.
Bu, aynı zamanda geç yükleme tekniğinin keskin bir avantajını ve platform düzeyinde API iyileştirme potansiyeli olduğunu da gösterir. Örneğin, Chromium'da loading özelliğine rağmen, düzeltmeye benzer şekilde ilk birkaç resmi hızlı bir şekilde yerel olarak yükleme denemesi yapma konusunda açık bir sorun vardır.
Sonuç
Sitenizde, tarayıcı düzeyinde görsel geç yükleme kullanılı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 istekli bir şekilde yüklenmesinden yararlanabilir. WordPress siteniz varsa yakında WordPress Core'da bir yama olabileceğini umuyoruz. Başka bir içerik yönetim sistemi kullanıyorsanız burada açıklanan potansiyel performans sorunlarının farkında olduğundan emin olun.
Nispeten yeni web platformu API'lerini denemek hem riskler hem de ödüller sağlayabilir. Bu API'lere son teknoloji özellik denmesinin bir nedeni vardır. Tarayıcı düzeyindeki resimlerin geç yüklenmesinin zahmetli oluşunu anlamaya çalışırken, daha iyi performans elde etmek için bu yöntemi kullanmanın olumlu yanlarını da görüyoruz.
Fotoğrafçı: Frankie Lopez, Unsplash'te