TBT'yi 30 kat azaltıp Next.js'e geçiş yapan The Ecomonic Times, INP'yi yaklaşık dört kat azalttı. Bu da hemen çıkma oranında %50'lik bir düşüşe ve sayfa görüntüleme sayısında %43'lük bir artışa yol açtı.
Interaction to Next Paint (INP), bir web sitesinin kullanıcı girişine yanıt verme oranını değerlendiren bir metriktir. Sayfanın kullanıcı etkileşimlerine hızlı yanıt vermesi, sayfanın duyarlılığının iyi olduğunu gösterir. Bir sayfanın INP değeri ne kadar düşük olursa, kullanıcı etkileşimlerine o kadar iyi yanıt verebilir.
Bulanık başlangıç
Google, INP'yi ilk olarak Core Web Vitals metriklerinden biri haline gelebilecek deneysel bir metrik olarak kullanıma sunduğunda Economic Times ekibi, dünya standartlarında bir kullanıcı deneyimi sunmak temel işletme değerlerimiz açısından çok önemli olduğundan, INP'yi Core Web Vitals metriği haline gelmeden önce düzeltme görevini üstlendi.
INP, bugüne kadar çözülmesi en zor metriklerden biri olmuştur. Başlangıçta, INP'nin etkili bir şekilde nasıl ölçüleceği net değildi. Bu süreci daha da zorlaştıran, gerçek kullanıcı izleme (RUM) sağlayıcılarının çoğunun henüz bu özelliği desteklememesi de dahil olmak üzere topluluk desteğinin olmamasıydı. Bununla birlikte, Chrome Kullanıcı Deneyimi Raporu (CrUX), web-vitals JavaScript kitaplığı ve onu destekleyen başka Google RUM araçlarımız vardı. Bu araçlar, bizi bekleyen yolu değerlendirirken ne durumda olduğumuzu anlamamızı sağladı. Başladığımızda kaynak düzeyinde INP'miz 1.000 milisaniyeye yakındı.
Alanda INP'yi düzeltirken, hedeflenecek laboratuvar metriklerinden birinin Toplam Engelleme Süresi (TBT) olabileceği ortaya çıktı. Geçmişe Dönüş özelliği, topluluk tarafından zaten iyi biliniyor ve destekleniyor. Core Web Vitals eşiklerini zaten karşılıyor olsak da TBT konusunda o kadar iyi değildik. Başladığımızda bu süre 3 saniyenin üzerindeydi.
Geçmişe Dönen Perşembe nedir ve bu özelliği iyileştirmek için hangi adımları attık?
TBT, bir web sayfasının sayfa yükleme sırasında kullanıcı girişine yanıt verme durumunu ölçen bir laboratuvar metriğidir. Yürütülmesi 50 milisaniyeden uzun süren görevler uzun görev olarak kabul edilir. 50 milisaniyelik eşikten sonraki süre ise engelleme süresi olarak adlandırılır.
TBT, sayfa yükleme sırasındaki tüm uzun görevlerin engelleme süresinin toplamı alınarak hesaplanır. Örneğin, yükleme sırasında iki uzun görev varsa engelleme süresi aşağıdaki şekilde belirlenir:
- A görevi 80 milisaniye (50 milisaniyeden 30 milisaniye fazla) sürer.
- Görev B 100 milisaniye (50 milisaniyeden 50 milisaniye daha uzun) sürer.
Sayfanın TBT değeri: 80 milisaniye (30 + 50). TBT ne kadar düşük olursa o kadar iyidir. Ayrıca TBT, IPN ile iyi bir korelasyona sahiptir.
Aşağıda, TBT'mizin iyileştirilmesi için atılan adımlardan önceki ve sonraki lab'in kısa bir karşılaştırmasını bulabilirsiniz:
Ana iş parçacığının işini en aza indirme
Tarayıcının ana iş parçacığı; HTML'yi ayrıştırmaktan, DOM'u oluşturmaktan, CSS'yi ayrıştırıp stilleri uygulamaya ve JavaScript'i değerlendirmeye ve yürütmeye kadar her şeyi yönetir. Ana iş parçacığı, kullanıcı etkileşimlerini (ör. tıklama, dokunma ve tuş basma) de işler. Ana ileti dizisi başka işlerle meşgulse kullanıcı girişlerine verimli bir şekilde yanıt vermeyebilir ve can sıkıcı bir kullanıcı deneyimine yol açabilir.
Abonelik durumuna göre reklam sunarken kullanıcı kimliğini tespit eden kendi algoritmalarımız, A/B testi, analizler ve daha fazlası için üçüncü taraf komut dosyalarından dolayı bu bizim en zor görevdi.
İlk başta, daha az kritik işletme öğelerinin yüklenmesine öncelik vermek gibi küçük adımlar uyguladık. İkinci olarak, kritik olmayan işler için requestIdleCallback kullandık. Bu, TBT'yi azaltmaya yardımcı olabilir.
if ('requestIdleCallback' in window) {
this.requestIdleCallbackId = requestIdleCallback(fetchMarketsData.bind(this), {timeout: 3000});
} else {
fetchMarketsData(); // Fallback in case requestIdleCallback is not supported
}
requestIdleCallback kullanılırken zaman aşımı belirtilmesi önerilir. Belirtilen süre dolup geri çağırma çağrısı yapılmamışsa geri çağırma işleminin zaman aşımından hemen sonra yürütülmesini sağlar.
Komut dosyası değerlendirme süresini en aza indirin
Ayrıca, yüklenebilir bileşenleri kullanarak üçüncü taraf kitaplıklarını da geç yükledik. Ayrıca, Chrome Geliştirici Araçları'ndaki kapsam aracını kullanarak sayfanın profilini çıkararak kullanılmayan JavaScript ve CSS'leri de kaldırdık. Bu sayede, sayfa yükleme sırasında daha az kod göndermek için ağaç sallama işleminin gerekli olduğu alanları belirleyebildik ve dolayısıyla uygulamanın ilk paket boyutunu küçülttük.
DOM boyutunu küçültme
Lighthouse'a göre büyük DOM boyutları bellek kullanımını artırır, stil yeniden hesaplamalarının uzun sürmesine neden olur ve yüksek maliyetli düzen yeniden düzenlemeleri üretir.
DOM düğümlerinin sayısını iki şekilde azalttık:
- İlk olarak menü öğelerimizi kullanıcının isteği üzerine (tıklandığında) oluşturduk. DOM boyutunu yaklaşık 1.200 düğüm azalttı.
- İkinci olarak, daha az önemli widget'ları yavaş yükledik.
Tüm bu çalışmalar sayesinde TBT'yi önemli ölçüde azalttık ve INP'miz buna uygun şekilde yaklaşık %50 oranında azaldı:
Bu noktada TBT'yi (ve proxy yoluyla INP'yi) daha da azaltacak kolay kazanımlarımız kalmamıştı ama çok fazla iyileştirme alanımızın olduğunu biliyorduk. Bu nedenle, bileşenlerin gereksiz şekilde yeniden oluşturulmasını önlemek amacıyla kancaların daha iyi kullanılması için özel olarak geliştirilmiş kullanıcı arayüzü standart belgemizi Next.js ile birlikte React'in en son sürümüne yükseltmeye karar verdik.
Web sitesinin diğer bölümlerine kıyasla daha sık güncelleme ve nispeten daha az trafik almaları nedeniyle konu sayfalarımızı Next.js'e taşımaya başladık. Ayrıca, ek ağır ana iş parçacığı işlerini web çalışanlarına boşaltmak için PartyTown yöntemini ve kritik olmayan görevleri ertelemek için requestIdleCallBack gibi tekniklerden yararlandık.
INP'nin iyileştirilmesi The Economic Times'a nasıl yardımcı oldu?
Kaynaktaki mevcut TBT ve INP
Bu yayını yayınladığımız tarihte, kaynağımız için TBT tam 120 milisaniyeydi. Bu sayı, optimizasyon çalışmalarımıza başladığımızda 3.260 milisaniyeydi. Benzer şekilde, optimizasyon çalışmalarımız sonrasında kaynağımızın INP'si 257 milisaniyeye düştü. Bu değer, 1.000 milisaniyeden fazlaydı.
INP CrUX trendi
Konu sayfalarında alınan trafik, genel trafiğin önemli ölçüde küçük bir bölümünü oluşturmaktadır. Bu nedenle, burası denemeler için ideal bir yerdi. CrUX sonuçları ve işletme sonuçları çok cesaret vericiydi. Daha fazla avantaj elde etmek için çabalarımızı web sitesinin tamamına yaymamıza yol açtı.
Akamai mPulse TBT Analizi
RUM çözümümüz olarak, sahada TBT'yi ölçen Akamai mPulse'ü kullanıyoruz. TBT'de tutarlı bir düşüş gözlemledik. Bu düşüş, INP'yi azaltma çalışmalarımızın sonuçlarıyla açıkça ilişkili. Aşağıdaki ekran görüntüsünde görüldüğü gibi, TBT değerleri sonunda yaklaşık 5 saniyeden alanda yaklaşık 200 milisaniyeye düştü.
İşletme sonucu
Genel olarak, TBT'yi 30 kat azaltma çalışmalarımız ve Next.js'e geçişimiz, INP'yi yaklaşık 4 kat azaltmamıza yardımcı oldu. Bu da konu sayfalarında hem hemen çıkma oranında %50'lik bir düşüşe hem de sayfa görüntüleme sayısında %43'lük bir artışa yol açtı.
Sonuç
Özetlemek gerekirse INP, Economic Times web sitesinin bazı bölümlerindeki çalışma zamanındaki performans sorunlarını belirlemeye büyük ölçüde yardımcı oldu. İşle ilgili sonuçları olumlu yönde etkileyen en etkili metriklerden biri olduğu kanıtlanmıştır. Bu çalışmanın sonucunda gözlemlediğimiz çok cesaret verici rakamlar sayesinde, optimizasyon çalışmalarımızı web sitemizin diğer alanlarına ölçeklendirmek ve ek avantajlardan yararlanmak için motive olduk.