Long Animation Frame API kini telah diluncurkan

Barry Pollard

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: not supported.

Source

Long Animation Frame API (LoAF-dibaca Lo-Af) telah dikirim dari Chrome 123 dan sekarang kami juga telah memperbarui alat dan panduan untuk membantu Anda memanfaatkan API baru ini semaksimal mungkin.

LoAF tersedia di library JavaScript web-vitals

Library JavaScript web-vitals versi 4 menyertakan frame animasi panjang (atau frame) 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 mempresentasikan informasi ini dalam presentasi Insight kolom baru untuk men-debug INP, termasuk memanfaatkan LoAF untuk mengidentifikasi skrip lain yang memperlambat interaksi INP Anda.

Mengintegrasikan API secara langsung di library memungkinkan partner RUM yang menggunakan API ini untuk mengekspos data ini, termasuk seperti RUMVision, dan DebugBear. Hal ini juga menyediakan implementasi referensi open source untuk penyedia RUM lain yang ingin menambahkannya ke produk mereka sendiri.

LoAF tersedia di Ekstensi Data Web

Ekstensi Web Vitals telah diperbarui untuk menyertakan data frame animasi panjang guna membantu Anda men-debug interaksi INP:

Logging konsol Ekstensi Web Vitals.
Logging konsol Ekstensi Data Vital Web menampilkan data LoAF.

Hal ini berguna untuk melihat skrip lain yang sedang berjalan pada saat interaksi Anda, yang sering kali menjadi penyebab penundaan (terutama penundaan input), tetapi hingga saat ini sulit didiagnosis saat menggunakan ekstensi.

Panduan yang diperbarui tentang penggunaan LoAF

Kami juga telah memperbarui panduan dalam dokumentasi Long Animation Frames API utama kami untuk membantu Anda memaksimalkan API ini.

Contoh frame animasi panjang di halaman, dengan LoAF INP ditandai.
Satu halaman dapat memiliki banyak LoAF, salah satunya terkait dengan interaksi INP.

Panduan ini didasarkan pada cara kami melihat API ini digunakan di lapangan, misalnya dalam studi kasus dari Taboola ini. 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 menggunakan API ini untuk meningkatkan kualitas situs mereka bahkan selama fase uji coba. Kami berharap API ini akan diadopsi lebih luas dalam alat dan responsivitas yang lebih baik di situs.