La API de Long Animation Frame (LoAF, que se pronuncia "lo-af") se envió desde Chrome 123 y también actualizamos nuestras herramientas y guías para ayudarte a aprovechar al máximo esta nueva API.
LoAF está disponible en la biblioteca de JavaScript web-vitals
.
La versión 4 de la biblioteca de JavaScript de web-vitals incluye el fotograma de animación largo (o fotogramas) relacionado con la interacción de INP, como se documenta en la guía Cómo encontrar interacciones lentas en el campo para incluir información sobre cómo aprovechar LoAF.
En Google I/O 2024, presentamos esta información en la charla New field insights for debugging INP, que incluye aprovechar LoAF para identificar otras secuencias de comandos que ralentizan tus interacciones con INP.
La integración de la API directamente en la biblioteca permite que los socios de RUM que usan esta API expongan estos datos, incluidos RUMVision y DebugBear. Esto también proporciona una implementación de referencia de código abierto para otros proveedores de RUM que quieran agregarla a su propio producto.
LoAF está disponible en la extensión de Métricas web
La extensión de Métricas web esenciales se actualizó para incluir datos de fotogramas de animación largos que te ayudarán a depurar las interacciones de INP:

Esto es útil para ver qué otras secuencias de comandos se están ejecutando en el momento de la interacción, que a menudo son la causa de retrasos (en particular, retrasos de entrada), pero hasta ahora era difícil diagnosticarlos cuando se usaba la extensión.
Orientación actualizada sobre el uso de LoAF
También actualizamos nuestra guía en la documentación principal de la API de Long Animation Frames para ayudarte a aprovechar al máximo esta API.

Esta guía se basa en cómo hemos visto que se usa esta API en el campo, por ejemplo, en este caso de éxito de Taboola. Estamos trabajando en varios otros casos de éxito y esperamos publicar más ejemplos como este en el futuro.
Además, también documentamos la API en MDN.
Conclusión
La API de Long Animation Frames es una incorporación emocionante a la plataforma web y ya hemos visto varios sitios que usan esta API para mejorar sus sitios incluso durante su fase de prueba. Esperamos que esta API se adopte más ampliamente en las herramientas y que mejore la capacidad de respuesta en los sitios web.