L'API Long Animation Frame (LoAF, prononcée "Lo-Af") est disponible depuis Chrome 123. Nous avons également mis à jour nos outils et nos conseils pour vous aider à exploiter tout le potentiel de cette nouvelle API.
LoAF est disponible dans la bibliothèque JavaScript web-vitals
La version 4 de la bibliothèque JavaScript Web Vitals inclut le ou les frames d'animation longs associés à l'interaction INP, comme indiqué dans le guide Trouver les interactions lentes sur le terrain pour inclure des informations sur l'utilisation de LoAF.
Lors de Google I/O 2024, nous avons présenté ces informations dans la conférence Nouveaux insights sur le terrain pour déboguer les interactions utilisateur-numéro de téléphone, y compris l'exploitation de LoAF pour identifier d'autres scripts ralentissant vos interactions utilisateur-numéro de téléphone.
L'intégration de l'API directement dans la bibliothèque permet aux partenaires RUM qui utilisent cette API d'exposer ces données, y compris RUMVision et DebugBear. Cela fournit également une implémentation de référence Open Source pour les autres fournisseurs de RUM qui souhaitent l'ajouter à leur propre produit.
LoAF est disponible dans l'extension Web Vitals
La Extension Web Vitals a été mise à jour pour inclure des données sur les frames d'animation de longue durée afin de vous aider à déboguer les interactions INP:

Cela permet de voir quels autres scripts s'exécutent au moment de votre interaction, ce qui est souvent à l'origine de retards (en particulier des retards d'entrée), mais qui étaient jusqu'à présent difficiles à diagnostiquer lorsque vous utilisiez l'extension.
Mise à jour des consignes sur l'utilisation de LoAF
Nous avons également mis à jour nos conseils dans la documentation principale de l'API Long Animation Frames pour vous aider à exploiter tout le potentiel de cette API.

Ces conseils sont basés sur la façon dont nous avons vu cette API utilisée sur le terrain, par exemple dans cette étude de cas de Taboola. Nous travaillons sur d'autres études de cas et nous espérons publier d'autres exemples de ce type à l'avenir.
Nous avons également documenté l'API sur MDN.
Conclusion
L'API Long Animation Frames est un ajout intéressant à la plate-forme Web. Nous avons déjà vu un certain nombre de sites l'utiliser pour améliorer leur site, même pendant la phase de test. Nous espérons que cette API sera davantage adoptée dans les outils et qu'elle permettra d'améliorer la réactivité des sites Web.