İç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 yararlanmak ve akıllı bir gelir stratejisi benimsemek, Taboola'nın reklam performansından ödün vermeden yayıncıların web sitelerinin duyarlılığını artırmasını nasıl sağladı?

David Belford

Thierno Thiam

Interaction to Next Paint (INP), bir web sitesinin kullanıcı girişine yanıt verme hızını değerlendiren bir metriktir. INP, kullanıcının bir etkileşime (ör. tıklama, dokunma veya yazma) başladığı andan, bunun sonucunda ortaya çıkan 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 her saniye 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 kitleleriyle etkileşim kurmasını ve para kazanmasını sağlar. Yayıncılar, JavaScript'i kullanarak sayfalarında önerileri oluşturur.

Üçüncü taraf JavaScript, sayfanın kullanıcı girişlerine hızlı yanıt verme özelliğini etkileyebileceğinden Taboola, JavaScript dosyalarının boyutlarını ve yürütme süresini azaltmak için yoğun şekilde yatırım yapmaktadır. Taboola, INP üzerindeki etkisini en aza indirmek için oluşturma motorunun tamamını yeniden tasarlıyor ve tarayıcı API'lerini soyutlama olmadan doğrudan kullanıyor.

Bu örnek olay, Taboola'nın yeni Long Animation Frames (LoAF) API'yi kullanarak INP'yi iyileştirme yolculuğunu, alandaki sayfa duyarlılığı üzerindeki etkisini ölçme ve ardından kullanıcı deneyimini iyileştirmek için belirli optimizasyonlar uygulama çabalarını kapsar.

INP proxy'si olarak TBT

Toplam Engelleme Süresi (TBT), ana iş parçacığının sayfanın yanıt vermesini etkileyecek kadar uzun süre engellendiği yerleri tanımlayan laboratuvar tabanlı bir metriktir. Yanıt vermeyi ölçen alan metrikleri (ör. INP), yüksek TBT'den etkilenebilir. Annie Sullivan tarafından mobil cihazlarda TBT ile INP arasındaki ilişki hakkında yapılan bir araştırma, ana iş parçacığı engelleme süresi en aza indirildiğinde sitelerin iyi INP puanları elde etme olasılığının daha yüksek olduğunu gösteriyor.

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

INP için proxy metrik olarak TBT'yi kullanan Taboola, Core Web Vitals üzerindeki potansiyel etkisini sınırlamak için JavaScript yürütme süresini izlemeye ve optimize etmeye başladı. İlk olarak aşağıdakileri yaptılar:

• Long Tasks API'yi kullanarak alandaki sorunlu komut dosyalarını tespit etme 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, bu araçlarla TBT'yi analiz etmenin bazı sınırlamaları olduğunu fark etti:

• Uzun Görevler API'si, görevi kaynak alanla veya belirli bir komut dosyasıyla ilişkilendiremez. Bu da uzun görevlerin kaynaklarını belirlemeyi zorlaştırır.
• Uzun Görevler API'si, oluşturma gecikmesine neden olabilecek görevler ve düzen değişikliklerinin bir kombinasyonu yerine yalnızca uzun görevleri tanımlar.

Bu zorluklarla başa çıkmak için Taboola, kullanıcı girişi yanıt verebilirliği üzerindeki gerçek etkisini daha iyi anlamak amacıyla Long Animation Frames (LoAF) API kaynak denemesine katıldı. 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 zor kısmının, reklam TPG'lerinden(Temel Performans Göstergesi) ödün vermeden veya yayıncılarımız için kaynak gecikmesine neden olmadan INP'yi başarılı bir şekilde iyileştirmek olduğunu vurgulamak isteriz.

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

Bir oluşturma güncellemesi 50 milisaniyeden uzun süre gecikirse uzun animasyon karesi oluşur. Taboola, yalnızca uzun görevler yerine yavaş kullanıcı arayüzü güncellemelerinin nedenlerini belirleyerek sahada sayfanın duyarlılığı üzerindeki etkisini analiz edebildi. LoAF'ı gözlemlemek Taboola'nın şunları yapmasına olanak tanıdı:

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

Aşağıdaki JavaScript, Taboola'nın etkisini izole etmek için LoAF'ı toplamak 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şlevinin kullanılması, Taboola'nın önemli bir katkıda bulunduğu girişleri tanımlamasına olanak tanıdı.
• 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 önemli bir katkıda bulunan olarak kabul edilir.
• Kullanıcı etkileşimi uzun animasyon karesi nedeniyle gecikirse firstUIEventTimeStamp oluşturulur. En uzun engelleme süresi, genel INP puanı olarak kabul edilir. Taboola INP puanını hesaplamak için Taboola'nın ne zaman firstUIEventTimeStamp tetiklediğini de belirleyebiliriz.

LoAF ile toplanan veriler, Taboola'nın üretken fırsatları uygulayabileceği alanları tanımlayan aşağıdaki ilişkilendirme tablosunu oluşturmasına yardımcı oldu.

TRECS Motoru: Yeni verimli strateji

Taboola, komut dosyası optimizasyon 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 en aza indirmek için oluşturma motorunun tamamını yeniden tasarladı.

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 taraflı oluşturma işlemini ve yayıncının mevcut JS kodunu korur.

LoAF kullanılarak oluşturmayı engelleyen görevler tanımlandıktan sonra "Performans Fader", scheduler.postTask() kullanarak ana iş parçacığına vermeden önce bu görevleri bölebilir. Bu tasarım, ana iş parçacığında yer alan mevcut görevlerden bağımsız olarak, kullanıcılara yönelik önemli çalışmaların (ör. oluşturma güncellemeleri) en kısa sürede yürütülmesini sağlar.

"Performans Fader" görev çalıştırıcısının JS snippet'i aşağıda verilmiştir:

/**
* 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 API, scheduler.postTask()'ü (API mevcutsa) kullanır 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ı optimizasyon fırsatlarını da vurguladı.

TRECS ve Performans Fader'ın etkisini belirlemek için Taboola, yayıncı iş ortaklarından oluşan bir panelde komut dosyası getirisi olmayan mevcut motorla karşılaştırmalı olarak 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 diliminde milisaniye cinsinden INP sonuçları gösterilmektedir.

Neyse ki TRECS ve Performans Fader test panelinde etkinleştirildiğinde reklam tıklama oranı ve 1.000 gösterim başına gelir (BGBM) gibi işletme metrikleri olumsuz şekilde etkilenmedi. Reklam KPI'larında beklendiği gibi olumsuz bir sonuç olmadan INP'de yapılan bu olumlu iyileştirmeyle Taboola, yayıncılarının ürünüyle ilgili algısını kademeli olarak iyileştirecek.

Daha önce vurgulanan aynı müşteride çalıştırılan başka bir Lighthouse, yeni motor kullanıldığında Taboola tarafından ana ileti dizisinin engellenmesinin süresinde önemli bir iyileşme olduğunu gösteriyor.

Bu, INP'nin nedenlerini belirlemek için LoAF'ın kullanılmasının ve performans azaltıcıyla birlikte sonraki verim tekniklerinin uygulanmasının Taboola iş ortaklarının reklam ve sayfa performansında maksimum başarı elde etmesini sağladığını göstermektedir.

Sonuç

INP'yi optimize etmek, özellikle iş ortağı web sitelerinde üçüncü taraf komut dosyaları kullanıldığında karmaşık bir süreçtir. Optimizasyona başlanmadan önce, INP'nin belirli komut dosyalarına ilişkilendirilmesi, tüm tahminleri ve diğer site performansı metriklerine olası zararları ortadan kaldırır.LoAF API, özellikle sayfadaki diğer teknolojilerin müdahalesini ortadan kaldırırken belirli SDK iyileştirme fırsatlarını belirlemelerine olanak tanıyarak, özellikle yerleşik üçüncü taraflar için INP sorunlarını tespit edip ele almada değerli bir araç olduğunu kanıtlamıştır.

İyi bir yüksek dönüşüm stratejisiyle (ör. scheduler.postTask() kullanımı) birlikte kullanıldığında LoAF, sayfanın düşük yanıt vermesinin nedenini gözlemlemenize ve anlamanıza yardımcı olabilir. Bu da web sitenizin INP'sini iyileştirmek için ihtiyacınız olan bilgileri sağlar.

Bu çalışmaya katkıda bulunan Google'dan Gilberto Cocchi, Noam Rosenthal ve Rick Viscomi ile Taboola'nın Mühendislik ve Ürün Ekibi'nden Dedi Hakak, Anat Dagan ve Omri Ariav'a özel teşekkürler.