The Long Animation Frames API, a new Chromium-based capability, will finally solve this years-old webpage issue

Chrome developers have been working on the Long Animation Frames API (also shortened as LoAF), which is a new API that will address the issue of animations slowing down webpages, to effectively make these webpages run faster even if they have multiple animation areas playing at the same time.

The Chromium-based browsers, such as Google Chrome, or Microsoft Edge, currently use the existing Long Tasks API, which allows users to monitor for long tasks, tasks that occupy the main thread for 50 milliseconds or longer.

However, while the Long Tasks API can improve a web page’s loading time, it fails to provide why the web page is running so slow when it has animations, in the first place.

Measuring long tasks in the field using a Performance Observer 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.

Chrome developers

The Long Animation Frames API, on the other hand, provides developers with the necessary tools to find out what’s causing the responsiveness problems, effectively allowing them to come up with actionable plans to optimize animations on a webpage.

LoAF is a way to measure how long it takes for animations or visual updates on a webpage to happen. Imagine you’re watching an animation, like a loading spinner or a transition between pages. LoAF measures how slow or fast that animation happens.

In other words, LoAF helps developers understand why animations might be slow and what consequences that has. For example, it can tell us if a long animation frame is blocking user interactions (like clicking buttons) or causing delays.

The Long Animation Frames API is an alternative approach to measuring blocking work. Rather than measuring the individual tasks, the Long Animation Frames API—as its name suggests—measures long animation frames. A long animation frame is when a rendering update is delayed beyond 50 milliseconds (the same as the Long Tasks API’s threshold).

Chrome developers

For a long time, the Long Tasks API was the best and the most efficient way to improve the reliability of webpages that run lots of animations, but this new API might single-handedly give developers the means to understand why there are so many reliability issues with this kind of web pages.

On Chrome, this new way of understating animations will be available to developers starting with version 123 (which is also set to introduce theme support for DevTools), and you can check to see if this API is supported by implementing the following lines:

if (PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
  // Monitor LoAFs
}

Check out the full blog post on the new Long Animation Frames API, and if you’re more on the coding side of things, head over to GitHub to learn more about it.