A API Long Animation Frame (LoAF, em inglês) foi enviada do Chrome 123 e agora também atualizamos nossas ferramentas e orientações para ajudar você a aproveitar ao máximo essa nova API.
O LoAF está disponível na biblioteca JavaScript web-vitals
A versão 4 da biblioteca web-vitals JavaScript inclui os frames de animação longos relacionados à interação da INP, conforme documentado no guia Encontrar interações lentas no campo para incluir informações sobre como aproveitar o LoAF.
No Google I/O 2024, apresentamos essas informações na palestra Novos insights de campo para depurar o INP, incluindo como usar o LoAF para identificar outros scripts que atrasam suas interações com o INP.
A integração da API diretamente na biblioteca permite que os parceiros de RUM que usam essa API exponham esses dados, incluindo RUMVision e DebugBear. Isso também fornece uma implementação de referência de código aberto para outros provedores de RUM que pretendem fazer isso para seu próprio produto.
A LoAF está disponível na extensão Web Vitals
A extensão Métricas da Web foi atualizada para incluir dados de frames de animação longos para ajudar a depurar interações de INP:
Isso é útil para ver quais outros scripts estão sendo executados no momento da interação, que muitas vezes são a causa dos atrasos (principalmente atrasos de entrada), mas até agora eram difíceis de diagnosticar ao usar a extensão.
Orientações atualizadas sobre o uso da LoAF
Também atualizamos nossas orientações na documentação principal da API Long Animation Frames para ajudar você a aproveitar ao máximo essa API.
Essa orientação tem como base o uso dessa API em campo, por exemplo, neste estudo de caso da Taboola. Estamos trabalhando em vários outros estudos de caso e esperamos publicar mais exemplos no futuro.
Além disso, também documentamos a API no MDN.
Conclusão
A API Long Animation Frames é uma adição interessante à plataforma da Web e já vimos vários sites usando essa API para melhorar seus sites, mesmo durante a fase de testes. Esperamos uma adoção mais ampla da API nas ferramentas e uma melhor capacidade de resposta em sites graças a essa API.