Digital Transformation
Long Animation Frames (LoAF) API
TL;DR: Long Animation Frames API (LoAF) adalah Web API browser yang mendeteksi frame rendering lebih lama dari 50 ms beserta script penyebabnya. LoAF menggantikan Long Tasks API karena memberi konteks lebih kaya (style, layout, script attribution), sehingga developer bisa langsung tahu kode mana yang menyebabkan INP buruk.
Apa itu Long Animation Frames API?
LoAF API adalah ekstensi PerformanceObserver yang Chromium aktifkan default sejak versi 123 (awal 2024). Setiap kali browser mengambil lebih dari 50 ms untuk merender satu frame, LoAF melaporkan entry yang berisi durasi total, breakdown waktu (style, layout, render, script), dan daftar script yang dieksekusi di frame tersebut. Ini jauh lebih actionable dibanding Long Tasks API yang hanya melaporkan durasi tanpa konteks.
LoAF biasa dipakai untuk mendiagnosis INP (Interaction to Next Paint) yang buruk, terutama untuk mencari script third-party yang menyumbat main thread.
Cara Kerja
Developer mendaftarkan observer dengan tipe long-animation-frame. Setiap entry yang dilaporkan memiliki struktur kira-kira seperti ini:
| Property | Arti |
|---|---|
duration | Total durasi frame (ms) |
renderStart | Kapan rendering dimulai |
styleAndLayoutStart | Kapan style + layout dihitung |
blockingDuration | Durasi frame yang memblok input |
scripts[] | Array script yang dieksekusi (sumber, durasi, forced reflow) |
Di Next.js, observer biasanya dipasang di file instrumentation-client.ts atau di hook khusus monitoring. Data bisa dikirim ke analytics endpoint lewat navigator.sendBeacon.
Kenapa Penting?
Sebelum LoAF, debugging INP butuh sesi profiling DevTools yang lama dan tidak skalabel ke real users. Dengan LoAF, marketer bisa memetakan script third-party (chat widget, analytics, pixel) yang menyumbat main thread di production tanpa simulasi. Pengalaman Vito Atmo mengaudit landing page klien e-commerce, LoAF menemukan widget chat yang menambah 320 ms blocking time per interaksi, sesuatu yang lolos di Lighthouse karena Lighthouse tidak mensimulasikan interaksi pengguna sungguhan.
Pertanyaan Umum
Apa beda LoAF dengan Long Tasks API?
LoAF melaporkan per-frame dengan attribution script lengkap. Long Tasks hanya mengukur durasi tugas tanpa konteks penyebab. LoAF dirancang untuk debugging INP, Long Tasks untuk TBT.
Apakah LoAF tersedia di semua browser?
Per Mei 2026, LoAF stabil di Chrome, Edge, dan Opera. Firefox dan Safari masih dalam tahap eksperimental. Pakai feature detection sebelum aktifkan di production.
Istilah Terkait