İç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'den (LoAF) yararlanmak ve akıllı bir getiri stratejisi benimsemek, Taboola'nın reklam performansından ödün vermeden yayıncıların web sitesinin duyarlılığını iyileştirmesini nasıl sağladı?

David Belford

Thierno Thiam

Interaction to Next Paint (INP), bir web sitesinin kullanıcı girişine yanıt verme oranı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 Vitals olarak İlk Giriş Gecikmesi (FID) özelliğinin yerini alması nedeniyle gereklidir.

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'in bir sayfanın kullanıcı girişlerine hızlı yanıt verme yetisini etkileyebileceğinden, Taboola, JavaScript dosya boyutlarını ve yürütme süresini azaltmak için büyük yatırım yaptı. 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 ve INP arasındaki korelasyon üzerine yapılan 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 bağıntı, Taboola'nın yayıncılarının yüksek TBT ile ilgili endişeleriyle birlikte, Taboola'nın bu metriğe katkısını en aza indirmeye odaklanmasını sağladı.

INP için proxy metriği olarak TBT'yi kullanan Taboola, Core Web Vitals üzerindeki potansiyel etkisini sınırlandırmak amacıyla JavaScript yürütme süresini izleyip optimize etmeye başladı. Aşağıdakileri yaparak başladılar:

• Long Tasks API'yi kullanarak alandaki sorunlu komut dosyalarını belirleme 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.
• Long Tasks API, oluşturma gecikmesine neden olabilecek görevlerin ve düzen değişikliklerinin bir birleşimini değil, yalnızca uzun görevleri tanımlar.

Taboola, bu zorlukların üstesinden gelmek için Long Animation Frames (LoAF) API kaynak denemesine katıldı ve bunun kullanıcı girişi duyarlılığı üzerindeki gerçek etkisini daha iyi anladı. Kaynak denemeleri, yeni veya deneysel özelliklere erişim sağlayarak geliştiricilerin, kullanıcılarının sınırlı bir süre boyunca deneyebilecekleri yeni özellikleri test etmesine olanak tanır.

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 bu durumun sahada sayfa duyarlılığı üzerindeki etkisini analiz edebildi. LoAF'ı gözlemlemek Taboola'nın şunları yapmasına olanak tanıdı:

1. Girişleri belirli Taboola görevleriyle 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 getiri fırsatlarını uygulayabileceği alanları belirleyen aşağıdaki ilişkilendirme tablosunu oluşturmasına yardımcı oldu.

TRECS Engine: Yeni getiri stratejisi

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ölerek 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ı.

Taboola, TRECS ve Performance Fader'ın etkisini belirlemek için yayıncı iş ortaklarından oluşan bir panelde komut dosyası döndürülmeden mevcut motora karşı INP değerini ö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 de vurguladığımız bir müşteri üzerinde çalışan başka bir Lighthouse, yeni motoru kullanırken Taboola'nın ana iş parçacığı engelleme 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 gelebilecek 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.