Çok fazla geç yüklemenin performans etkileri

Core Web Vitals'ı göz önünde bulundurarak resimleri gecikmeli yüklemeyle ilgili veriye dayalı öneriler.

Felix Arntz

Rick Viscomi

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

Bu kılavuzda, tarayıcı düzeyinde resimleri gecikmeli yüklemenin benimsenme ve performans özelliklerini anlamak için herkese açık web şeffaflığı verilerinin ve özel A/B testinin nasıl analiz edildiği özetlenmiştir. Araştırmanın bulguları arasında, gereksiz resim baytlarını azaltmak için gecikmeli yüklemenin inanılmaz derecede etkili bir araç olabileceği ancak aşırı kullanımının performansı olumsuz yönde etkileyebileceği yer aldı. Daha açık belirtmek gerekirse bu analiz, ilk görüntü alanındaki resimleri daha hevesli bir şekilde yüklerken geri kalanını serbestçe gecikmeli yüklemenin her iki dünyanın da en iyisini sağlayabileceğini gösteriyor: daha az bayt yüklenir ve Core Web Vitals metrikleri iyileşir.

Evlat Edinme

HTTP Archive'deki en son verilere göre, yerleşik resim gecikmeli yükleme özelliği web sitelerinin %29'u tarafından kullanılı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 kullanmaz. Bu sonuçlar, WordPress'in kullanımda nasıl lider olduğunu açıkça gösteriyor.

Kullanım oranı da dikkate alınması gereken bir faktördür. Bir yıl önce Temmuz 2020'de, yaklaşık 6 milyonluk (toplamın %1'i) veri kümesinde, yavaş yükleme kullanan WordPress siteleri on binlerce web sitesini oluşturuyordu. O zamandan beri, yalnızca WordPress'te geç yükleme özelliğini kullanan web sitelerinin sayısı 1 milyonun (toplamın %14'ü) üzerine çıktı.

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 (CrUX)'ndaki gerçek kullanıcı deneyimlerinden alınır. Aşağıdaki grafikte, her sayfanın 75. yüzdelik dilimindeki LCP'nin dağılımını görselleştirmek için kutu ve çubuk grafiği kullanılmaktadır: Çizgiler 10. ve 90. yüzdelik dilimleri, kutular ise 25. ve 75. yüzdelik dilimleri temsil etmektedir.

Yavaş yükleme içermeyen ortalama sayfanın 75. yüzdelik dilimdeki LCP değeri 2.922 milisaniyedir. Yavaş yükleme içeren ortalama sayfanın 75. yüzdelik dilimdeki LCP değeri ise 3.546 milisaniyedir. Genel olarak, geç yükleme kullanan web sitelerinin LCP performansı daha düşüktür.

Bu sonuçların korelasyonel olduğunu ve yavaş performansın nedeni olarak mutlaka yavaş yüklemenin işaret edilmediğini belirtmek önemlidir. Varsayımsal olarak, WordPress siteleri biraz daha yavaş olma eğilimindeyse ve yavaş yükleme kohortunun ne kadarını oluşturdukları göz önüne alınırsa bu fark açıklanabilir. Bu çeşitliliği ortadan kaldırmak için odaklanmayı özellikle WordPress sitelerine daraltabilirsiniz.

Maalesef WordPress sayfalarına ayrıntılı olarak bakıldığında da aynı kalıp ortaya çıkıyor. Geç yükleme kullanan sayfaların LCP performansı daha yavaş olma eğilimindedir. Yavaş yükleme içermeyen ortalama WordPress sayfasının 75. yüzdelik dilimdeki LCP değeri 3.495 milisaniyedir. Yavaş yükleme içeren ortalama sayfanın 75. yüzdelik dilimdeki LCP değeri ise 3.768 milisaniyedir.

Bu, yine de sayfaların yavaşlamasına neden olduğunu kanıtlamaz ancak bu özelliğin kullanılması, daha yavaş performansla aynı zamana denk gelir. Nedensellik sorununu yanıtlamaya çalışmak için laboratuvar tabanlı bir A/B testi oluşturuldu.

Nedensel performans

A/B testinin amacı, WordPress'in temelinde uygulanan yerleşik resim geç yüklemenin, LCP performansının yavaşlamasına ve resim baytlarının azalmasına neden olduğu 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. Yavaş yüklemenin etkin olduğu ve etkin olmadığı her sayfa kombinasyonu test edildi ve her test, ortalama 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 cihazlarda arşiv ve tek sayfa testleri için milisaniye cinsinden medyan LCP'yi karşılaştırır. Arşiv sayfalarında gecikmeli yükleme devre dışı bırakıldığında LCP önemli ölçüde iyileşti. Ancak tek sayfalarda bu durum çok fazla fark yaratmadı.

Geç yüklemeyi devre dışı bırakmak, tek sayfaların biraz daha hızlı olmasını sağlıyor. Ancak LCP'deki fark hem masaüstü hem de mobil testler için bir standart sapmadan az olduğundan bu durum varyasyonla ilişkilendirilebilir ve değişikliğin genel olarak nötr olduğu kabul edilebilir. Buna karşılık, arşiv sayfaları için fark iki ila üç standart sapmaya daha yakındır.

Bu sonuçlar, her test için resim baytlarının ortanca değerini (KB cinsinden) karşılaştırır. Beklemeli yüklemenin, resim baytlarının sayısını azaltma konusunda çok net bir olumlu etkisi olduğu beklenir. Gerçek bir kullanıcı sayfanın tamamını 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 tarafından kullanılan gecikmeli yükleme tekniği, gecikmeli LCP pahasına resim baytlarını azaltmaya yardımcı olur.

Düzeltmeyi test etme

WordPress'in bu deneme için geçerli geç yükleme uygulamasının en önemli yönü, resimleri görüntü alanında (ekranın üst kısmında) geç yüklemesidir. İçerik yönetim sistemi blog yayınında, bu durumun kaçınılması gereken bir kalıp olduğu kabul edilir ancak o zamanki deneysel veriler, LCP üzerindeki etkisinin minimum olduğunu ve WordPress'te uygulamanın basitleştirilmesinin değerli olduğunu gösteriyordu.

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.

Bu sonuçlar çok daha umut verici. Yalnızca sayfanın altındaki resimleri gecikmeli yüklemek, LCP regresyonunun tamamen tersine dönmesine ve hatta gecikmeli yüklemeyi tamamen devre dışı bırakmaya kıyasla küçük bir iyileştirmeye neden olur. Bu, hiç yavaş yükleme yapmamaktan daha hızlı nasıl olabilir? Bunun bir nedeni, sayfanın altındaki resimlerin yüklenmemesi nedeniyle LCP resminin daha hızlı yüklenmesini sağlayan daha az ağ çekişmesi olmasıdır.

Resim baytları açısından, düzeltmeyle varsayılan davranış arasında hiçbir fark yoktur. Bu harika bir şey çünkü bu, mevcut yaklaşımın güçlü yanlarından biriydi.

Bu düzeltmeyle ilgili bazı noktalara dikkat edin. 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 nedenle, düzeltme, görüntünün görüntü alanında yüklenip yüklenmeyeceğini tahmin etmek için işaretlemedeki göreli konumuyla ilgili sezgisel yöntemler kullanır. Daha açık belirtmek gerekirse, resim sayfadaki ilk öne çıkarılan resim veya ana içerikteki ilk resimse ekranın üst kısmında veya yakınında olduğu varsayılır ve resim gecikmeli yüklenmez.

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

Bu nedenlerle, düzeltmenin yalnızca genel durumda iyi performans sağlamak için kalibre edildiğini ve bu sonuçların tüm gerçek senaryolar için geçerli olması amacıyla ince ayar yapılması gerekebileceğini kabul etmek önemlidir.

Uygulama

Resimleri yavaş yüklemenin daha iyi bir yolu belirlendiğinde, tüm resim tasarrufları ve daha hızlı LCP performansı ile siteler bu yöntemi nasıl kullanmaya başlayabilir? En yüksek öncelikli değişiklik, deneysel düzeltmeyi uygulamak 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, yavaş yüklemeyle ilgili anti-pattern'leri işaretlemek de faydalı olabilir. Bu denetimin ilerleme durumunu takip etmek istiyorsanız GitHub'daki özellik isteğine göz atın. O zamana kadar geliştiriciler, LCP öğelerinin yavaş yüklendiği örnekleri bulmak için alan verilerine daha ayrıntılı günlük kaydı ekleyebilir.

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 gecikmeli yüklenmişse bir uyarı günlüğe kaydeder.

Bu durum, gecikmeli yükleme tekniğinin avantajını ve platform düzeyinde API iyileştirme potansiyelini de gösterir. Örneğin, Chromium'da loading özelliğine rağmen düzeltmeye benzer şekilde ilk birkaç resmi doğal olarak hevesle yüklemeyle ilgili denemeler yapmak için açık bir sorun var.

Sonuç

Sitenizde tarayıcı düzeyinde gecikmeli resim yükleme kullanılıyorsa bu özelliğin 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ındaki resimlerin daha istekli bir şekilde yüklenmesinden yararlanabilir. WordPress siteniz varsa yakında WordPress'in temel sürümüne bir yama eklenecektir. Başka bir içerik yönetim sistemi kullanıyorsanız burada açıklanan olası performans sorunlarından haberdar olduklarından emin olun.

Nispeten yeni web platformu API'lerini denemek hem riskler hem de ödüller getirebilir. Bu API'lerin "son teknoloji özellikler" olarak adlandırılmasının bir nedeni vardır. Tarayıcı düzeyindeki resimlerin geç yüklenmesinin ne kadar zahmetli olduğunu anlamaya başlarken, daha iyi performans elde etmek için bu yöntemi kullanmanın olumlu yanlarını da görüyoruz.

Unsplash'taki Frankie Lopez tarafından çekilen fotoğraf