Bu örnek olayda, PageSpeed Insights (PSI), Chrome DevTools ve scheduler.yield API gibi Google araçlarından yararlanarak Trendyol tarafından kullanılan React'te INP hata ayıklama ve iyileştirme adımlarına yönelik adım adım bir iş akışı açıklanmaktadır.
Herhangi bir e-ticaret web sitesinin iki önemli bileşeni ürün listeleme sayfası (PLP) ve ürün ayrıntıları sayfasıdır (PDP). E-ticaret trafiği genellikle e-posta kampanyaları, sosyal medya veya reklamlar aracılığıyla ürün listeleme sayfalarından gelir. Bu nedenle, PLP deneyiminin satın alma işleminin süresini azaltacak şekilde dikkatlice tasarlandığından emin olmanız çok önemlidir. Kullanıcı deneyimi kalitesine öncelik vermek başarı için esastır. Milliseconds Make Milons gibi araştırma yayınları, web performansının tüketicilerin para harcama ve markalarla internet üzerinden etkileşim kurma isteği üzerindeki önemli etkisini daha önce ortaya koymuştur.
Yaklaşık 30 milyon müşterisi ve 240.000 satıcısı olan bir e-ticaret platformu olan Trendyol, bizi 10 milyar doların üzerinde değere sahip Türkiye'deki ilk şirket ve dünyanın en iyi e-ticaret platformlarından biri haline getirdi.
Trendyol, içerik esnekliğini korurken React'in eski bir sürümüyle çalışarak geniş ölçekte mümkün olan en iyi kullanıcı deneyimini sunma hedefine ulaşmak için iyileştirilmesi gereken önemli bir metrik olarak Interaction to Next Paint (INP)'e odaklandı. Bu örnek olayda, Trendyol'un PLP'sinde INP'yi iyileştirme yolculuğu anlatılmaktadır. Bu yolculuk sonucunda INP'de %50 oranında bir düşüş ve arama sonucu işletme metriğinde %1 artış elde edilmiştir.
Trendyol'un INP soruşturma süreci
INP, bir web sitesinin kullanıcı girişine yanıt verme hızını ölçer. İyi bir INP, tarayıcının tüm kullanıcı girişlerine hızlı ve güvenilir bir şekilde yanıt verebildiğini ve iyi bir kullanıcı deneyiminin önemli bir bileşeni olan sayfayı yeniden boyayabildiğini gösterir.
Trendyol'un PLP'sindeki INP'yi iyileştirme yolculuğu, herhangi bir iyileştirme yapılmadan önce kullanıcı deneyiminin kapsamlı bir analiziyle başladı. Bir PSI raporuna göre, PLP'nin gerçek kullanıcı deneyiminde, sonraki resimde gösterildiği gibi mobil cihazlarda 963 milisaniye INP vardı.
Site sahiplerinin, iyi bir yanıt vermeyi sağlamak için 200 milisaniyenin altında veya 200 milisaniyede bir INP elde etmeyi hedeflemesi gerekir. Bu, o dönemde Trendyol'un INP'sinin "kötü" aralıkta olduğu anlamına gelir.
Neyse ki PSI, hem Chrome Kullanıcı Deneyimi Raporu'nda (CrUX) yer alan sayfalar için hem de ayrıntılı laboratuvar teşhis verileri için alan verilerini sağlar. Lighthouse'un JavaScript yürütme süresi denetimi, laboratuvar verilerine bakıldığında search-result-v2 komut dosyasının sayfadaki diğer komut dosyalarından daha uzun bir süre ana iş parçacığını işgal ettiğini gösterdi.
Gerçek dünyadaki darboğazları belirlemek için Chrome DevTools'taki performans panelini kullanarak PLP deneyimiyle ilgili sorunları giderip sorunun kaynağını tespit ettik. Chrome Geliştirici Araçları'nda mobil performansı 4 kat CPU yavaşlatarak taklit ettiğimizde ana mesaj dizisinde 700-900 milisaniye uzunluğunda bir görev olduğunu tespit ettik. Ana iş parçacığı 50 milisaniyeden uzun süre boyunca diğer görevlerle meşgulse kullanıcı girişlerine zamanında yanıt veremeyebilir. Bu da kötü bir kullanıcı deneyimine neden olur.
En uzun görev, bir React bileşeni içindeki arama sonuçları komut dosyasındaki Intersection Observer API geri çağırmasından kaynaklandı. Bu noktada, tarayıcıya kullanıcı etkileşimleri de dahil olmak üzere daha yüksek öncelikli işlere yanıt verme fırsatı sunmak için bu uzun görevi küçük parçalara ayırmaya başladık.
Intersection Observer geri çağırma işlevi içinde React yeniden oluşturma işlemini tetikleyen setState işleminin kullanılmasının yüksek maliyetli olduğu ortaya çıktı. Bu işlem, ana iş parçacığına çok uzun süre boyunca yer vererek düşük kaliteli cihazlar için sorunlu olabilir.
setTimeout, geliştiricilerin görevleri daha küçük görevlere ayırmak için kullandıkları yöntemlerden biridir. Bu tekniği, setState çağrısının yürütülmesini ayrı bir göreve ertelemek için kullandık. setTimeout, JavaScript'in yürütülmesinin ertelenmesine olanak tanısa da öncelik üzerinde herhangi bir kontrol sağlamaz. Bu nedenle, ana iş parçacığına verdikten sonra komut dosyası yürütme işlemimizin devam etmesini sağlamak için scheduler.yield kaynak deneme sürümüne katıldık:
/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
if('scheduler' in window && 'yield' in scheduler) {
return await scheduler.yield();
}
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
entries.forEach(handleIntersection);
const maxNumberOfEntries = Math.max(...this.intersectingEntries);
if (Number.isFinite(maxNumberOfEntries)) {
await this.yieldToMain();
this.setState({ count: maxNumberOfEntries });
}
}, { threshold: 0.5 });
Bu vermeyi yöntemini PLP koduna eklemek, ana uzun görev bir dizi küçük göreve bölündüğü için INP'nin iyileştirilmesine neden oldu. Bu da kullanıcı etkileşimleri ve sonraki oluşturma çalışmaları gibi daha yüksek öncelikli işlerin normalden daha erken yapılmasına olanak tanıdı.
Trendol'un, React v16.9.0'ı kullanarak mikro ön uç mimarisi uygulamak için PuzzleJs çerçevesini kullandığını unutmayın. React 18 ile aynı performansa ulaşılabiliyor ancak Trendyol, çeşitli nedenlerden dolayı şu anda yükseltme yapamıyor.
İşletme sonuçları
Uygulanan INP iyileştirmesinin etkisini ölçmek için işletme metriklerinin nasıl etkilendiğini görmek üzere bir A/B testi çalıştırdık. Genel olarak PLP'de yaptığımız değişiklikler, INP'de %50 oranında düşüş ve kullanıcı oturumu başına listeleme sayfasından ürün ayrıntıları sayfasına tıklama oranlarında %1 artış da dahil olmak üzere önemli bir iyileşme sağladı. Aşağıdaki şekilde, INP'nin PLP'de zaman içinde nasıl iyileştiğini görebilirsiniz:
Sonuç
INP'yi optimize etmek karmaşık ve yinelemeli bir süreçtir ancak net bir iş akışı ile daha kolay hale getirilebilir. Web sitenizin INP'sinde hata ayıklama ve iyileştirme için basit bir yaklaşım, kendi saha verilerinizi toplayıp toplamadığınıza bağlıdır. Aksi takdirde PSI ve Lighthouse iyi bir başlangıç noktası olabilir. Sorunlu sayfaları belirledikten sonra, sorunları yeniden oluşturmak için daha ayrıntılı inceleme yapmak üzere Geliştirici Araçları'nı kullanabilirsiniz.
Tarayıcıya acil işler için daha fazla fırsat vermek amacıyla zaman zaman ana ileti dizisine vermek, web sitenizi daha duyarlı hale getirerek müşterilerinizin daha iyi bir kullanıcı deneyimi yaşamasını sağlar. scheduler.yield() gibi yeni planlama API'leri bu görevi kolaylaştırır.
Bu çalışmaya yaptıkları katkılardan dolayı Google'dan Jeremy Wagner, Barry Pollard, Houssein Djirdeh veTrendol'un Mühendislik Ekibi'ne özel teşekkürlerimizi sunuyoruz.