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

Cara memanfaatkan Long Animation Frames API (LoAF) dan mengadopsi strategi hasil yang 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 masukan 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 melakukan banyak investasi untuk mengurangi ukuran file JavaScript dan waktu eksekusi. Taboola telah mendesain ulang seluruh mesin renderingnya, serta menggunakan API browser secara langsung tanpa abstraksi untuk meminimalkan dampaknya terhadap INP.

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

TBT sebagai proxy INP

Total Blocking Time (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. Investigasi 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 berfokus 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 terhadap Core Web Vitals. Mereka memulai dengan melakukan hal berikut:

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

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

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

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

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

Menggunakan LoAF untuk menilai dampak INP

Frame animasi yang panjang terjadi saat update rendering tertunda lebih dari 50 milidetik. Dengan mengidentifikasi penyebab update antarmuka pengguna yang lambat—bukan hanya tugas yang lama—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 kesuksesan utama.

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

• Penggunaan fungsi loafEntryAnalysis memungkinkan Taboola mengidentifikasi entri yang merupakan kontributor utamanya.
• Taboola dianggap sebagai kontributor utama jika lebih dari setengah total durasi skrip disebabkan oleh Taboola, atau skrip Taboola memerlukan waktu lebih dari 50 milidetik untuk dijalankan.
• firstUIEventTimeStamp dihasilkan jika interaksi pengguna tertunda karena Frame Animasi Panjang. Durasi pemblokiran terlama dianggap sebagai skor INP secara 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 yang menghasilkan.

Mesin TRECS: strategi yang menghasilkan baru

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

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

Setelah tugas pemblokiran render diidentifikasi menggunakan LoAF, "Performance Fader" dapat memecah tugas tersebut sebelum menyerahkan ke thread utama menggunakan scheduler.postTask(). Desain ini memastikan bahwa pekerjaan penting yang ditampilkan kepada pengguna—seperti update rendering—dapat dijalankan sesegera mungkin, terlepas dari tugas yang ada yang mungkin menempati thread utama.

Berikut adalah cuplikan JS dari runner 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 menggabungkan panggilan fungsi di bagian kode yang menyebabkan frame animasi dan INP yang panjang. Hal ini membagi bagian kode ini menjadi tugas yang lebih singkat, 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 Performance Fader, Taboola melakukan pengujian A/B yang mengukur INP terhadap mesin yang ada tanpa menghasilkan skrip di 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 (RPM), tidak terpengaruh secara negatif saat TRECS dan Pengatur Kecerahan Performa diaktifkan di panel pengujian. Dengan peningkatan positif pada INP tanpa hasil negatif seperti yang diharapkan pada KPI Iklan, Taboola akan secara bertahap meningkatkan persepsi penayang tentang produknya.

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

Hal ini menunjukkan bahwa menggunakan LoAF untuk mengidentifikasi penyebab INP dan menerapkan teknik pemberian berikutnya dengan Performance Fader memungkinkan partner Taboola mencapai kesuksesan maksimum dalam performa iklan dan halaman.

Kesimpulan

Mengoptimalkan INP adalah proses yang kompleks, terutama jika skrip pihak ketiga digunakan di situs partner. Sebelum pengoptimalan dapat dimulai, atribusi INP ke skrip tertentu akan 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 menentukan peluang peningkatan SDK tertentu sekaligus menghilangkan gangguan dari teknologi lain yang ada di halaman.

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

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