Bu örnek olayda, PageSpeed Insights (PSI), Chrome Geliştirme Araçları ve scheduler.yield API gibi Google araçlarından yararlanarak Trendyol'un React'te kullandığı INP'de hata ayıklama ve iyileştirmeyle ilgili adım adım 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 kısaltacak şekilde dikkatlice tasarlandığından emin olmanız çok önemlidir. Başarılı olmak için kullanıcı deneyimi kalitesine öncelik vermek çok önemlidir. Milliseconds Make Millions gibi araştırma yayınları, web performansının tüketicilerin para harcama ve internette markalarla etkileşim kurma istekliliği üzerindeki önemli etkisini zaten ortaya koydu.
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 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 sayfayı yeniden boyayabildiğini gösterir. Bu da iyi bir kullanıcı deneyiminin temel bileşenidir.
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 (CrUX)'na dahil edilen sayfalar için alan verileri hem de ayrıntılı laboratuvar teşhis verileri sağlar. Laboratuvar verilerine bakıldığında, Lighthouse'un JavaScript yürütme süresi denetimi, search-result-v2 komut dosyasının ana iş parçacığını sayfadaki diğer komut dosyalarından daha uzun süre kapladığını gösteriyordu.
Gerçek dünyadaki darboğazları belirlemek için PLP deneyimiyle ilgili sorunları gidermek ve sorunun kaynağını tespit etmek amacıyla Chrome DevTools'taki performans panelini kullandık. Chrome Geliştirici Araçları'nda CPU'yu 4 kat yavaşlatarak mobil performansı 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 ve bu da kötü bir kullanıcı deneyimine neden olabilir.
En uzun görev, bir React bileşenindeki arama sonuçları komut dosyasında Intersection Observer API geri çağırma işlevinden kaynaklanıyordu. Bu noktada, tarayıcıya kullanıcı etkileşimleri de dahil olmak üzere daha yüksek öncelikli işlere yanıt verme fırsatı tanımak 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.
Geliştiricilerin görevleri daha küçük görevlere bölmek için kullandığı yöntemlerden biri setTimeout'tür. setState çağrısının yürütülmesini ayrı bir göreve ertelemek için bu tekniği kullandık. setTimeout, JavaScript yürütme işleminin ertelenmesine izin verse de ö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 daha iyi bir INP'ye 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ır.
Trendyol'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ının acil işler yapması için zaman zaman ana iş parçacığına yol vermek, web sitenizi daha duyarlı hale getirir ve 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 katkıda bulunan Google'dan Jeremy Wagner, Barry Pollard ve Houssein Djirdeh ile Trendyol'un Mühendislik Ekibi'ne özel teşekkürler.