La API de Long Animation Frame (LO-Af que se pronuncia LoAF) se envió desde Chrome 123 y ahora también actualizamos nuestras herramientas y lineamientos para ayudarte a aprovechar al máximo esta nueva API.
LoAF está disponible en la biblioteca JavaScript de web-vitals.
La versión 4 de la biblioteca de JavaScript web-vitals incluye los fotogramas (o fotogramas) de animación largos relacionados con la interacción de INP, tal como se documenta en la guía Cómo encontrar interacciones lentas en el campo para incluir información sobre cómo aprovechar el LoAF.
En Google I/O 2024, presentamos esta información en la charla Nuevo campo de estadísticas para depurar INP, incluida la aprovechamiento de LoAF para identificar otras secuencias de comandos que ralentizan tus interacciones con INP.
La integración de la API directamente en la biblioteca permite a los socios de RUM que usan esta API exponer estos datos, incluidos los tipos de RUMVision y DebugBear. Esto también proporciona una implementación de referencia de código abierto para otros proveedores de RUM que buscan usarla en su propio producto.
LoAF está disponible en la extensión de Métricas web.
Se actualizó la extensión de Métricas web para incluir datos de fotogramas de animación largos para ayudarte a depurar las interacciones de INP:
Esto es útil para ver qué otras secuencias de comandos se están ejecutando en el momento de tu interacción, que a menudo son la causa de los retrasos (en particular, retrasos en las entradas), pero hasta ahora eran difíciles de diagnosticar cuando se usa la extensión.
Se actualizó la orientación 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 esta API al máximo.
Esta guía se basa en cómo observamos el uso de esta API en el campo, por ejemplo, en este caso de éxito de Taboola. Estamos trabajando en 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 que varios sitios usan esta API para mejorar sus sitios incluso durante la fase de prueba. Esperamos una adopción más amplia de la API en herramientas y una capacidad de respuesta mejorada en los sitios web gracias a esta API.