Long Animation Frame API (LoAF diucapkan Lo-Af) telah diluncurkan dari Chrome 123 dan kami kini juga mengupdate alat dan panduan untuk membantu Anda memanfaatkan API baru ini secara optimal.
LoAF tersedia di library JavaScript web-vitals
Versi 4 library JavaScript web-vitals menyertakan frame (atau frame) animasi panjang yang terkait dengan interaksi INP seperti yang didokumentasikan dalam panduan Menemukan interaksi lambat di lapangan untuk menyertakan informasi tentang cara memanfaatkan LoAF.
Di Google I/O 2024, kami menyajikan informasi ini dalam pembahasan Insight kolom baru untuk proses debug INP, termasuk memanfaatkan LoAF untuk mengidentifikasi skrip lain yang memperlambat interaksi INP Anda.
Integrasi API langsung di library memungkinkan partner RUM menggunakan API ini untuk mengekspos data ini, termasuk jenis seperti RUMVision dan DebugBear. RUM ini juga menyediakan implementasi referensi open source untuk penyedia RUM lain yang ingin menerapkannya pada produk mereka sendiri.
LoAF tersedia di Ekstensi Data Web
Ekstensi Data Web telah diupdate untuk menyertakan data frame animasi panjang guna membantu Anda men-debug interaksi INP:
Ini berguna untuk melihat skrip lain yang berjalan pada saat interaksi Anda, yang sering kali menjadi penyebab penundaan (terutama penundaan input) tetapi sampai sekarang sulit untuk didiagnosis ketika menggunakan ekstensi.
Panduan yang diperbarui tentang penggunaan LoAF
Kami juga telah memperbarui panduan dalam dokumentasi Long Animation Frames API utama kami untuk membantu Anda memanfaatkan API ini semaksimal mungkin.
Panduan ini didasarkan pada bagaimana kami melihat penggunaan API ini di lapangan, misalnya dalam studi kasus ini dari Taboola. Kami sedang mengerjakan sejumlah studi kasus lainnya dan berharap dapat memublikasikan lebih banyak contoh seperti ini di masa mendatang.
Selain itu, kami juga telah mendokumentasikan API di MDN.
Kesimpulan
Long Animation Frames API adalah tambahan yang menarik untuk platform web dan kami telah melihat sejumlah situs yang menggunakan API ini untuk meningkatkan kualitas situs mereka bahkan selama tahap uji coba. Kami berharap dapat menggunakan API yang lebih luas dalam alat dan meningkatkan responsivitas di situs berkat API ini.