The Long Animation Frame API has now shipped

Barry Pollard

Browser Support

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

Source

The Long Animation Frame API (LoAF-pronounced Lo-Af) has shipped from Chrome 123 and we've now also updated our tooling and guidance to help you make the most of this new API.

LoAF is available in web-vitals JavaScript library

Version 4 of the web-vitals JavaScript library includes the long animation frame (or frames) related to the INP interaction as documented in the Find slow interactions in the field guide to include information on how to take advantage of LoAF.

At Google I/O 2024, we presented this information in the New field insights for debugging INP talk, including leveraging LoAF to identify other scripts slowing down your INP interactions.

Integrating the API directly in the library allows RUM partners using this API to expose this data, including the likes of RUMVision, and DebugBear. This also provides an open-source reference implementation for other RUM providers looking to at it to their own product.

LoAF is available in Web Vitals Extension

The Web Vitals Extension has been updated to include long animation frame data to help you debug INP interactions:

Web Vitals Extension console logging.
Web Vitals Extension console logging surfaces LoAF data.

This is useful to see what other scripts are running at the time of your interaction, which are often the cause of delays (particularly input delays) but until now were difficult to diagnose when using the extension.

Updated guidance on using LoAF

We have also updated our guidance in our main Long Animation Frames API documentation to help you make the most of this API.

Examples of long animation frames on a page, with the INP LoAF highlighted.
A page may have many LoAFs, one of which is related to the INP interaction.

This guidance is based on how we have seen this API used in the field, for example in this case study from Taboola. We are working on a number of other case studies and look forward to publishing more examples like this in the future.

In addition we have also documented the API on MDN.

Conclusion

The Long Animation Frames API is an exciting addition to the web platform and we have already seen a number of sites using this API to improve their sites even during its trial phase. We look forward to a wider adoption of the API in tooling and improved responsiveness on websites thanks to this API.