What is the Long Animation Frames API?
The Long Animation Frames API is a relatively new tool that helps developers identify and address performance issues caused by lengthy animations. It provides insights into the duration of animations and their impact on page responsiveness.
How Does it Work?
The LoAF API monitors the duration of animations and identifies those that exceed a predefined threshold. It then provides detailed information about these long animations, including their duration, the element involved, and the animation's start and end timestamps. This data enables developers to pinpoint the source of performance bottlenecks and optimize their animations accordingly.
Limited availability
Long animation frames is not Baseline because it does not work in some of the most widely-used browsers.
- Only supported in Chrome 123 and Edge 123
- Continue reading about long animation frames
Register to RUMvision to see more resources and learn if your website visitors would already benefit from this feature today.
Limitations of the Long Tasks API
While the Long Tasks API is a valuable tool for identifying and addressing performance issues, it's important to recognize its limitations:
- Incomplete View: The API may exclude some important tasks, such as rendering updates that occur in separate tasks. This can lead to an inaccurate understanding of the "total work" for a particular interaction.
- Individual Task Focus: The API only reports on individual tasks that exceed the 50-millisecond threshold. An animation frame could consist of multiple tasks, each under 50 milliseconds, but collectively still block the browser's rendering ability.
Measuring long tasks in the field using the Performance Observer above is only somewhat useful. In reality, it doesn't give that much information beyond the fact that a long task happened, and how long it took.
Advantages of looking at frames instead of tasks
Focusing on animation frames rather than individual tasks offers a significant advantage: a prolonged animation frame can stem from a multitude of tasks that collectively contribute to its extended duration. This approach effectively addresses the aforementioned limitation of the Long Tasks API, which might overlook the cumulative impact of smaller, render-blocking tasks preceding an animation frame.
Benefits of Using the LoAF API
The LoAF API offers several advantages for web developers:
- Improved User Experience: By identifying and addressing long animations, developers can ensure that their web pages remain responsive and provide a smooth user experience.
- Enhanced Performance: Optimizing animations can reduce the overall load on the browser, leading to faster page rendering and improved performance.
- Reduced Frustration: Smooth and responsive animations minimize user frustration and contribute to a positive overall user experience.
Getting Started with the LoAF API
The LoAF API is available in Chrome. To use it, developers can access the PerformanceObserver API and create an observer specifically for long animation frames. Once set up, the observer will start tracking animation durations and provide the necessary data for analysis.
Measuring LoAF with RUMvision
RUMvision is already using the LoAF API while in Origin Trial, so we can provide Google Chrome with feedback and users can already use it. We do this through a third-party dashboard. This shows the "Pure JS execution time" of scripts.
This way, the developer and/or marketer can get to work on what scripts they are using and which ones may need improvement. Also, some tools can be replaced with another one that is more performant. For example, it appears that Clarity has the least impact on INP when looking at pure JS execution time in LoAF.
Note that in some cases a LoAF can be caused by another third party, however, this is not often the case. Always do your own research on how your code and third parties are integrated on your site.
