Next Paint Etkileşimi (INP), bir web sitesinin kullanıcı girişine yanıt verme yeteneğini değerlendiren bir ölçümdür. İyi yanıt verme, bir sayfanın kullanıcı etkileşimlerine hızlı yanıt vermesi anlamına gelir. Bir sayfanın INP’si ne kadar düşükse, kullanıcı etkileşimlerine o kadar iyi yanıt verebilir.
bulanık başlangıç #
Google, INP’yi Core Web Vitals metriklerinden birine dönüşme potansiyeline sahip deneysel bir metrik olarak ilk kez sunduğunda, Economic Times ekibi, birinci sınıf bir kullanıcı deneyimi sağlamanın çok önemli olması nedeniyle, INP’yi tek bir metrik haline gelmeden önce düzeltme görevini üstlendi. temel iş değerlerimiz.
INP şimdiye kadar çözülmesi en zor metriklerden biri olmuştur. Başlangıçta, INP’nin etkili bir şekilde nasıl ölçüleceği açık değildi. Bunu daha da zorlaştıran şey, henüz desteklemeyen Gerçek Kullanıcı İzleme (RUM) sağlayıcılarının çoğu da dahil olmak üzere topluluk desteğinin olmamasıydı. Ancak, aşağıdaki gibi Google RUM araçlarımız vardı: Chrome Kullanıcı Deneyimi Raporu (CrUX), web-vitals JavaScript kitaplığı, ve onu destekleyen diğerleri, önümüzde ki yolu değerlendirirken bize nerede durduğumuza dair bir fikir verdi. Başladığımızda başlangıç seviyesinde INP’miz 1.000 milisaniyeye yakındı.
Sahada INP’yi düzeltirken ortaya çıkan bir şey, hedeflenecek laboratuvar ölçümlerinden birinin Toplam Engelleme Süresi (TBT) olabileceğiydi. TBT zaten iyi bir şekilde belgelenmiş ve topluluk tarafından desteklenmiştir. Core Web Vitals eşiklerini zaten karşılamamıza rağmen, başladığımızda 3 saniyenin üzerinde olduğu için TBT cephesinde o kadar iyi durumda değildik.
TBT nedir ve onu geliş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 verebilirliğini ölçen bir laboratuvar metriğidir. Yürütülmesi 50 milisaniyeden uzun süren herhangi bir görev, uzun bir görev olarak kabul edilir ve 50 milisaniye eşiğinden sonraki süre, görev olarak bilinir. engelleme süresi.
TBT, sayfa yükleme sırasında tüm uzun görevlerin engelleme sürelerinin toplamı alınarak 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 sürer (50 milisaniyeden 30 milisaniye daha fazla).
- B Görevi 100 milisaniye sürer (50 milisaniyeden 50 milisaniye daha fazla).
Sayfanın TBT’si şöyle olacaktır: 80 milisaniye (30 + 50). TBT ne kadar düşükse o kadar iyidir ve TBT de INP ile iyi korelasyon gösterir.
TBT’mizi iyileştirmek için adımlar atmadan önce ve sonra hızlı bir laboratuvar karşılaştırmasını burada bulabilirsiniz:
Ana iş parçacığı çalışmasını en aza indirin #
Tarayıcının ana iş parçacığı, HTML’yi ayrıştırmaktan DOM’u oluşturmaya, CSS’yi ayrıştırmaya ve stilleri uygulamaya ve ayrıca JavaScript’i değerlendirmeye ve yürütmeye kadar her şeyi işler. Ana ileti dizisi aynı zamanda kullanıcı etkileşimlerini de yönetir; yani tıklama, dokunma ve tuşlara basma. Ana iş parçacığı başka işler yapmakla meşgulse, kullanıcı girişlerine verimli bir şekilde yanıt vermeyebilir ve sarsıntılı bir kullanıcı deneyimine yol açabilir.
Abonelik durumuna dayalı reklamlar sunmak için kullanıcı kimliğini tespit eden kendi algoritmalarımıza ve A/B testi, analitik ve daha fazlası için üçüncü taraf komut dosyalarına sahip olduğumuzdan, bu bizim için en zor görevdi.
İlk başta, daha az kritik iş varlıklarının yüklenmesine öncelik vermemek gibi küçük adımlar attık. İkinci olarak, kullandık requestIdleCallback TBT’yi azaltmaya yardımcı olabilecek kritik olmayan işler için.
if ('requestIdleCallback' in window) {
this.requestIdleCallbackId = requestIdleCallback(fetchMarketsData.bind(this), {timeout: 3000});
} else {
fetchMarketsData(); // Fallback in case requestIdleCallback is not supported
}
Kullanırken bir zaman aşımı belirtilmesi önerilir. requestIdleCallbackverilen süre geçtiğinde ve geri aramanın henüz çağrılmamış olduğundan emin olduğundan, geri aramayı zaman aşımından hemen sonra yürütür.
Komut dosyası değerlendirme süresini en aza indirin #
Ayrıca kullanarak üçüncü taraf kitaplıklarını tembel olarak yükledik. Yüklenebilir bileşenler. Ayrıca, kullanılmayan JavaScript ve CSS’yi sayfanın profilini kapsama aracı Chrome Geliştirici Araçları’nda. olduğu alanları belirlememize yardımcı oldu. ağaç sallanıyor sayfa yükleme sırasında daha az kod göndermek ve dolayısıyla uygulamanın ilk paket boyutunu azaltmak için gerekliydi.
DOM boyutunu küçült #
Lighthouse’a göre, büyük DOM boyutları bellek kullanımını artırır, daha uzun stil yeniden hesaplamalarına neden olur ve maliyetli sonuçlar üretir. düzen yeniden akışları.
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ı.
- İkincisi, daha az önemli pencere öğelerini tembelce yükledik.
Tüm bu çabalar sonucunda TBT’yi önemli ölçüde azalttık ve buna bağlı olarak INP’miz de neredeyse %50 azaldı:
Bu noktada, TBT’yi (ve dolayısıyla INP’yi) daha da azaltmak için neredeyse kolay kazançlarımız tükendi, ancak iyileştirme için çok yerimiz olduğunu biliyorduk. Bu, özel olarak oluşturulmuş UI standartlarımızı React’in en son sürümüne yükseltmeye karar verdiğimiz zamandı. Sonraki.js daha iyi kullanmak için kancalar bileşenlerin gereksiz yere yeniden oluşturulmasını önlemek için.
Web sitesinin diğer bölümlerine kıyasla daha sık güncellemeler ve nispeten daha az trafik nedeniyle, web sitemizi taşımaya başladık. konu sayfaları Next.js’ye. biz de kullandık Parti Kasabası gibi tekniklerle birlikte ek ağır ana iş parçacığı işini web çalışanlarına boşaltmak için requestIdleCallBack kritik olmayan görevleri ertelemek için.
INP’nin iyileştirilmesi The Economic Times’a nasıl yardımcı oldu? #
Orijinde mevcut TBT ve INP #
Bu gönderiyi yayınladığımız sırada, optimizasyon çalışmalarımıza başladığımızda 3.260 milisaniye olan kaynağımız için TBT, 120 milisaniye idi. Benzer şekilde, kaynağımız için INP, optimizasyon çabalarımızdan sonra 1.000 milisaniyeden 257 milisaniyeye düştü.
INP Crux trendi #
Konu sayfalarında alınan trafik, genel trafiğin önemli ölçüde daha küçük bir bölümünü temsil eder. Bu nedenle, deneyler için ideal bir yerdi. İş sonuçlarıyla birlikte CrUX sonuçları çok cesaret vericiydi ve daha fazla fayda elde etmek için çabalarımızı web sitesinin tamamına yaymamıza yol açtı.
Akamai mPulse TBT Analizi #
Kullanırız Akıllı mPulse TBT’yi sahada ölçen RUM çözümümüz olarak. TBT’de tutarlı bir düşüş gözlemledik ve bu, INP’yi azaltma çabalarımızın sonuçlarını açıkça gösteriyor. Aşağıdaki ekran görüntüsünde de görülebileceği gibi, TBT değerleri sonunda sahada yaklaşık 5 saniyeden yaklaşık 200 milisaniyeye düştü.
İş sonucu #
Genel olarak, Next.js’ye geçişin yanı sıra TBT’yi 30 kat düşürme çabalarımız, INP’yi yaklaşık 4 kat azaltmamıza yardımcı oldu ve bu da sonunda Hemen çıkma oranında %50 azalma ve sayfa görüntülemelerinde %43 artış konu sayfalarında.
Çözüm #
Özetlemek gerekirse, INP, Economic Times web sitesinin bazı bölümlerinde çalışma zamanı performans sorunlarının belirlenmesine kapsamlı bir şekilde yardımcı oldu. İş sonuçlarını olumlu yönde etkileyen en etkili ölçümlerden biri olduğu kanıtlanmıştır. Bu çabanın sonucu olarak gözlemlediğimiz çok cesaret verici rakamlar nedeniyle, optimizasyon çabalarımızı web sitemizin diğer alanlarına ölçeklendirmek ve ek faydalar elde etmek için motive oluyoruz.