İç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?

Taboola'nın Long Animation Frames API'den (LoAF) yararlanıp akıllı bir getiri stratejisi benimseyerek reklam performansından ödün vermeden yayıncıların web sitesi duyarlılığını iyileştirmesi nasıl mümkün oldu?

David Belford

Thierno Thiam

Sonraki Boyamayla Etkileşim (INP), web sitesinin kullanıcı girişine yanıt verme durumunu değerlendiren bir metriktir. INP, kullanıcının bir etkileşime (tıklama, dokunma veya yazma gibi) başladığı andan itibaren gerçekleşen görsel geri bildirime kadar geçen süreyi ölçer. INP'nin Mart 2024'te Önemli Web Verileri olarak First Input Delay (FID) olarak değiştirilmesi gerekiyor.

Taboola, açık web'de her saniye 500.000 öneriyi destekleyen,dünyanın lider içerik keşif platformudur. Bu öneriler,Taboola'nın 9.000 özel yayıncı iş ortağının kitleleriyle para kazanmasını ve onlarla etkileşim kurmasını sağlıyor. Yayıncılar, sayfalarında JavaScript kullanarak öneriler oluşturur.

Üçüncü taraf JavaScript, bir sayfanın kullanıcı girişine hızlı yanıt verme yetisini etkileyebildiğinden Taboola, JavaScript dosyalarının boyutlarını ve yürütme süresini kısaltmak için ciddi yatırımlar yapmıştır. Taboola, oluşturma motorunun tamamını yeniden tasarlıyor ve INP üzerindeki etkisini en aza indirmek için tarayıcı API'lerini doğrudan soyutlama olmadan kullanıyor.

Bu örnek olay incelemesinde Taboola'nın, yeni Uzun Animasyon Çerçeveleri (LoAF) API'sini kullanarak INP'yi iyileştirme yolculuğunu ve bunun sahadaki sayfa yanıt hızı üzerindeki etkisini ölçmek ve kullanıcı deneyimini iyileştirmek için belirli optimizasyonları uygulamak üzere gerçekleştirdikleri çalışmaları ele almak istiyoruz.

INP'nin proxy'si olarak TBT

Toplam Engelleme Süresi (TBT), ana iş parçacığının sayfa duyarlılığını etkileyecek kadar uzun süre engellendiği yeri tanımlayan laboratuvar tabanlı bir metriktir. Duyarlılığı ölçen alan metrikleri (ör. INP), yüksek TBT'den etkilenebilir. Annie Sullivan tarafından mobil cihazlarda TBT ve INP arasındaki korelasyon 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ın yüksek TBT konusundaki endişeleriyle bir araya geldiğinde Taboola'nın dikkatini bu metriğe katkısını en aza indirmeye odaklanmasına yöneltti.

INP için proxy metriği olarak TBT'yi kullanan Taboola, Core Web Vitals üzerindeki potansiyel etkisini sınırlamak amacıyla JavaScript yürütme süresini izlemeye ve optimize etmeye başladı. Şunları yaparak başladılar:

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

Ancak Taboola, bu araçlarla TBT analizi yapmanın bazı sınırlamaları olduğunu fark etti:

• Uzun Görevler API'sı, görevi kaynak alan adıyla 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şikliklerini değil, yalnızca uzun görevleri tanımlar.

Taboola, bu zorlukların üstesinden gelmek ve Long Animation Frames (LoAF) API (Long Animasyon Çerçeveleri (LoAF) API) kaynak denemesine katıldı. Bu amaçla, güncellemenin kullanıcı girişi yanıt hızı üzerindeki gerçek etkisini daha iyi anladı. Kaynak denemeleri, geliştiricilerin, kullanıcılarının sınırlı bir süre için deneyebilecekleri yeni özellikleri test etmelerine olanak tanıyan yeni veya deneysel özelliklere erişim sağlar.

Bu zorluğun en zor yanının, herhangi bir Reklam TPG'den(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 vurgulamak gerekiyor.

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

Oluşturma güncellemesi 50 milisaniyeyi aştığında uzun bir animasyon karesi oluşur. Kullanıcı arayüzü güncellemelerinin yavaş olmasının nedenlerini (tek başına uzun görevler yerine) tespit eden Taboola, sahada bu güncellemenin sayfa duyarlılığı üzerindeki etkisini analiz etmeyi başardı. Taboola'nın LoAF'yi gözlemlemek, şunları yapmasına olanak sağladı:

1. Belirli Taboola görevlerine yönelik özellik girişleri.
2. Üretime dağıtılmadan önce belirli özelliklerdeki performans sorunlarını gözlemleyin.
3. A/B testlerinde farklı kod sürümlerini karşılaştırmak ve önemli başarı metrikleri hakkında rapor oluşturmak için birleştirilmiş veriler toplayın.

Aşağıdaki JavaScript, Taboola'nın etkisini izole etmek için LoAF'yi toplamak için ü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 kullanmak, Taboola'nın en çok katkıda bulunan girişleri tanımlamasını sağladı.
• 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'nın en fazla katkıda bulunduğu 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'nın, Taboola INP puanını hesaplamak için bir firstUIEventTimeStamp özelliğini ne zaman tetiklediğini 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

Komut dosyası optimizasyon fırsatlarını daha iyi anlamak için LoAF'yi kullanmanın yanı sıra Taboola, JavaScript yürütme ve engelleme süresini önemli ölçüde en aza indirmek için oluşturma motorunun tamamını yeniden tasarlıyor.

TRECS (Taboola Recommendations Genişletilebilir İstemci Hizmeti), 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.

Oluşturma engelleme görevleri LoAF kullanılarak belirlendikten sonra, "Performans Karartma Aracı" bu görevleri bölerek scheduler.postTask() kullanarak ana iş parçacığına dönüşebilir. Bu tasarım, güncelleme oluşturma gibi kullanıcılara yönelik önemli çalışmaların, ana iş parçacığını kapsıyor olabilecek mevcut görevlerden bağımsız olarak mümkün olan en kısa sürede yürütülebilmesini sağlar.

"Performans Fader" görev çalıştırıcısının JS snippet'ini burada 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:

• Gelişmiş scheduler.postTask() kullanan (API kullanılabiliyorsa) runAsPostTask veya setTimeout kullanır.
• Bu işlev, uzun animasyon çerçevelerine ve INP'ye neden olan kod bölümlerinde işlev çağrılarını sarmalar. 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 anladı. Araç ayrıca yeni TRECS motorunun bir parçası olarak kullanılabilecek komut dosyası optimizasyon fırsatlarını da vurguladı.

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

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

Test panelinde TRECS ve Performans Fader etkinleştirildiğinde, Reklam Tıklama Oranı ve 1.000 gösterim başına gelir (BGBG) gibi iş metrikleri olumsuz bir şekilde etkilenmedi. Reklam TPG'lerinde beklendiği gibi herhangi bir olumsuz sonuç olmadan INP'deki bu olumlu iyileştirme sayesinde Taboola, yayıncılarının ürünü hakkındaki algısını kademeli olarak iyileştirecek.

Aynı müşteri üzerinde daha önce vurgulanan başka bir Lighthouse çalıştırması, yeni motoru kullanırken Taboola tarafından ana iş parçacığını engelleme süresinde önemli bir iyileşme olduğunu gösteriyor.

Bu durum, INP'nin nedenlerini belirlemek için LoAF'yi kullanmanın ve Performans Fader'ı ile daha sonraki getiri tekniklerini kullanmanın Taboola'nın 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 de iş ortağı web sitelerinde üçüncü taraf komut dosyaları kullanıldığında karmaşık bir işlemdir. Optimizasyon başlamadan önce, INP'nin belirli komut dosyalarına atanması, varsayımları ve diğer site performansı metriklerinde oluşabilecek hasarı ortadan kaldırır. LoAF API'nin, özellikle yerleştirilmiş 3P'ler için INP sorunlarını tanımlama ve çözme konusunda değerli bir araç olduğu kanıtlanmıştır. LoAF API, sayfada bulunan diğer teknolojilerden kaynaklanan etkileşimi ortadan kaldırırken belirli SDK iyileştirme fırsatlarını belirlemelerine olanak tanır.

LoAF, iyi bir getiri stratejisiyle birlikte kullanıldığında (scheduler.postTask() kullanmak gibi) sayfa duyarlılığının nedenini gözlemleyip anlamanıza yardımcı olabilir. Bu da size web sitenizin INP'sini iyileştirmek için ihtiyacınız olan bilgileri sağlar.

Bu çalışmaya yaptıkları katkılar için Google'dan Gilberto Cocchi, Noam Rosenthal ve Rick Viscomi'ye ve Taboola'nın Mühendislik ve Ürün Ekibi'nden Dedi Hakak, Anat Dagan ve Omri Ariav'a teşekkür ederiz.