TBT'yi 30 kez azaltıp Next.js'ye geçmek, The Ecomonic Times'ın INP'yi yaklaşık dört kat azaltmasına yardımcı olarak hemen çıkma oranında% 50 düşüş ve sayfa görüntüleme sayısında% 43 artış sağladı.
Sonraki Boyamayla Etkileşim (INP), web sitesinin kullanıcı girişine yanıt verme durumunu değerlendiren bir metriktir. Hızlı yanıt verme özelliği, bir sayfanın kullanıcı etkileşimlerine hızlı yanıt vermesi anlamına gelir. Bir sayfanın INP'si ne kadar düşük olursa kullanıcı etkileşimlerine daha iyi yanıt verebilir.
Kısmi başlangıç
INP'yi Önemli Web Verileri metriklerinden birine dönüşme potansiyeli taşıyan deneysel bir metrik olarak kullanıma sunan Google, temel işletme değerlerimiz için birinci sınıf bir kullanıcı deneyimi sağlamak büyük önem taşıdığından Economic Times ekibi, bu metrikten önce bir düzeltme yapmak zorunda kaldı.
INP şu ana kadar çözülmesi en zor metriklerden biriydi. Başlangıçta INP'nin etkin bir şekilde nasıl ölçüleceği belirsizdi. Bunu daha da zorlaştıran şey, topluluk desteğinin eksikliğiydi. Çoğu Gerçek Kullanıcı İzleme (RUM) sağlayıcısı bu desteği henüz desteklemiyordu. Ancak, Chrome Kullanıcı Deneyimi Raporu (CrUX), web-vitals JavaScript kitaplığı ve bunu destekleyen diğer Google RUM araçlarımız vardı. Bunlar, bizi bekleyen yolu değerlendirirken ne durumda olduğumuzla ilgili bir fikir edinmemizi sağladı. INP'miz,başladığımızda kaynak düzeyinde 1.000 milisaniyeye yakındı.
Sahada INP düzeltilirken ortaya çıkan bir başka durum da, hedeflenecek laboratuvar metriklerinden birinin Toplam Engelleme Süresi (TBT) olabileceğiydi. TBT, topluluk tarafından şimdiden belgelendi ve destekleniyordu. Core Web Vitals eşiklerine ulaşmamıza rağmen ilk başladığımızda 3 saniyeden uzun olduğu için TBT alanında pek iyi performans gösteremiyorduk.
TBT nedir ve iyileştirilmesi için hangi adımları attık?
TBT, sayfa yükleme sırasında web sayfasının kullanıcı girişine yanıt verme durumunu ölçen laboratuvar metriğidir. Yürütülmesi 50 milisaniyeden uzun süren görevler uzun görev olarak kabul edilir. 50 milisaniyelik eşikten sonra geçen 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üreleri toplanarak hesaplanır. Örneğin, yükleme sırasında iki uzun görev varsa engelleme süresi şu şekilde belirlenir:
- Görev A, 80 milisaniye (50 milisaniyeden 30 milisaniye fazla) sürer.
- B görevi, 100 milisaniye (50 milisaniyeden 50 milisaniye fazla) sürer.
Sayfanın TBT'si şöyle olur: 80 milisaniye (30 + 50). TBT ne kadar düşük olursa o kadar iyidir ve TBT, INP ile ilişkilidir.
Aşağıda, iyileştirmek için gerekli adımlar atılmadan önce ve yapıldıktan sonra TBT'mizin kısa bir laboratuvar karşılaştırması verilmiştir:
Ana iş parçacığı çalışmasını en aza indirin
Tarayıcının ana iş parçacığı HTML ayrıştırma, DOM oluşturma, CSS ayrıştırma ve stilleri uygulama, JavaScript'i değerlendirme ve yürütmeye kadar her şeyi işler. Ana ileti dizisi; tıklama, dokunma ve tuşlara basma gibi kullanıcı etkileşimlerini de yönetir. Ana iş parçacığı başka işlerle meşgulse kullanıcı girişlerine etkili bir şekilde yanıt vermeyebilir ve kötü bir kullanıcı deneyimine yol açabilir.
Abonelik durumuna ve A/B testi, analizler ve daha fazlası için üçüncü taraf komut dosyalarına göre reklam yayınlarken kullanıcı kimliğini algılamak üzere kendi algoritmalarımız olduğundan bu, en zor görevdi.
Başta, daha az kritik işletme varlıklarının yüklenmesine öncelik vermemek gibi küçük adımlar attık. İkinci olarak, kritik olmayan işler için requestIdleCallback kullandık. Bu sayede TBT'nin azaltılmasına 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ının belirtilmesi önerilir. Çünkü bu, belirli bir süre geçtiyse ve geri çağırma önceden çağrılmamışsa, geri çağırmanın zaman aşımından hemen sonra yürütülmesini sağlar.
Komut dosyası değerlendirme süresini en aza indirin
Üçüncü taraf kitaplıkları da Yüklenebilir bileşenler kullanarak geç yükledik. Ayrıca Chrome Geliştirici Araçları'nda kapsam aracı ile sayfanın profilini oluşturarak kullanılmayan JavaScript ve CSS'yi de kaldırdık. Sayfa yükleme sırasında daha az kod göndermek için ağaç sallamanın gerekli olduğu alanları tespit etmemize ve böylece uygulamanın ilk paket boyutunu küçültmemize yardımcı oldu.
DOM boyutunu küçült
Lighthouse'a göre büyük DOM boyutları, bellek kullanımını artırır, stillerin yeniden hesaplanmasının daha uzun sürmesine neden olur ve maliyetli düzen yeniden düzenlemeleri üretir.
DOM düğümlerinin sayısını iki şekilde düşürdü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ı geç yükledik.
Tüm bu çalışmalar sayesinde TBT'yi önemli ölçüde azalttık ve INP değerimiz de buna uygun olarak yaklaşık %50 oranında düştü:
Bu noktada TBT'yi (ve proxy üzerinden INP'yi) daha da azaltmak için kolay kazanımları neredeyse bitmişti ancak daha fazla iyileştirmemiz gerektiğini biliyorduk. Bu aşamadan sonra, bileşenlerin gereksiz şekilde yeniden oluşturulmasını önlemek amacıyla kancalardan daha iyi yararlanmak için özel olarak oluşturulmuş kullanıcı arayüzü ortak metinlerimizi Next.js ile birlikte en son sürümüne yükseltmeye karar verdik.
Daha sık güncellemeler ve web sitesinin diğer bölümlerine kıyasla nispeten daha düşük trafik nedeniyle, konu sayfalarımızı Next.js'ye taşımaya başladık. Ayrıca, kritik olmayan görevleri ertelemek için requestIdleCallBack gibi tekniklerin yanı sıra, ek ağır ana iş parçacığı işlerini web çalışanlarına boşaltmak üzere PartyTown kullandık.
INP'deki iyileşme The Economic Times'a nasıl yardımcı oldu?
Kaynakta mevcut TBT ve INP
Bu yayının yayınlandığı tarihte kaynağımız için TBT, optimizasyon çalışmalarımıza başladığımızda 3.260 milisaniye iken, 120 milisaniyeydi. Benzer şekilde, optimizasyon çalışmalarımızdan sonra kaynağımızın INP'si 257 milisaniyeydi. Bu süre 1000 milisaniyenin üzerindeydi.
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ı deneme yapmak için ideal bir yerdi. CrUX ve işletmenin elde ettiği sonuçlar son derece cesaret vericiydi ve daha da fazla fayda elde etmek için çalışmalarımızı web sitesinin tamamına yaymamızı sağladı.
Akamai mPulse TBT Analizi
Sahada TBT'yi ölçen RUM çözümümüz olarak Akamai mPulse'ı kullanıyoruz. TBT'de sürekli bir düşüş gözlemledik. Bu da INP'yi azaltma çabalarımızın sonuçlarını açıkça gösteriyor. Aşağıdaki ekran görüntüsünde görülebileceği gibi, TBT değerleri nihayetinde alanda yaklaşık 5 saniyeden yaklaşık 200 milisaniyeye düşmüştür.
İş sonucu
Genel olarak, Next.js'ye geçişle birlikte TBT'yi 30 kez azaltma çabalarımız INP'yi yaklaşık 4 kat azaltmamıza yardımcı oldu. Bu da sonuç olarak konu sayfalarındaki hemen çıkma oranında% 50 düşüş ve sayfa görüntüleme sayısında% 43 artış sağladı.
Sonuç
Özetlemek gerekirse INP, Economic Times web sitesinin bazı bölümlerinde çalışma zamanı performansı sorunlarının belirlenmesine büyük ölçüde yardımcı oldu. İş sonuçlarını olumlu yönde etkileyen en etkili metriklerden biri olduğu kanıtlandı. Bu çabanın sonucunda oldukça cesaret verici rakamlar gözlemledik. Bu nedenle, optimizasyon çalışmalarımızı web sitemizin diğer alanlarına da yaymak ve daha fazla avantaj elde etmek için sabırsızlanıyoruz.