Long Animation Frames (LoAF)

TL;DR: Long Animation Frames atau LoAF adalah API performa di Chrome yang melacak frame rendering yang melebihi 50 ms. API ini membantu marketer dan developer menemukan skrip atau task panjang yang merusak INP sehingga halaman terasa nge-lag saat diklik atau di-scroll.

Apa itu Long Animation Frames?

LoAF adalah PerformanceObserver bawaan Chromium yang melaporkan setiap animation frame yang memakan waktu lebih dari 50 ms. Sebelumnya, developer mengandalkan Long Tasks API yang hanya melaporkan task tunggal, tanpa konteks frame penuh. LoAF mengisi celah itu dengan mengaitkan task panjang, style recalc, layout, dan paint pada satu frame yang sama. Pemahaman ini krusial untuk memperbaiki Core Web Vitals, khususnya metrik interaktivitas.

Cara Kerja Singkat

Halaman mendaftarkan observer baru bertipe long-animation-frame, lalu menerima objek PerformanceLongAnimationFrameTiming. Setiap entri menampilkan startTime, renderStart, duration, dan blockingDuration. Data ini dapat dikirim ke endpoint analitik untuk dianalisis tren regresinya. Tim kami memakai pendekatan serupa di Vetmo untuk membedakan jank yang berasal dari tag manager vs hydrasi React, lalu meresepkan perbaikan via Scheduler API.

Kenapa Penting untuk Marketer?

INP menjadi metrik resmi sejak 2024 dan kerap memburuk akibat skrip pihak ketiga seperti chat widget, pixel iklan, dan A/B tester. Dengan LoAF, marketer dapat menunjukkan dampak nyata setiap skrip pada pengalaman pengguna, lalu membahas trade-off bersama tim teknis menggunakan data, bukan asumsi. Hasil pengukuran sebaiknya digabung dengan field data dari CrUX.

Pertanyaan Umum

Apakah LoAF tersedia di semua browser?

Belum. LoAF saat ini hanya tersedia di Chromium-based browser sejak versi 123. Pengukuran di Safari masih menggunakan Long Tasks API tradisional.

Apakah LoAF menggantikan Long Tasks API?

Tidak menggantikan. Long Tasks API tetap berguna sebagai fallback, sedangkan LoAF menambah konteks visual frame yang lebih kaya.