Cara penyedia rekomendasi konten Taboola menggunakan LoAF untuk meningkatkan INP hingga 36% untuk situs partner penayangnya.

Cara memanfaatkan Long Animation Frames API (LoAF) dan menerapkan strategi perolehan cerdas memungkinkan Taboola meningkatkan responsivitas situs penayang tanpa mengorbankan performa iklan.

David Belford

Thierno Thiam

Interaction to Next Paint (INP) adalah metrik yang menilai responsivitas situs terhadap input pengguna. INP mengukur waktu dari saat pengguna memulai interaksi—seperti saat mengklik, mengetuk, atau mengetik—hingga feedback visual yang dihasilkan. INP akan menggantikan First Input Delay (FID) sebagai Core Web Vitals pada Maret 2024.

Taboola adalah platform penemuan konten terkemuka di dunia, yang mendukung 500.000 rekomendasi setiap detik di web terbuka. Rekomendasi ini memungkinkan 9.000 partner penayang eksklusif Taboola memonetisasi dan berinteraksi dengan audiens mereka. Penayang merender rekomendasi di halaman mereka menggunakan JavaScript.

Karena JavaScript pihak ketiga dapat memengaruhi kemampuan halaman untuk merespons input pengguna dengan cepat, Taboola telah berinvestasi besar-besaran dalam mengurangi ukuran file JavaScript dan waktu eksekusinya. Taboola telah mendesain ulang seluruh mesin rendering-nya, serta menggunakan API browser secara langsung tanpa abstraksi untuk meminimalkan dampaknya pada INP.

Studi kasus ini membahas perjalanan Taboola dalam meningkatkan INP dengan menggunakan Long Animation Frames (LoAF) API baru untuk mengukur dampaknya terhadap responsivitas halaman di lapangan, dan upaya selanjutnya untuk menerapkan pengoptimalan tertentu guna meningkatkan pengalaman pengguna.

TBT sebagai proxy INP

Total Waktu Pemblokiran (TBT) adalah metrik berbasis lab yang mengidentifikasi tempat thread utama diblokir cukup lama sehingga kemungkinan memengaruhi responsivitas halaman. Metrik kolom yang mengukur responsivitas—seperti INP—dapat terpengaruh oleh TBT yang tinggi. Penyelidikan oleh Annie Sullivan tentang korelasi antara TBT dan INP di perangkat seluler menunjukkan bahwa situs lebih cenderung mencapai skor INP yang baik jika waktu pemblokiran thread utama diminimalkan.

Korelasi ini, ditambah dengan kekhawatiran penayang Taboola terkait TBT yang tinggi, membuat Taboola memfokuskan perhatiannya untuk meminimalkan kontribusinya terhadap metrik ini.

Dengan menggunakan TBT sebagai metrik proxy untuk INP, Taboola mulai memantau dan mengoptimalkan waktu eksekusi JavaScript untuk membatasi potensi dampaknya pada Core Web Vitals. Mereka memulai dengan melakukan hal berikut:

• Mengidentifikasi dan mengoptimalkan skrip bermasalah di lapangan menggunakan Long Tasks API.
• Memperkirakan kontribusi TBT dengan menggunakan PageSpeed Insights API untuk mengevaluasi 10.000 hingga 15.000 URL setiap hari.

Namun, Taboola menyadari bahwa menganalisis TBT dengan alat ini memiliki beberapa batasan:

• Long Tasks API tidak dapat mengatribusikan tugas ke domain asal atau skrip tertentu, sehingga lebih sulit untuk mengidentifikasi sumber tugas panjang.
• Long Tasks API hanya mengidentifikasi tugas panjang, bukan kombinasi tugas dan perubahan tata letak yang dapat menyebabkan penundaan rendering.

Untuk mengatasi tantangan ini, Taboola bergabung dalam uji coba origin Long Animation Frames (LoAF) API untuk lebih memahami dampak sebenarnya terhadap responsivitas input pengguna. Uji coba origin memberikan akses ke fitur baru atau eksperimental, sehingga developer dapat menguji fitur baru yang dapat dicoba pengguna mereka untuk waktu terbatas.

Penting untuk menekankan bahwa aspek paling sulit dari tantangan ini adalah berhasil meningkatkan INP tanpa mengorbankan KPI Iklan(Indikator Performa Utama) atau menyebabkan penundaan sumber daya bagi penayang kami.

Menggunakan LoAF untuk menilai dampak INP

Frame animasi panjang terjadi saat update rendering tertunda lebih dari 50 milidetik. Dengan mengidentifikasi penyebab lambatnya update antarmuka pengguna—bukan hanya tugas yang panjang—Taboola dapat menganalisis dampaknya terhadap responsivitas halaman di lapangan. Dengan mengamati LoAF, Taboola dapat:

1. Mengatribusikan entri ke tugas Taboola tertentu.
2. Amati masalah performa dalam fitur tertentu sebelum di-deploy ke produksi.
3. Kumpulkan data gabungan untuk membandingkan berbagai versi kode dalam pengujian A/B, dan laporkan metrik utama kesuksesan.

JavaScript berikut adalah versi sederhana yang digunakan dalam produksi untuk mengumpulkan LoAF guna mengisolasi dampak Taboola.

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

• Dengan menggunakan fungsi loafEntryAnalysis, Taboola dapat mengidentifikasi entri yang menjadikannya sebagai kontributor utama.
• Taboola dianggap sebagai penyebab utama jika lebih dari setengah durasi total skrip disebabkan oleh Taboola, atau skrip Taboola memerlukan waktu lebih dari 50 milidetik untuk dijalankan.
• firstUIEventTimeStamp dibuat jika interaksi pengguna tertunda karena Frame Animasi Panjang. Durasi pemblokiran terlama dianggap sebagai skor INP keseluruhan. Kita juga dapat mengidentifikasi kapan Taboola telah memicu firstUIEventTimeStamp untuk menghitung skor INP Taboola.

Data yang dikumpulkan dengan LoAF membantu Taboola membuat tabel atribusi berikut, yang mengidentifikasi area tempat Taboola dapat menerapkan peluang perolehan.

Mesin TRECS: strategi perolehan baru

Selain menggunakan LoAF untuk lebih memahami peluang pengoptimalan skrip, Taboola telah mendesain ulang seluruh mesin rendering-nya untuk meminimalkan waktu eksekusi dan pemblokiran JavaScript secara signifikan.

TRECS (Taboola Recommendations Extensible Client Service) mempertahankan rendering sisi klien dan kode JS saat ini penayang sekaligus mengurangi jumlah dan ukuran file wajib yang diperlukan untuk memuat rekomendasi Taboola.

Setelah tugas pemblokiran rendering diidentifikasi menggunakan LoAF, "Performance Fader" dapat memecah tugas tersebut sebelum menghasilkan thread utama menggunakan scheduler.postTask(). Desain ini memastikan bahwa pekerjaan penting yang terlihat oleh pengguna—seperti update rendering—dapat dieksekusi sesegera mungkin, terlepas dari tugas yang ada yang mungkin menggunakan thread utama.

Berikut cuplikan JS dari pelaksana tugas "Performance Fader":

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

Fungsi sendTaskToFader:

• Menggunakan runAsPostTask, yang menggunakan scheduler.postTask() di balik layar (jika API tersedia), atau kembali ke setTimeout.
• Fungsi ini membungkus panggilan fungsi di bagian kode yang menyebabkan frame animasi yang panjang dan INP. Hal ini membagi bagian kode ini menjadi tugas yang lebih pendek, sehingga mengurangi INP.

Metrik bisnis

Berkat LoAF, Taboola dapat lebih memahami dampaknya terhadap INP. Alat ini juga menyoroti peluang pengoptimalan skrip yang dapat digunakan sebagai bagian dari mesin TRECS baru.

Untuk menentukan dampak TRECS dan Peredam Performa, Taboola melakukan uji A/B yang mengukur INP terhadap mesin yang ada tanpa skrip yang menghasilkan panel partner penayang.

Tabel berikut menunjukkan hasil INP dalam milidetik pada persentil ke-75 dari empat penayang anonim di jaringan Taboola.

Untungnya, metrik bisnis, seperti Rasio Klik-tayang Iklan dan Pendapatan per 1.000 tayangan iklan (RPM), tidak terpengaruh secara negatif saat TRECS dan Peredup Performa diaktifkan di panel pengujian. Dengan peningkatan positif pada INP ini tanpa hasil negatif seperti yang diharapkan pada KPI Iklan, Taboola akan secara bertahap meningkatkan persepsi penayang tentang produknya.

Eksekusi Lighthouse lain pada pelanggan yang sama yang disoroti sebelumnya menunjukkan peningkatan signifikan dalam waktu pemblokiran thread utama oleh Taboola saat menggunakan mesin baru.

Hal ini menunjukkan bahwa penggunaan LoAF untuk mengidentifikasi penyebab INP dan men-deploy teknik penundaan berikutnya dengan Peredup Performa memungkinkan partner Taboola meraih kesuksesan maksimal dalam performa iklan dan halaman.

Kesimpulan

Mengoptimalkan INP adalah proses yang rumit, terutama saat skrip pihak ketiga digunakan di situs partner. Sebelum pengoptimalan dapat dimulai, atribusi INP ke skrip tertentu menghilangkan tebakan dan potensi kerusakan pada metrik performa situs lainnya.LoAF API telah terbukti menjadi alat yang berharga untuk mengidentifikasi dan mengatasi masalah INP, terutama untuk pihak ketiga yang disematkan dengan memungkinkan mereka menunjukkan peluang peningkatan SDK tertentu sekaligus menghilangkan gangguan dari teknologi lain yang ada di halaman.

Jika digunakan bersama dengan strategi pelepasan yang baik—seperti menggunakan scheduler.postTask()—LoAF dapat membantu Anda mengamati dan memahami penyebab responsivitas halaman yang buruk, yang pada gilirannya, memberi Anda informasi yang diperlukan untuk meningkatkan INP situs Anda.

Terima kasih khusus kepada Gilberto Cocchi, Noam Rosenthal, dan Rick Viscomi dari Google, serta Dedi Hakak, Anat Dagan, dan Omri Ariav dari tim Engineering dan Produk Taboola atas kontribusi mereka dalam pekerjaan ini.