redBus, web sitesi' Next Paint ile Etkileşimi (INP) iyileştirdi ve satışlarını nasıl %7 artırdı?

INP optimizasyonları redBus'ın satışlarını yaklaşık %7 artırmasına yardımcı oldu

Amit Kumar

Saurabh Rajpal

Web ve özellikleri hızla gelişiyor. Artık yerel uygulamaların yetenekleri açısından yapabileceklerinin çoğunu gerçekleştirebilen, web'de zengin ve tam özellikli deneyimler oluşturabilirsiniz.

JavaScript, web'deki etkileşimi artıran başlıca faktörlerden biridir. Ancak, dikkatli bir şekilde kullanılmadığı takdirde etkileşimler yavaşlayabilir ve kullanıcıların web sitenizin yanıt vermediğini veya tamamen bozuk olduğunu algılamasına neden olabilir. Neyse ki bu kullanıcı deneyimi sorununu gidermek için Sonraki Boyamayla Etkileşim (INP) metriği oluşturuldu.

INP, bir sayfayla yaşam döngüsü boyunca gerçekleşen tüm etkileşimleri ölçer ve bir web sitesinin kullanıcı girişlerine yanıt verme hızını temsil eden tek bir değer bildirir. Basitçe ifade etmek gerekirse, bir sayfanın INP'si iyi eşik değerinde veya altındaysa sayfayla gerçekleştirilen tüm etkileşimlerin güvenilir bir şekilde hızlı olduğu söylenebilir.

Hindistan merkezli bir otobüs rezervasyon ve bilet web sitesi olan redBus, deneysel bir metrik olarak kabul edildiği dönemde bile web sitesinin INP'sini iyileştirmek için büyük çaba sarf etti. Bu çalışmaların sonucunda, satışlarını %7 artırmayı başardılar. Bu da web performansı ile iş sağlığı arasındaki ilişkiyi bir kez daha gösteriyor. redBus'ın web sitesinin INP'sini iyileştirmek için neler yaptığını öğrenin.

En yüksek hedefler

redBus, web sitesinin INP'sini optimize etmek için yola çıktığında aklında üç hedef vardı:

1. 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.
2. Etkileşimin mümkün olduğunca hızlı sürmesi için web sitesini optimize etme.
3. Kullanıcı arabirimine hızlı veri aktarımı sağlamak için API'lerinden gelen yanıtların mümkün olduğunca hafif olduğundan emin olma.

Yolculuk

redBus etkileşim gecikmesini iki şekilde sınıflandırmıştır:

1. İstemcide JavaScript'in engellenmesinden kaynaklanan etkileşim gecikmesi. Etkileşimlerde ana iş parçacığını engelleyen çok fazla JavaScript kullanılması durumunda oluşturma gecikir ve bu durum sayfanın INP'sini etkiler.
2. API çağrılarının neden olduğu ağ gecikmesi. Ağ etkinliği, INP'nin ölçtüğü bir şey olmasa da uzak API'ye yapılan bir çağrıya dayalı bir etkileşim yavaş ağlarda veya istekler büyük yanıtlarla sonuçlanıyorsa yavaş gelebilir.

redBus, başlangıçta web sitesinin INP'sinin iyi olacağına güveniyordu. Ancak bu metriğin 95. yüzdelik dilimindeki Gerçek Kullanıcı İzleme (RUM) verileri farklı bir durum gösteriyordu.

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 için Google tarafından oluşturulan web-vitals JavaScript kitaplığından yararlandı. redBus, web-vitals JavaScript kitaplığına ek olarak, kullanıcı arabiriminde toplanan INP verilerini analiz etmek için ELK'yı kullandı.

Ancak, web sitenizin INP'sini alanda izleme şekliniz, redBus'ın soruna yaklaşımından oldukça farklı olabilir. Web siteleriniz için INP'yi en iyi şekilde nasıl izleyebileceğinizi öğrenmek amacıyla alandaki yavaş etkileşimleri bulma ve etkileşimleri optimize etmeye başlamadan önce bunları laboratuvarda yeniden oluşturma hakkında bilgi edinmenizi önemle tavsiye ederiz.

redBus, INP takibi için bir sistem kullanmaya başladıktan sonra, etkileşimin yavaş olduğu yerleri daha iyi anlamak üzere verileri analiz edebildi.

Sahadan toplanan INP değerlerini analiz etmek için redBus tarafından kullanılan günlük kaydı sisteminin ekran görüntüsü. (Bu resmin daha yüksek çözünürlüklü sürümünü için tıklayın.)

Kullanım alanları

Kullanıcılar redBus web sitesinde fiyat araması yaparken, istenilen varış noktası için seçilen ücretleri filtrelemek üzere arama sayfasındaki tarihi değiştirebilir. Bu sayfadaki tarihi değiştirme etkileşimi yavaştı ve kötü INP'ye neden oluyordu.

Ayrıca, kullanıcı fiyatlar arasında gezindiğinde ek ücretler API'den geç yüklenir. INP'nin ölçülmesinde kaydırmanın kendisi dikkate alınmasa da scroll etkinlik işleyicinin kendisi, ana iş parçacığında çalıştırılması gereken birçok iş planlar. Bu çalışma, ana iş parçacığında çakışmaya neden olarak etkileşim gecikmesini artırdı ve bu da arama sayfasında zayıf INP'ye yol açıyordu.

Kaydırma sırasında API'den ek ücretler yüklemek için kullanılan geç yükleme davranışı. (Bu videonun daha yüksek çözünürlüklü sürümünü görmek için tıklayın.)

redBus, INP'yi arama sayfası için nasıl optimize etti?

Arama sayfasının INP'sini iyileştirmek için redBus çeşitli optimizasyonlar yaptı:

• scroll etkinlik işleyicisi, etkinlik geri çağırma işleminin belirli bir dönemde tetiklenme sayısını azaltmak için deponu geri alındı. scroll etkinlik geri çağırma sıklığını azaltarak ana ileti dizisi, arama sayfasındaki kullanıcı etkileşimlerine daha hızlı yanıt verebildi.
• Ortaya çıkan oluşturma çalışmasına requestAnimationFrame geri çağırması kullanılarak öncelik verildi. requestAnimationFrame tarayıcıya, geri çağırma işleminin bir sonraki kareden önce yapılması gerektiğini bildirir.

Öncesi: etkinlik geri çağırmaya, geri döndürme olmadan tetiklenen kaydırma işleyicileri uygulandı. Ana iş parçacığında, etkileşimleri geciktirecek çok sayıda engelleme görevi mevcut.

Sonra: Ardışık geri döndürme uygulanmış kaydırma işleyicileri etkin. Kaydırma etkinliği geri çağırmaları daha seyrek etkinleşerek ana ileti dizisine kullanıcı etkileşimlerine yanıt vermesi için daha fazla fırsat tanır.

Ayrıca, arama sonuçları sayfasında aşağıdaki ek optimizasyonlar yapıldı:

• Yeni sonuç grupları, geç yüklemeyi daha erken tetikleyerek kullanıcı deneyimini ve görsel performansı iyileştirmek amacıyla, arama sonuçları sayfasındaki ikinci ve son karttan getirildi.
• Geç yükleme sırasında her ağ çağrısında daha az sonuç getirildi. Getirmeler 30'dan 10'a azaltıldığında, INP aralıklarında 870-900 ila 350-370 arasında bir düşüş gözlemlendi.

Kaydırma sırasında API'den ek ücretler yüklemek için kullanılan geç yükleme davranışı. (Bu videonun daha yüksek çözünürlüklü sürümünü görmek için tıklayın.)

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, kullanıcı arayüzünün gereksiz şekilde yeniden oluşturulmasına yol açarak sayfanın INP'sini etkiledi.

Kullanıcı bir giriş alanına yazarken konsolda INP değerleri raporlanır. Sonuç olarak, laboratuvar ortamında gözlemlenen 344 INP değeri, "iyileştirme gerekli" eşikleri dahilindedir. (Bu videonun daha yüksek çözünürlüklü sürümünü görmek için tıklayın.)

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 deposuyla senkronize etti. Bu değişiklik, yeniden oluşturma sayısını azalttı ve azaltıcıyı daha az çağırarak kullanıcı arayüzünün istenmeyen şekilde yeniden oluşturulmasını ortadan kaldırdı.

Giriş alanı değişikliğinde azaltıcının daha seyrek çağrılmasıyla INP iyileştirildi. (Bu videonun daha yüksek çözünürlüklü sürümünü görmek için tıklayın.)

Bu değişiklik sayesinde sayfanın INP'si %72 iyileşti ve kullanıcıların etkileşime girme ihtimalinin yüksek olduğu daha hızlı ve sorunsuz bir kullanıcı deneyimi sağlandı.

İşletme etkisi

İşletmenin durumu ile sayfa performansı arasındaki ilişki herkesçe bilinen bir durumdur. INP, diğer Core Web Vitals'a kıyasla nispeten yeni bir metrik olsa da redBus, bu önemli kullanıcı merkezli performans metriğini iyileştirmeye odaklanarak daha iyi iş sonuçları elde etti. Sonuç olarak, satışlarda toplam% 7 artış elde edildi.

Kısacası, INP, redBus web sitesindeki çalışma zamanı performansıyla ilgili sorunların ortaya çıkarılmasına yardımcı oldu. Yapılacak iyileştirmeler olduğunun bilincinde olan redBus, sorunu gözlemlemeyi, yeniden üretmeyi ve bu önemli bilgileri redBus ile işleri açısından faydalı optimizasyonlar yapmak için kullanmayı başardı.