İçerik önerisi sağlayıcısı Taboola, LoAF'yi kullanarak yayıncı iş ortağı web siteleri için INP'yi nasıl% 36'ya kadar iyileştirdi?

Long Animation Frames API (LoAF)'den yararlanmanın ve akıllı bir getiri stratejisi uygulamanın, Taboola'nın reklam performansından ödün vermeden yayıncıların web sitesi yanıt hızını iyileştirmesini nasıl sağladığı.

David Belford

Thierno Thiam

Interaction to Next Paint (INP), bir web sitesinin kullanıcı girişine verdiği yanıtı değerlendiren bir metriktir. INP, kullanıcının etkileşime başladığı andan (ör. tıklama, dokunma veya yazma) görsel geri bildirime kadar geçen süreyi ölçer. INP, Mart 2024'te Core Web Vital olarak First Input Delay'in (FID) yerini alacak.

Taboola, açık web'de saniyede 500.000 öneri sunan,dünyanın önde gelen içerik keşif platformudur. Bu öneriler,Taboola'nın 9.000 özel yayıncı iş ortağının kitlelerinden para kazanmasını ve kitleleriyle etkileşim kurmasını sağlar. Yayıncılar, sayfalarındaki önerileri JavaScript kullanarak oluşturur.

Üçüncü taraf JavaScript, bir sayfanın kullanıcı girişine hızlı yanıt verme özelliğini etkileyebileceğinden Taboola, JavaScript dosyalarının boyutunu ve yürütme süresini azaltmak için büyük yatırımlar yapmıştır. Taboola, INP üzerindeki etkisini en aza indirmek için tüm oluşturma motorunu yeniden tasarlıyor ve tarayıcı API'lerini doğrudan, soyutlamalar olmadan kullanıyor.

Bu örnek olay çalışmasında, Taboola'nın INP'yi iyileştirme yolculuğu ele alınmaktadır. Bu yolculukta, yeni Long Animation Frames (LoAF) API'si kullanılarak INP'nin alandaki sayfa yanıt verme hızı üzerindeki etkisi ölçülmüş ve ardından kullanıcı deneyimini iyileştirmek için belirli optimizasyonlar uygulanmıştır.

INP'nin proxy'si olarak TBT

Total Blocking Time (TBT), ana iş parçacığının sayfa yanıt verme hızını etkileyecek kadar uzun süre engellendiği yerleri belirleyen, laboratuvar tabanlı bir metriktir. INP gibi yanıt verme hızını ölçen alan metrikleri, yüksek TBT'den etkilenebilir. Annie Sullivan'ın mobil cihazlarda TBT ile INP arasındaki korelasyonu incelediği bir araştırma, ana iş parçacığı engelleme süresi en aza indirildiğinde sitelerin iyi INP puanları alma olasılığının daha yüksek olduğunu gösteriyor.

Bu korelasyon, Taboola'nın yayıncılarının yüksek TBT ile ilgili endişeleriyle birleşince Taboola'nın bu metriğe katkısını en aza indirmeye odaklanmasına neden oldu.

Taboola, INP için proxy metriği olarak TBT'yi kullanarak JavaScript yürütme süresini izlemeye ve optimize etmeye başladı. Böylece, JavaScript'in Önemli Web Verileri üzerindeki olası etkisi sınırlandırıldı. Bu amaçla aşağıdaki adımları uyguladılar:

• Long Tasks API'yi kullanarak alandaki sorunlu komut dosyalarını tanımlama ve optimize etme.
• Her gün 10.000 ila 15.000 URL'yi değerlendirmek için PageSpeed Insights API'yi kullanarak TBT katkılarını tahmin etme.

Ancak Taboola, TBT'nin bu araçlarla analiz edilmesinin bazı sınırlamaları olduğunu fark etti:

• Uzun Görevler API'si, görevi kaynak alanına veya belirli bir komut dosyasına atfedemez. Bu nedenle, uzun görevlerin kaynaklarını belirlemek daha zor olur.
• Uzun süren görevler API'si, oluşturma gecikmesine neden olabilecek görevler ve düzen değişikliklerinin bir kombinasyonunu değil, yalnızca uzun süren görevleri tanımlar.

Taboola, bu zorlukların üstesinden gelmek için Long Animation Frames (LoAF) API kaynaklı denemesine katılarak kullanıcı girişine yanıt verme konusunda gerçek etkisini daha iyi anlamaya çalıştı. Kaynak denemeleri, yeni veya deneysel özelliklere erişim sağlar. Böylece geliştiriciler, kullanıcılarının sınırlı bir süre boyunca deneyebileceği yeni özellikleri test edebilir.

Bu zorluğun en çetin kısmının, herhangi bir reklam TPG'sinden(temel performans göstergesi) ödün vermeden veya yayıncılarımız için kaynak gecikmelerine neden olmadan INP'yi başarılı bir şekilde iyileştirmek olduğunu belirtmek önemlidir.

INP etkisini değerlendirmek için LoAF'ı kullanma

Bir oluşturma güncellemesi 50 milisaniyeden fazla geciktiğinde uzun animasyon karesi oluşur. Taboola, yalnızca uzun görevler yerine yavaş kullanıcı arayüzü güncellemelerinin nedenlerini belirleyerek gerçek hayattaki sayfa yanıt verme hızı üzerindeki etkisini analiz edebildi. LoAF'ı gözlemleyen Taboola:

1. Girişleri belirli Taboola görevleriyle ilişkilendirin.
2. Belirli özelliklerdeki performans sorunlarını üretime dağıtılmadan önce gözlemleyin.
3. A/B testlerinde farklı kod sürümlerini karşılaştırmak ve temel başarı metrikleri hakkında rapor oluşturmak için toplu veriler toplayın.

Aşağıdaki JavaScript, Taboola'nın etkisini yalıtmak için LoAF toplama amacıyla üretimde kullanılan basitleştirilmiş bir sürümdür.

function loafEntryAnalysis (entry) {
  if (entry.blockingDuration === 0) {
    return;
  }

  let taboolaIsMajor = false;
  const hasInteraction = entry.firstUIEventTimestamp > 0;
  let taboolaDuration = 0;
  const nonTaboolaLoafReport = {};
  const taboolaLoafReport = {};

  entry.scripts.forEach((script) => {
    const taboolaScriptBlockingDuration = handleLongAnimationFrameScript(script, taboolaLoafReport, nonTaboolaLoafReport);
    taboolaDuration += taboolaScriptBlockingDuration;

    if (taboolaScriptBlockingDuration > 0 || taboolaDuration > entry.duration / 2) {
      taboolaIsMajor = true;
    }
  });

  generateToboolaLoafReport(taboolaLoafReport, nonTaboolaLoafReport, hasInteraction, taboolaIsMajor);

  if (hasInteraction) {
    const global = _longAnimationFramesReport.global;
    global.inpBlockingDuration = Math.max(global.inpBlockingDuration, entry.blockingDuration);

    if (taboolaIsMajor) {
      global.taboolaInpBlockingDuration = Math.max(global.taboolaInpBlockingDuration, entry.blockingDuration);
    }
  }
}

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    loafEntryAnalysis(entry);
  }
});

observer.observe({ type: 'long-animation-frame', buffered: true });

• loafEntryAnalysis işlevini kullanarak Taboola, büyük bir katkıda bulunduğu girişleri belirleyebildi.
• Toplam komut dosyası süresinin yarısından fazlası Taboola'dan kaynaklanıyorsa veya bir Taboola komut dosyasının çalışması 50 milisaniyeden uzun sürüyorsa Taboola büyük bir katkıda bulunan olarak kabul edilir.
• Kullanıcı etkileşimi, uzun animasyon çerçevesi nedeniyle gecikirse firstUIEventTimeStamp oluşturulur. En uzun engelleme süresi, genel INP puanı olarak kabul edilir. Ayrıca, Taboola INP puanını hesaplamak için Taboola'nın ne zaman firstUIEventTimeStamp tetiklediğini de belirleyebiliriz.

LoAF ile toplanan veriler, Taboola'nın aşağıdaki ilişkilendirme tablosunu oluşturmasına yardımcı oldu. Bu tabloda, gelir artırma fırsatlarının uygulanabileceği alanlar belirleniyor.

TRECS Engine: Yeni gelir artırma stratejisi

Taboola, komut dosyası optimizasyonu fırsatlarını daha iyi anlamak için LoAF'ı kullanmanın yanı sıra JavaScript yürütme ve engelleme süresini önemli ölçüde azaltmak için tüm oluşturma motorunu yeniden tasarlıyor.

TRECS (Taboola Recommendations Extensible Client Service), Taboola'nın önerilerini yüklemek için gereken zorunlu dosyaların sayısını ve boyutunu azaltırken istemci tarafı oluşturmayı ve yayıncının mevcut JS kodunu korur.

LoAF kullanılarak oluşturmayı engelleyen görevler belirlendikten sonra, "Performans Fader" scheduler.postTask() kullanarak ana iş parçacığına geçmeden önce bu görevleri bölebilir. Bu tasarım, ana iş parçacığını meşgul eden mevcut görevlerden bağımsız olarak, kullanıcıya yönelik önemli işlemlerin (ör. oluşturma güncellemeleri) mümkün olan en kısa sürede yürütülmesini sağlar.

"Performance Fader" görev çalıştırıcısının JS snippet'ini aşağıda bulabilirsiniz:

/**
* Send a task to run using the Fader. The task will run using the browser Scheduler, by the configuration settings, or immediately.
* @param task
* @param isBlocker
*/
function sendTaskToFader (task, isBlocker = true) {
  const publisherFaderChoice = fillOptimizationGlobals(); // Loading publisher choice
  const applyYielding = publisherFaderChoice === OptimizationFaderType.Responsiveness;

  if (applyYielding) {
    return runAsPostTask(task, isBlocker);
  }

  return runImmediately(task);
}

/**
* Yielding method using scheduler.postTask and falling back to setTimeout when it's not availabe based on the publisher choice
*/
function runAsPostTask (task, isBlocker = true) {
  if ('scheduler' in window && 'postTask' in scheduler) {
    const priority = isBlocker ? 'user-blocking': 'background';

    return window?.scheduler?.postTask(task, { priority });
  }

  const publisherChoiceEnableFallback = fillPublisherChoices();

  if (publisherChoiceEnableFallback) {
    return new Promise(resolve => {
      window.setTimeout(() => {
        resolve(task());
      }, 0);
    });
  }

  return runImmediately(task);
}

sendTaskToFader fonksiyonu:

• runAsPostTask kullanır. Bu işlev, arka planda scheduler.postTask() kullanır (API kullanılabiliyorsa) veya setTimeout'ye geri döner.
• Bu işlev, işlev çağrılarını uzun animasyon karelerine ve INP'ye neden olan kod bölümlerine sarar. Bu kod bölümlerini daha kısa görevlere böler ve böylece INP'yi azaltır.

İşletme metrikleri

Taboola, LoAF sayesinde INP üzerindeki etkisini daha iyi anlayabildi. Araç, yeni TRECS motorunun bir parçası olarak kullanılabilecek komut dosyası optimizasyonu fırsatlarını da vurguladı.

Taboola, TRECS ve performans azaltıcının etkisini belirlemek için yayıncı iş ortaklarından oluşan bir panelde, komut dosyası oluşturmayan mevcut motorla karşılaştırarak INP'yi ölçen bir A/B testi gerçekleştirdi.

Aşağıdaki tabloda, Taboola ağındaki dört anonim yayıncının 75. yüzdelik dilimindeki INP sonuçları milisaniye cinsinden gösterilmektedir.

Neyse ki test panelinde TRECS ve performans azaltıcı etkinleştirildiğinde reklam tıklama oranı ve 1.000 gösterim başına gelir (BGBM) gibi işletme metrikleri olumsuz etkilenmedi. INP'de reklam KPI'lerinde beklendiği gibi herhangi bir olumsuz sonuç olmadan elde edilen bu olumlu gelişmeyle birlikte Taboola, yayıncılarının ürünüyle ilgili algısını kademeli olarak iyileştirecek.

Daha önce aynı müşteri üzerinde yapılan başka bir Lighthouse çalıştırması, yeni motor kullanılırken Taboola tarafından ana ileti dizisinin engellenme süresinde önemli bir iyileşme olduğunu gösteriyor.

Bu, INP nedenlerini belirlemek için LoAF'ın kullanılmasının ve ardından Performance Fader ile birlikte verim sağlayan tekniklerin uygulanmasının Taboola'nın iş ortaklarının reklam ve sayfa performansında maksimum başarı elde etmesini sağladığını gösterir.

Sonuç

INP'yi optimize etmek, özellikle iş ortağı web sitelerinde üçüncü taraf komut dosyaları kullanıldığında karmaşık bir süreçtir. Optimizasyon başlamadan önce, INP'nin belirli komut dosyalarıyla ilişkilendirilmesi, tahmini ortadan kaldırır ve diğer site performansı metriklerinde olası hasarı önler. LoAF API, özellikle yerleştirilmiş üçüncü taraf öğeleri için INP sorunlarını belirleme ve çözme konusunda değerli bir araç olduğunu kanıtlamıştır. Bu API, üçüncü tarafların sayfada bulunan diğer teknolojilerin müdahalesini ortadan kaldırırken kendi SDK geliştirme fırsatlarını belirlemelerine olanak tanır.

LoAF, iyi bir gelir artırma stratejisi ile birlikte kullanıldığında (ör. scheduler.postTask() kullanma) sayfa yanıt verme hızının düşük olmasının nedenini gözlemlemenize ve anlamanıza yardımcı olabilir. Bu da web sitenizin INP'sini iyileştirmek için ihtiyacınız olan bilgileri size sağlar.

Bu çalışmaya katkılarından dolayı Google'dan Gilberto Cocchi, Noam Rosenthal ve Rick Viscomi'ye, Taboola'nın Mühendislik ve Ürün ekibinden ise Dedi Hakak, Anat Dagan ve Omri Ariav'a özel teşekkürlerimizi sunarız.