Long Animation Frames (LoAF)

TL;DR: Long Animation Frames (LoAF) adalah API browser untuk mendeteksi frame rendering yang berjalan lebih dari 50 ms, lengkap dengan informasi script mana yang menjadi penyebabnya. LoAF adalah penerus Long Task API dan menjadi alat utama untuk mencari akar masalah INP yang buruk.

Apa itu Long Animation Frames?

Setiap gerakan halus di layar terjadi karena browser menggambar ulang halaman berkali-kali per detik. Satu kali gambar ulang disebut frame. Ketika sebuah frame butuh lebih dari 50 ms, pengguna mulai merasakan halaman tersendat. LoAF mencatat frame-frame lambat ini secara otomatis.

Analoginya seperti CCTV di dapur restoran: Long Task API lama hanya memberi tahu "ada pesanan yang lambat", sementara LoAF menunjukkan rekaman koki mana yang menahan antrean dan di menu apa. Data ini yang dibutuhkan untuk optimasi INP secara terarah, bukan menebak.

Yang Dicatat LoAF

• Durasi frame dan berapa lama rendering tertunda
• Script attribution: file, fungsi, dan sumber script penyebab
• Waktu style dan layout: berapa lama browser menghitung ulang tampilan
• Blocking duration: total waktu thread utama terkunci

Data ini bisa dikumpulkan lewat PerformanceObserver dan dikirim ke analytics untuk dianalisis dari pengguna nyata, melengkapi proses debugging INP.

Kenapa Penting?

INP menjadi metrik resmi Core Web Vitals sejak Maret 2024, dan skor buruk sering disebabkan script pihak ketiga yang tidak terlihat di pengujian lab. LoAF memungkinkan Anda menemukan penyebabnya dari data pengguna nyata, misalnya tag manager atau script chat widget yang menahan thread utama.

Pertanyaan Umum

Apa bedanya LoAF dengan Long Task API?

Long Task hanya melaporkan durasi tugas panjang tanpa detail penyebab. LoAF melaporkan frame utuh beserta atribusi script, sehingga Anda tahu persis apa yang harus diperbaiki.

Apakah LoAF tersedia di semua browser?

Belum. LoAF tersedia di browser berbasis Chromium sejak Chrome 123. Untuk browser lain, gunakan sebagai data pelengkap, bukan satu-satunya sumber.