A API Long Animation Frame foi enviada

Barry Pollard

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: not supported.

Source

A API Long Animation Frame (LoAF, pronunciada como Lo-Af) foi lançada no 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 JavaScript de Web Vitals inclui o frame (ou frames) de animação longa relacionado à interação de 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 INP, incluindo como usar o LoAF para identificar outros scripts que estão atrasando suas interações com o INP.

A integração da API diretamente na biblioteca permite que os parceiros do RUM que usam essa API exponham esses dados, incluindo o RUMVision e o DebugBear. Isso também fornece uma implementação de referência de código aberto para outros provedores de RUM que querem adicionar o recurso ao próprio produto.

O LoAF está disponível na extensão das Métricas da Web

A Extensão das Core Web Vitals foi atualizada para incluir dados de frames de animação longos e ajudar a depurar interações de INP:

Geração de registros do console da extensão "Web Vitals".
A geração de registros da extensão das Métricas da Web no console mostra dados de LoAF.

Isso é útil para saber quais outros scripts estão em execução no momento da interação, que geralmente são a causa de atrasos (principalmente atrasos de entrada), mas até agora eram difíceis de diagnosticar ao usar a extensão.

Orientações atualizadas sobre o uso do LoAF

Também atualizamos as orientações na nossa documentação principal da API Long Animation Frames para ajudar você a aproveitar ao máximo essa API.

Exemplos de frames de animação longos em uma página, com o INP LoAF destacado.
Uma página pode ter muitas LoAFs, e uma delas está relacionada à interação INP.

Essas orientações são baseadas em como vimos essa API sendo usada no campo, por exemplo, neste estudo de caso da Taboola. Estamos trabalhando em vários outros estudos de caso e esperamos publicar mais exemplos como este no futuro.

Além disso, documentamos a API no MDN.

Conclusão

A API Long Animation Frames é uma adição interessante para a plataforma da Web, e já vimos vários sites usando essa API para melhorar os sites deles, mesmo durante a fase de teste. Esperamos que essa API seja mais adotada em ferramentas e melhore a capacidade de resposta dos sites.