Cara memanfaatkan Long Animation Frames API (LoAF) dan mengadopsi strategi hasil cerdas memungkinkan Taboola meningkatkan performa penayang tingkat respons situs web tanpa mengombinasikan performa iklan.
Interaction to Next Paint (INP) adalah metrik yang menilai daya respons situs terhadap input pengguna. INP mengukur waktu dari saat pengguna memulai interaksi—seperti saat mengklik, mengetuk, atau mengetik—hingga respons visual yang dihasilkan. INP akan menggantikan Penundaan Input Pertama (FID) sebagai Core Web Vital 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 untuk 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 eksekusinya. 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 untuk meningkatkan INP menggunakan Long Animation Frames (LoAF) API baru untuk mengukur dampaknya terhadap responsivitas halaman di lapangan, dan upaya selanjutnya untuk menerapkan pengoptimalan khusus 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 akan memengaruhi responsivitas halaman. Metrik kolom yang mengukur responsivitas—seperti INP—dapat dipengaruhi oleh TBT yang tinggi. Investigasi oleh Annie Sullivan mengenai korelasi antara TBT dan INP di perangkat seluler menunjukkan bahwa situs lebih cenderung mencapai skor INP yang baik saat waktu pemblokiran thread utama diminimalkan.
Korelasi ini, ditambah dengan penerbit Taboola kekhawatiran seputar TBT yang tinggi, membuat Taboola memfokuskan perhatiannya untuk meminimalkan kontribusinya pada 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 yang bermasalah di kolom 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-alat ini memiliki beberapa keterbatasan:
- Long Tasks API tidak dapat mengatribusikan tugas ke domain asal atau skrip tertentu, sehingga lebih sulit untuk mengidentifikasi sumber tugas yang berjalan lama.
- Long Tasks API hanya mengidentifikasi tugas yang berjalan 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 dampak nyatanya 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 untuk waktu terbatas.
Penting untuk disoroti bahwa aspek tersulit dari tantangan ini adalah berhasil meningkatkan INP tanpa mengorbankan KPI Iklan(Indikator Performa Utama) atau menyebabkan keterlambatan sumber daya bagi penayang kami.
Menggunakan LoAF untuk menilai dampak INP
Bingkai animasi yang panjang terjadi saat pembaruan rendering tertunda lebih dari 50 milidetik. Dengan mengidentifikasi penyebab lambatnya pembaruan antarmuka pengguna—bukan hanya tugas yang berjalan lama—Taboola mampu menganalisis dampaknya terhadap daya respons halaman di bidang. Dengan mengamati LoAF, Taboola dapat:
- Mengatribusikan entri ke tugas Taboola tertentu.
- Amati masalah performa pada fitur tertentu sebelum di-deploy ke produksi.
- Kumpulkan data gabungan untuk membandingkan berbagai versi kode dalam pengujian A/B, dan laporkan 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 });
- Menggunakan fungsi
loafEntryAnalysismemungkinkan Taboola mengidentifikasi entri yang menjadi kontributor utama. - 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.
firstUIEventTimeStampdibuat jika interaksi pengguna tertunda karena Frame Animasi Panjang. Durasi pemblokiran terpanjang dianggap sebagai skor INP keseluruhan. Kita juga dapat mengidentifikasi kapan Taboola memicufirstUIEventTimeStampuntuk menghitung skor INP Taboola.
Data yang dikumpulkan dengan LoAF membantu Taboola membuat tabel atribusi berikut, yang mengidentifikasi area tempat Taboola dapat menerapkan peluang hasil.
TRECS Engine: strategi menghasilkan baru
Selain menggunakan LoAF untuk lebih memahami peluang pengoptimalan skrip, Taboola telah mendesain ulang seluruh mesin renderingnya untuk meminimalkan eksekusi dan waktu pemblokiran 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 pemblokir render diidentifikasi menggunakan LoAF, "Fader Performa" dapat memecah tugas tersebut sebelum menghasilkan thread utama menggunakan scheduler.postTask(). Desain ini memastikan bahwa pekerjaan penting yang dihadapi pengguna—seperti update rendering—dapat dieksekusi sesegera mungkin terlepas dari tugas yang ada yang mungkin menempati thread utama.
Berikut ini cuplikan JS "Performance Fader" {i>task runner<i}:
/**
* 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 dan INP yang panjang. Kode 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 mengetahui dampak TRECS dan Fader Performa, 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 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 Fader Performa diaktifkan di panel pengujian. Dengan peningkatan positif pada INP ini tanpa hasil negatif seperti yang diharapkan pada KPI Google Ads, Taboola akan secara bertahap meningkatkan performa persepsi 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 menghasilkan berikutnya dengan Fader Performa 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 menghilangkan spekulasi 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 spesifik mereka sekaligus menghilangkan gangguan dari teknologi lain yang ada di halaman.
Saat digunakan bersama strategi hasil yang baik—seperti menggunakan scheduler.postTask()—LoAF dapat membantu Anda mengamati dan memahami penyebab daya respons halaman yang buruk, yang akan 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 kontribusinya dalam pekerjaan ini.