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

Long Animation Frames API is superior to the existing Long Tasks API.

3 min. read

Published onMarch 21, 2024

published onMarch 21, 2024

Share this article

Read our disclosure page to find out how can you help Windows Report sustain the editorial teamRead more

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.

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 individualtasks, the Long Animation Frames API—as its name suggests—measureslong 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).

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 introducetheme support for DevTools), and you can check to see if this API is supported by implementing the following lines:

Check out thefull blog poston the new Long Animation Frames API, and if you’re more on the coding side of things, head over toGitHubto learn more about it.

With KB5043178 to Release Preview Channel, Microsoft advises Windows 11 users to plug in when the battery is low#

Copilot in Outlook will generate personalized themes for you to customize the app#

Microsoft will raise the price of its 365 Suite to include AI capabilities#

Death Stranding Director’s Cut is now Xbox X|S at a huge discount#

Outlook will let users create custom account icons so they can tell their accounts apart easier#

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

With KB5043178 to Release Preview Channel, Microsoft advises Windows 11 users to plug in when the battery is low

Copilot in Outlook will generate personalized themes for you to customize the app

Microsoft will raise the price of its 365 Suite to include AI capabilities

Death Stranding Director’s Cut is now Xbox X|S at a huge discount

Outlook will let users create custom account icons so they can tell their accounts apart easier

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