INP optimizasyonları redBus'ın satışlarını yaklaşık %7 artırmasına yardımcı oldu
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ı:
- 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şimin mümkün olduğunca hızlı sürmesi için web sitesini optimize etme.
- 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:
- İ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.
- 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.
![Analiz için INP değerlerini raporlayan ELK günlük kaydı sisteminin ekran görüntüsü.](https://web.dev/static/case-studies/redbus-inp/image/a-screenshot-the-elk-log-c6a6705d23588.png?authuser=6&hl=tr)
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.
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.
![Chrome Geliştirici Araçları'ndaki performans panelinin ekran görüntüsünde, redBus web sitesinin kaydırma etkinliği geri çağırmalarını (geri döndürülmemiş) gösterdiği gösteriliyor. Sonuç olarak, ana iş parçacığı engellenir.](https://web.dev/static/case-studies/redbus-inp/image/a-screenshot-the-perform-59051431069ff.jpg?authuser=6&hl=tr)
![Chrome Geliştirici Araçları'ndaki performans panelinin ekran görüntüsünde, redBus web sitesinin açılan kaydırma etkinliği geri çağırmalarını gösterdiği görülüyor. Sonuç olarak, kaydırma etkinlik işleyicileri çok daha seyrek etkinleştiğinden ana iş parçacığı daha az engellenmiş olur.](https://web.dev/static/case-studies/redbus-inp/image/a-screenshot-the-perform-3a78c8f47d6e1.jpg?authuser=6&hl=tr)
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.
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.
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ı.
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ı.