Bagaimana memanfaatkan Long Animation Frames API (LoAF) dan mengadopsi strategi hasil cerdas memungkinkan Taboola meningkatkan responsivitas situs penayang tanpa mengorbankan performa iklan.
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 Penundaan Input Pertama (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. Dengan rekomendasi ini,9.000 partner penayang eksklusif Taboola dapat 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 banyak berinvestasi dalam 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 mencakup perjalanan Taboola dalam meningkatkan INP dengan menggunakan Long Animation Frames (LoAF) API yang baru untuk mengukur dampaknya terhadap responsivitas halaman di lapangan, dan upaya selanjutnya dalam menerapkan pengoptimalan spesifik untuk 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 akan memengaruhi responsivitas halaman. Metrik kolom yang mengukur responsivitas, seperti INP, dapat dipengaruhi oleh TBT yang tinggi. Investigasi oleh Annie Sullivan tentang korelasi antara TBT dan INP di perangkat seluler menunjukkan bahwa situs cenderung mencapai skor INP yang baik saat waktu pemblokiran thread utama diminimalkan.
Korelasi ini, ditambah dengan kekhawatiran penerbit Taboola terkait TBT yang tinggi, membuat Taboola memfokuskan perhatiannya untuk meminimalkan kontribusinya terhadap metrik ini.
RELEASE.js memblokir thread utama selama 691 milidetik.
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 menggunakan PageSpeed Insights API untuk mengevaluasi 10.000 hingga 15.000 URL setiap hari.
Namun, Taboola memperhatikan bahwa menganalisis TBT dengan alat ini memiliki beberapa keterbatasan:
- Long Tasks API tidak dapat mengatribusikan tugas ke domain origin atau skrip tertentu, sehingga lebih sulit untuk mengidentifikasi sumber tugas yang 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 dengan uji coba origin Long Animation Frames (LoAF) API dalam upaya untuk lebih memahami dampak sebenarnya terhadap responsivitas input pengguna. Uji coba origin memberikan akses ke fitur baru atau eksperimental, yang memungkinkan developer menguji fitur baru yang dapat dicoba oleh pengguna dalam waktu terbatas.
Penting untuk menyoroti bahwa aspek yang tersulit dari tantangan ini adalah berhasil meningkatkan INP tanpa mengorbankan KPI Iklan(Indikator Performa Utama) apa pun atau menyebabkan keterlambatan resource bagi penayang kami.
Menggunakan LoAF untuk menilai dampak INP
Frame animasi yang panjang terjadi saat update rendering tertunda lebih dari 50 milidetik. Dengan mengidentifikasi penyebab pembaruan antarmuka pengguna yang lambat—daripada tugas panjang saja—Taboola dapat menganalisis dampaknya terhadap responsivitas halaman di bidang ini. Dengan mengamati LoAF, Taboola dapat:
- Mengatribusikan entri ke tugas Taboola tertentu.
- Mengamati masalah performa pada fitur tertentu sebelum di-deploy ke produksi.
- Mengumpulkan data gabungan untuk membandingkan berbagai versi kode dalam pengujian A/B, dan melaporkan metrik keberhasilan 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
loafEntryAnalysismemungkinkan Taboola mengidentifikasi entri yang menjadi kontributor utama. - Taboola dianggap sebagai kontributor utama jika lebih dari setengah dari total durasi skrip disebabkan oleh Taboola, atau skrip Taboola membutuhkan waktu lebih dari 50 milidetik untuk dijalankan.
firstUIEventTimeStampdibuat jika interaksi pengguna tertunda karena Frame Animasi Panjang. Durasi pemblokiran terlama dianggap sebagai skor INP keseluruhan. Kita juga dapat mengidentifikasi kapan Taboola memicufirstUIEventTimeStampuntuk menghitung skor INP Taboola.
Data yang dikumpulkan menggunakan LoAF membantu Taboola membuat tabel atribusi berikut, yang mengidentifikasi area tempat taboola dapat menerapkan peluang yang menghasilkan.
TRECS Engine: strategi hasil baru
Selain menggunakan LoAF untuk lebih memahami peluang pengoptimalan skrip, Taboola juga mendesain ulang seluruh mesin renderingnya untuk meminimalkan waktu eksekusi JavaScript dan waktu pemblokiran 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-tugas tersebut sebelum beralih ke thread utama menggunakan scheduler.postTask(). Desain ini memastikan bahwa pekerjaan penting yang dihadapi pengguna—seperti rendering update—dapat dieksekusi 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 menggunakanscheduler.postTask()di balik layar (jika API tersedia), atau melakukan fallback kesetTimeout. - Fungsi ini menggabungkan panggilan fungsi di bagian kode yang menyebabkan frame animasi yang panjang dan INP. 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 Performance Fader, Taboola melakukan pengujian A/B yang mengukur INP terhadap mesin yang ada tanpa menghasilkan skrip pada panel partner penerbit.
Tabel berikut menunjukkan hasil INP dalam milidetik pada persentil ke-75 dari empat penerbit anonim di jaringan Taboola.
Untungnya, metrik bisnis, seperti Rasio Klik-Tayang Iklan dan Pendapatan per 1.000 tayangan (RPM), tidak terkena dampak negatif saat TRECS dan Performance Fader 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 penayangnya tentang produknya.
Lighthouse lain yang dijalankan pada pelanggan yang sama yang disorot sebelumnya menunjukkan peningkatan signifikan dalam waktu pemblokiran thread utama oleh Taboola saat menggunakan mesin baru.
RELEASE.js mengurangi TBT sebesar 485 md (-70%).
Hal ini menunjukkan bahwa penggunaan LoAF untuk mengidentifikasi penyebab INP dan men-deploy teknik hasil berikutnya dengan Performance Fader memungkinkan partner Taboola mencapai kesuksesan maksimum dalam performa iklan dan halaman.
Kesimpulan
Mengoptimalkan INP adalah proses yang kompleks, terutama saat skrip pihak ketiga digunakan di situs partner. Sebelum pengoptimalan dapat dimulai, atribusi INP ke skrip tertentu menghilangkan spekulasi dan potensi kerusakan pada metrik performa situs lainnya.LoAF API telah terbukti menjadi alat yang bermanfaat untuk mengidentifikasi dan mengatasi masalah INP, khususnya untuk pihak ketiga yang disematkan dengan memungkinkan mereka menentukan peluang peningkatan SDK spesifik sekaligus menghilangkan gangguan dari teknologi lain yang ada di halaman.
Jika digunakan bersama dengan strategi hasil yang baik—seperti menggunakan scheduler.postTask()—LoAF dapat membantu Anda mengamati dan memahami penyebab buruknya responsivitas halaman, yang nantinya akan memberi Anda informasi yang dibutuhkan untuk meningkatkan INP situs.
Terima kasih khususnya 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 upaya ini.