L'API des frames d'animation longs (LoAF, prononcé 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.
La LoAF est disponible dans la bibliothèque JavaScript web-vitals
La version 4 de la bibliothèque JavaScript web-Vitals inclut la ou les longues images d'animation liées à l'interaction INP, comme indiqué dans le guide Trouver les interactions lentes dans le champ pour inclure des informations sur la façon d'exploiter les fonctionnalités LoAF.
Lors de la conférence Google I/O 2024, nous avons présenté ces informations dans la présentation New field insights for debug INP, y compris l'utilisation du LoAF pour identifier les autres scripts ralentissant vos interactions INP.
L'intégration de l'API directement dans la bibliothèque permet aux partenaires RUM qui utilisent cette API d'exposer ces données, comme RUMVision et DebugBear. Cela fournit également une implémentation de référence Open Source pour les autres fournisseurs de RUM qui souhaitent l'utiliser sur leur propre produit.
LoAF est disponible dans l'extension Web Vitals
L'extension Web Vitals a été mise à jour afin d'inclure des données sur les longues animations pour vous aider à déboguer les interactions INP:
Cela permet de voir quels autres scripts sont en cours d'exécution au moment de l'interaction, ce qui est souvent à l'origine de retards (en particulier les retards d'entrée), mais il était jusqu'à présent difficile à diagnostiquer lors de l'utilisation de l'extension.
Mise à jour des instructions sur l'utilisation de LoAF
Nous avons également mis à jour nos conseils dans notre documentation principale sur l'API Long Animation Frames pour vous aider à tirer le meilleur parti 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 un certain nombre d'autres études de cas et sommes impatients de 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 leurs sites, même pendant la phase d'essai. Nous attendons avec impatience une adoption plus large de l'API dans les outils et une amélioration de la réactivité des sites Web grâce à cette API.