Trendyol, INP'yi %50 azaltarak tıklama oranında nasıl% 1 artış sağladı?

Bu örnek olayda, INP'de hata ayıklama ve iyileştirme adımlarıyla ilgili iş akışı açıklanmaktadır. in React'te, Trendyol tarafından PageSpeed gibi Google araçlarından yararlanılır Analizler (PSI), Chrome Geliştirici Araçları ve scheduler.yield API.

Mustafa Birinci

Gilberto Cocchi

Thierno Thiam

Tüm e-ticaret web sitelerinin iki önemli bileşeni Ürün Listeleme Sayfasıdır (PLP) ve Ürün Ayrıntısı Sayfası (PDP). E-ticaret trafiği genellikle ürün listeleme sayfaları (e-posta kampanyaları, sosyal medya veya reklamlar. Bu nedenle, PLP deneyiminin doğru olması , satın alma süresini kısaltmak için özenle tasarlanmışlardır. Önceliklendirme kullanıcı deneyiminin kalitesi başarı için esastır. Araştırma yayınları Milisaniyeler Milyonlarca Yıl gibi önemli yatırımları şimdiden gözler önüne sermişti. web performansının tüketicilerin üzerindeki etkisi para harcama ve etkileşim kurma isteği yardımcı olmaktır.

Trendyol, yaklaşık 30 milyon müşterisi olan bir e-ticaret platformudur ve 240.000 satıcı, bu satış sayesinde Türkiye'deki ilk işletmemiz oldu. Değeri 10 milyar ABD dolarının üzerinde olan ve dünyanın en iyi e-ticaret platformlarından sahip olacaksınız.

Geniş ölçekte mümkün olan en iyi kullanıcı deneyimini sağlama hedefine ulaşmak için aynı zamanda içeriğin esnekliğini korurken ve içeriğin eski bir sürümüyle React, Trendsol, Sonraki Boyamayla Etkileşim (INP) metriğine odaklanarak yardımcı olabilir. Bu örnek olay incelemesinde, trendol'un dijital reklamcılıkta INP'yi iyileştirme yolculuğu PLP sayesinde INP'de% 50 azalma ve aramada % 1 artış elde edildi sonuç iş metriğini kullanın.

trendol'un INP inceleme süreci

INP, bir web sitesinin kullanıcı girişlerine duyarlılığı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 verebilmesini ve sayfayı yeniden boyayabiliriz. Bu, iyi bir kullanıcı deneyiminin temel bileşenidir.

trendol'un PLP'sinde INP'yi iyileştirme yolculuğu, kullanıcı deneyimini iyileştirmeye yardımcı olur. PSI raporuna göre PLP'nin gerçek kullanıcı deneyimi 963 milisaniyelik bir INP mobil uyumlu olacaktır.

Popülerol'un 5 Eylül 2023 itibarıyla PSI'dan INP'si.

İyi yanıt verebilmek için site sahipleri, INP kapsamında veya altında 200 milisaniye gösterir. Bu sırada, trendol'un INP'sinin "kötü" aralığı.

Neyse ki PSI, Chrome Kullanıcısı Deneyim Raporu (CrUX) ve ayrıntılı laboratuvar teşhis verileri. Laboratuvara göz atma Lighthouse'un JavaScript yürütme süresi denetimi, search-result-v2 komut dosyası, ana iş parçacığını diğerlerine göre daha uzun süre işliyor kontrol edebilirsiniz.

trendol'un Eylül ayı itibarıyla Lighthouse tarafından yürütülen JavaScript Yürütme Süresi denetimi PSI, 5. 2023.

Gerçek dünyadaki performans sorunlarını belirlemek için Chrome'daki performans panelini kullandık. Geliştirici Araçları'nı kullanarak PLP deneyimiyle ilgili sorunları giderebilir ve . Chrome Geliştirici Araçları'nda 4 kat CPU yavaşlaması ile mobil performans emülasyonu ana iş parçacığında 700-900 milisaniye uzunluğunda bir görev ortaya çıkardı. Temel iş parçacığı 50 milisaniyeden uzun süre boyunca başka görevlerle doluysa kullanıcı girişlerine zamanında yanıt verememesine, bu da kötü performansa en iyi uygulamaları paylaşacağız.

Popülerol'un PLP'sindeki uzun görevlerin performans profili oluşturucusu paneline gidin.

En uzun görev arama sonuçları komut dosyasını çalıştırın. Bu noktada, o uzun görevi küçük parçalara bölmeye çalışarak kullanıcı etkileşimleri de dahil olmak üzere daha yüksek öncelikli işlere yanıt verme fırsatları sunar.

React'i tetikleyen setState işlemini kullanmanın Intersection Observer geri çağırması içinde yeniden oluşturma işlemi yüksek bir maliyete sahiptir. Bu, ana iş parçacığını işleyerek alt segment cihazlarda soruna neden çok uzun.

Geliştiricilerin görevleri daha küçük görevlere ayırmak için kullandığı yöntemlerden biri setTimeout içerir. Bu tekniği, şemanın yürütülmesini setState çağrısı ayrı bir göreve dönüştürülecek. setTimeout, ertelemeye izin verse de JavaScript'in çalıştırılmasına rağmen, öncelik üzerinde herhangi bir kontrol sağlamaz. Bu lider scheduler.yield kaynak denemesine katılmamızı ana ileti dizisine verildikten sonra komut dosyası yürütme işlemimize devam etme:

/*
* 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 });

PLP koduna bu getiri yönteminin eklenmesi, ana uzun görev daha küçük görevlere bölündü ve bu da ve sonraki işlemler (ör. kullanıcı etkileşimleri ve sonraki oluşturma işlemleri) daha erken gerçekleşebilir.

Görev daha küçük görevlere bölündü.

Trendol'un mikro ön uç uygulamak için PuzzleJs çerçevesini kullandığını unutmayın. mimari. React 18 ile aynı performans başarılı oldu, ancak bir dizi nedenden dolayı, trendol şu anda gerekir.

İşletme sonuçları

Uygulanan INP iyileştirmesinin etkisini ölçmek için, potansiyel müşteri elde etmemizi sağlayan işletme metriklerinin nasıl etkilendiğini görebilirsiniz. Genel olarak, PLP'de yaptığımız değişiklikler %50'lik bir INP ve %1'lik bir INP düşüşü dahil, önemli bir iyileşme sağladı. ilanlar sayfasından ürün ayrıntıları sayfasına kadar tıklama oranlarında artış kullanıcı oturumu başına belirlemeniz gerekir. Aşağıdaki şekilde, INP'nin Zaman içinde PLP:

Zaman içinde INP iyileşmeleri: 75. yüzdelik dilim.

Sonuç

INP optimizasyonu karmaşık ve yinelemeli bir süreçtir ancak daha kolay hale getirilebilir. ortaya çıkarmanıza yardımcı olabilir. Hata ayıklamak ve web sitesinin INP'si, kendi alan verilerinizi toplayıp toplamadığınıza bağlıdır. Şu durumda: değil, PSI ve Lighthouse iyi bir başlangıç noktasıdır. Hedef kitlenizin bu sorunu çözmek için Geliştirici Araçları'nı kullanarak sorunları.

Tarayıcıya daha fazla içerik sunmak için zaman zaman ana ileti dizisine verim sağlama acil durum fırsatları, web sitenizin yanıt verme hızını artırır. Böylece, daha iyi bir kullanıcı deneyimi yaşattığını gösterir. Daha yeni planlama API'leri scheduler.yield() gibi özellikler bu görevi kolaylaştırır.

Jremy Wagner, Barry Pollard ve Houssein Djirdeh'e Google'a ve Trendsol'un Mühendislik Ekibi'ne gönderiyorum.