Web ve yetenekleri hızla gelişiyor. Artık, yerel uygulamaların yetenekler açısından yapabildiklerinin çoğunu elde edebilen, web üzerinde zengin ve tam özellikli deneyimler oluşturabilirsiniz.
JavaScript, web genelinde etkileşim için birincil itici güçtür, ancak dikkatli kullanılmazsa, etkileşimler ağır gelebilir ve kullanıcıların web sitenizi yanıt vermiyor veya tamamen bozuk olarak algılamasına neden olabilir. Neyse ki, Etkileşim to Next Paint (INP) metriği, bu belirli kullanıcı deneyimi sorununu çözmek için oluşturuldu.
INP, yaşam döngüsü boyunca bir sayfayla yapılan 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 söylemek gerekirse, bir sayfanın INP’si iyi eşikte veya altındaysa, bir sayfayla yapılan tüm etkileşimlerin güvenilir bir şekilde hızlı olduğu söylenebilir.
kırmızı otobüsHindistan merkezli bir otobüs rezervasyonu ve biletleme web sitesi olan , web sitelerinin INP’sini iyileştirmek için, bunun hala deneysel bir ölçüm olarak kabul edildiği zamanlarda bile önemli bir çaba sarf etti. Çabaları sonucunda satışlarını %7 artırmayı başardılar ve web performansı ile iş sağlığı arasındaki ilişkiyi bir kez daha gözler önüne serdiler. İşte redBus’un web sitelerinin INP’sini iyileştirmek için yaptıkları.
En iyi goller #
redBus, web sitelerinin INP’sini optimize etmek için yola çıktığında, akıllarında üç hedef vardı:
- Ağ hızı ve cihaz özelliklerinden bağımsız olarak etkileşim gecikmesine odaklanarak kullanıcılar için daha iyi bir kullanıcı deneyimi sağlayın.
- Etkileşimleri olabildiğince hızlı tutmak için web sitelerini optimize edin.
- Kullanıcı arabirimine hızlı veri aktarımı sağlamak için API’lerinden gelen yanıtların olabildiğince hafif olduğundan emin olun.
Yolculuk #
redBus, etkileşim gecikmesini iki şekilde kategorize etti:
- İstemcide JavaScript’in engellenmesinden kaynaklanan etkileşim gecikmesi. Etkileşimler, ana ileti dizisini engelleyen aşırı JavaScript kullandığında, oluşturma gecikir ve bu, bir 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 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ırsa ağır gelebilir.
redBus başlangıçta web siteleri için INP’nin iyi olacağından oldukça emindi, ancak Gerçek Kullanıcı İzleme (RUM) Bu ölçüm için 95. yüzdelik dilimdeki veriler farklı bir hikaye anlatıyordu.
redBus INP’yi nasıl ölçtü? #
redBus’a güveniyordu web-vitals JavaScript kitaplığı Google tarafından yalnızca INP’yi değil, web sitelerindeki tüm sayfalar için tüm önemli kullanıcı deneyimi metriklerini izlemek üzere oluşturulmuştur. Buna ek olarak web-vitals JavaScript kitaplığı, kullanılan redBus geyik ön uçta toplanan INP verilerini analiz etmek için.
Ancak, web sitenizin INP’sini sahada nasıl takip ettiğiniz, redBus’un soruna yaklaşımından oldukça farklı olabilir. Etkileşimleri optimize etmeye başlamadan önce, web siteleriniz için INP’yi en iyi şekilde nasıl izleyeceğinizi ve ardından bunları laboratuvarda nasıl yeniden oluşturacağınızı öğrenmek için sahada yavaş etkileşimleri nasıl bulacağınızı okumanızı önemle tavsiye ederiz.
redBus, INP’yi izlemek için bir sisteme sahip olduğunda, yavaş etkileşimin nerede mevcut olduğunu daha iyi anlamak için verileri analiz edebildi.
Kullanım örnekleri #
Kullanıcılar redBus web sitesinde ücret aradıklarında, istenen varış noktası için seçilen ücretleri filtrelemek için arama sayfasındaki tarihi değiştirebilirler. Bu sayfadaki tarihi değiştirme etkileşimi yavaştı ve zayıf INP’nin nedeniydi.
Ek olarak, bir kullanıcı ücretler arasında gezindiğinde, ek ücretler API’den gecikmeli olarak yüklenir. Kaydırmanın kendisi INP’nin nasıl ölçüldüğüne dahil edilmese de, scroll olay dinleyicisinin kendisi, ana iş parçacığında çalışması gereken birçok işi zamanlar. Bu çalışma, ana ileti dizisinde etkileşim gecikmesini artıran ve arama sayfasında zayıf INP’ye yol açan çekişmeye neden oluyordu.
redBus, arama sayfası için INP’yi nasıl optimize etti? #
Arama sayfasının INP’sini iyileştirmek için redBus birkaç optimizasyon yaptı:
- bu
scrollolay geri aramasının belirli bir dönemde tetiklenme sayısını azaltmak için olay işleyicisi iptal edildi. Frekansı düşürerekscrollolay geri araması çalıştırıldığında, ana ileti dizisi, arama sayfasındaki kullanıcı etkileşimlerine daha hızlı yanıt verebildi. - Ortaya çıkan işleme işine bir öncelik kullanılarak öncelik verildi
requestAnimationFramegeri çağırmak.requestAnimationFrametarayıcıya geri aramadaki çalışmanın bir sonraki çerçeveden önce yapılması gerektiğini söyler.
Ayrıca, arama sonuçları sayfasında aşağıdaki iyileştirmeler yapılmıştır:
- Yavaş yüklemeyi daha erken tetikleyerek kullanıcı deneyimini ve görsel performansı iyileştirmek için arama sonuçları sayfasında sondan ikinci kartta yeni sonuç grupları getirildi.
- Gecikmeli yükleme sırasında her ağ aramasında daha az sonuç alındı. Getirme sonuçları 30’dan 10’a düşürülerek, INP aralıklarında 870’ten 900’e, 350’den 370’e düşüş gözlemlendi.
Bu değişiklikler, arama sayfasının INP’sini önemli ölçüde iyileştirmiş olsa da, change arama sayfasının giriş alanlarındaki olay, kullanıcı arayüzünü güncellemek için pahalı bir indirgeyici işlevi çağırır. Bu, sayfanın INP’sini etkileyen kullanıcı arayüzünün gereksiz yere yeniden oluşturulmasıyla sonuçlandı.
Bu etkileşimi optimize etmek için redBus, giriş bileşenlerinin durumunu yerel olarak yönetti ve Redux sadece bir giriş olduğunda sakla blur olay atıldı. Bu değişiklik, yeniden oluşturma sayısını azalttı ve indirgeyiciyi daha seyrek çağırarak kullanıcı arayüzünün istenmeyen yeniden oluşturma işlemini ortadan kaldırdı.
Bu değişiklikle birlikte, sayfanın INP’si %72 oranında iyileşerek, kullanıcıların etkileşimde bulunma olasılığının daha yüksek olduğu daha hızlı ve sorunsuz bir kullanıcı deneyimi sağladı.
iş etkisi #
İş sağlığı ve sayfa performansı arasındaki ilişki iyi bilinmektedir. INP, diğer Önemli Web Verileri ile karşılaştırıldığında nispeten yeni bir ölçü olsa da redBus, bu önemli kullanıcı merkezli performans ölçütünü iyileştirmeye odaklanarak daha iyi iş sonuçları gözlemledi. Sonuç, satışlarda genel olarak %7’lik bir artış oldu.
Kısacası INP, redBus web sitesinde çalışma zamanı performans sorunlarının bir resmini çizmeye yardımcı oldu. RedBus, yapılması gereken iyileştirmeler olduğu bilgisiyle sorunu gözlemleyebildi, yeniden oluşturabildi ve bu önemli bilgileri redBus ve işi için faydalı olan optimizasyonlar yapmak için kullanabildi.