INP optimizasyonları, redBus'un satışlarını yaklaşık %7 artırmasına yardımcı oldu
Web ve özellikleri hızla gelişiyor. Artık web'de, yerel uygulamaların yapabildiği çoğu şeyi yapabilen zengin ve tam özellikli deneyimler oluşturabilirsiniz.
JavaScript, web'de etkileşimi sağlayan birincil unsurdur ancak dikkatli bir şekilde kullanılmazsa etkileşimler yavaş hissedilebilir ve kullanıcıların web sitenizin yanıt vermediğini veya tamamen bozuk olduğunu düşünmesine neden olabilir. Neyse ki Interaction to Next Paint (INP) metriği, bu belirli kullanıcı deneyimi sorununu gidermek için oluşturuldu.
INP, yaşam döngüsü boyunca bir sayfayla yapılan tüm etkileşimleri ölçer ve web sitesinin kullanıcı girişlerine yanıt verme hızını temsil eden tek bir değer bildirir. Basitçe söylemek gerekirse, bir sayfanın INP'si iyi eşiğin üzerindeyse veya bu eşiğin altındaysa sayfayla yapılan tüm etkileşimlerin güvenilir bir şekilde hızlı olduğu söylenebilir.
Hindistan merkezli bir otobüs rezervasyonu ve biletleme web sitesi olan redBus, henüz deneysel bir metrik olarak kabul edildiği dönemde bile web sitesinin INP'sini iyileştirmek için önemli bir çaba gösterdi. Bu çabalar sonucunda satışları %7 artırmayı başardılar. Bu da web performansı ile işletme sağlığı arasındaki ilişkiyi bir kez daha kanıtladı. redBus, web sitesinin INP'sini iyileştirmek için aşağıdakileri yaptı.
En önemli hedefler
redBus, web sitesinin INP'sini optimize etmeye çalışırken üç hedefi göz önünde bulundurdu:
- Ağ hızından ve cihaz özelliklerinden bağımsız olarak etkileşim gecikmesine odaklanarak kullanıcılara daha iyi bir kullanıcı deneyimi sunun.
- Etkileşimleri mümkün olduğunca hızlı tutmak için web sitelerini optimize edin.
- API'den gelen yanıtların mümkün olduğunca hafif olduğundan emin olarak ön uçta hızlı veri aktarımı sağlayın.
Yolculuk
redBus, etkileşim gecikmesini iki şekilde kategorize etti:
- İstemcide JavaScript'in engellenmesi nedeniyle oluşan etkileşim gecikmesi. Etkileşimler, ana iş parçasını engelleyen aşırı miktarda JavaScript kullandığında oluşturma işlemi gecikir ve bu da sayfanın INP'sini etkiler.
- API çağrılarından kaynaklanan ağ gecikmesi. Ağ etkinliği, INP'nin ölçtüğü bir şey olmasa da uzak bir API'ye yapılan çağrıya dayalı bir etkileşim, daha yavaş ağlarda veya istekler büyük yanıtlarla sonuçlanıyorsa yavaş hissedilebilir.
redBus başlangıçta web sitesinin INP'sinin iyi olacağından oldukça emindi ancak bu metriğin 95. yüzdelik dilimindeki Gerçek Kullanıcı İzleme (RUM) verileri farklı bir hikaye anlatıyordu.
redBus, INP'yi nasıl ölçtü?
redBus, yalnızca INP'yi değil, web sitesindeki tüm sayfalar için tüm önemli kullanıcı deneyimi metriklerini izlemek amacıyla Google tarafından oluşturulan web-vitals JavaScript kitaplığını kullandı. redBus, web-vitals JavaScript kitaplığına ek olarak kullanıcı arayüzünde toplanan INP verilerini analiz etmek için ELK'yi kullandı.
Ancak web sitenizin INP'sini sahada izleme şekliniz, redBus'un soruna yaklaşımından oldukça farklı olabilir. Web siteleriniz için INP'yi en iyi şekilde nasıl izleyeceğinizi öğrenmek üzere sahada yavaş etkileşimleri nasıl bulacağınız ve ardından etkileşimleri optimize etmeye başlamadan önce bunları laboratuvarda nasıl yeniden oluşturacağınız hakkında bilgi edinmenizi önemle tavsiye ederiz.
redBus, INP'yi izlemek için bir sistem oluşturduktan sonra, yavaş etkileşimin nerede olduğunu daha iyi anlamak için verileri analiz edebildi.
Kullanım alanları
Kullanıcılar redBus web sitesinde ücret araması yaparken, arama sayfasındaki tarihi değiştirerek istedikleri varış noktasına göre seçili ücretleri filtreleyebilir. Bu sayfada tarihi değiştirmek için yapılan etkileşim yavaştı ve INP'nin düşük olmasına neden oldu.
Ayrıca, kullanıcı ücretler arasında gezinirken ek ücretler API'den yavaşça yüklenir. Kaydırma işleminin kendisi, INP'nin nasıl ölçüldüğünde dikkate alınmasa da scroll etkinlik dinleyicisi, ana iş parçacığında çalıştırılması gereken çok sayıda işi kendisi planlar. Bu çalışma, ana iş parçacığında etkileşim gecikmesini artıran çekişmeye neden olarak arama sayfasında INP'nin düşük olmasına yol açıyordu.
redBus, arama sayfası için INP'yi nasıl optimize etti?
redBus, arama sayfasının INP'sini iyileştirmek için çeşitli optimizasyonlar yaptı:
scrolletkinlik işleyicisi, belirli bir dönemde etkinlik geri çağırma işlevinin tetiklenme sayısını azaltmak için debounce edildi.scrolletkinlik geri çağırma işlevinin çalıştırılma sıklığı düşürülerek ana iş parçacığı, arama sayfasındaki kullanıcı etkileşimlerine daha hızlı yanıt verebildi.- Elde edilen oluşturma işlemine,
requestAnimationFramegeri çağırma işlevi kullanılarak öncelik verildi.requestAnimationFrame, tarayıcıya geri çağırmadaki çalışmanın sonraki kareye kadar yapılması gerektiğini bildirir.
Ayrıca, arama sonuçları sayfasında aşağıdaki optimizasyonlar da yapıldı:
- Arama sonuçları sayfasının sondan ikinci kartında, kullanıcı deneyimini ve görsel performansı iyileştirmek için, gecikmeli yüklemeyi daha erken tetikleyerek yeni sonuç grupları getirildi.
- Yavaş yükleme sırasında her ağ çağrısında daha az sonuç getirildi. Getirme sayısını 30'dan 10 sonuça düşürerek 870-900 olan INP aralığında 350-370'e kadar düşüş gözlemlendi.
Bu değişiklikler arama sayfasının INP'sini önemli ölçüde iyileştirse de arama sayfasının giriş alanlarındaki change etkinliğinin, kullanıcı arayüzünü güncellemek için pahalı bir azaltıcı işlevi çağırması sorunu devam ediyordu. Bu durum, kullanıcı arayüzünün gereksiz yere yeniden oluşturulmasına neden olarak sayfanın INP'sini etkiledi.
redBus, bu etkileşimi optimize etmek için giriş bileşenlerinin durumunu yerel olarak yönetti ve yalnızca bir girişin blur etkinliği tetiklendiğinde Redux mağazasıyla senkronize etti. Bu değişiklik, azaltıcıyı daha seyrek çağırarak yeniden oluşturma sayısını azalttı ve kullanıcı arayüzünün istenmeyen şekilde yeniden oluşturulmasını ortadan kaldırdı.
Bu değişiklikle birlikte sayfanın INP'si %72 oranında iyileşti. Bu sayede kullanıcıların etkileşime geçme olasılığının daha yüksek olduğu daha hızlı ve sorunsuz bir kullanıcı deneyimi sağlandı.
İşletme etkisi
İşletme sağlığı ile sayfa performansı arasındaki ilişki herkes tarafından bilinir. INP, diğer Core Web Vitals'a kıyasla nispeten yeni bir metrik olsa da redBus, bu önemli kullanıcı odaklı performans metriğini iyileştirmeye odaklanarak daha iyi iş sonuçları elde etti. Sonuç olarak, satışlarda genel olarak% 7 artış elde edildi.
Özetle, INP, redBus web sitesindeki çalışma zamanı performansı sorunlarının bir resmini çizmeye yardımcı oldu. İyileştirme yapılması gerektiğini bilen redBus, sorunu gözlemleyip yeniden oluşturdu ve bu önemli bilgileri redBus'a ve işletmesine fayda sağlayacak optimizasyonlar yapmak için kullandı.