Join our webinar to enhance your services, efficiency, and bottom line.
With Interaction to Next Paint (INP) now an official Core Web Vital, efficiently measuring and debugging page responsiveness is more critical than ever.
One of the go-to solutions when trying to fix a sluggish page is to identify and break long tasks that block the main thread.
While this is a highly effective and (many would say) mandatory strategy, there might be a better, more comprehensive way to deal with INP issues.
Enter Chrome’s Long Animation Frames (LoAF) API.
This relatively new tool is intended to help web developers and site owners better understand slow user interface updates.
Read on to learn why and how to add it to your performance toolbox.
A long animation frame occurs when a frame in a webpage animation takes longer to render than the desired frame rate, often aimed at 60 frames per second, or 16.6 milliseconds.
For a website to appear smooth and fast, the browser needs to be able to update its content quickly. However, running many CPU-heavy tasks will block the browser’s main thread, delaying the rendering process and resulting in long animation frames.
This delay, typically caused by complex animations and high-resolution graphics, leads to noticeable lag or jankiness, disrupting the smooth flow of the animation and creating a less responsive user experience.
You can see rendering frames in the Chrome DevTools Performance tab. The red entries show dropped frames, and the yellow entries show partially presented frames.
LoAF API builds upon another well-known and widely used tool – Long Tasks API.
Long Tasks API has been how developers identify and diagnose responsive issues for years.
First released in Chrome 58, it allows you to monitor long tasks (occupying the main thread for 50 milliseconds or longer) that prevent the browser from processing any other tasks or user interactions until completion.
However, it turned out that the Long Tasks API has some shortcomings:
In a nutshell:
The LoAF API is a proposed way to better measure and understand slow user interactions.
Here’s how it works:
LoAF looks at how long the main thread is busy. It starts timing when the main thread begins any work and stops when it's either ready to display something or has nothing left to do (idle).
This time period can cover up to two tasks, including everything up to the point where the browser is ready to paint the screen with the updated content. This means it takes into account all the steps like:
While INP is a big stride towards a more responsive web, it only shows you the effect but not the cause of the sluggishness. Whereas with LoAF, you can find out the exact time when the browser was congested, and also:
We’re sure you can’t wait to test this new tool after all its benefits and advantages over Long Tasks API. So how could you do it?
LoAF is a proposed feature, so it’s not fully standardized yet. But you have two options to test it:
As far as how to test it, Chrome’s team has shared several ways depending on your goal:
Here’s how you can monitor all long animation frames and flag the ones above a certain threshold back to an analytics endpoint for later analysis:
This is how you can receive the data only on the worst one, five, or however many long animation frames you want.
You can send the largest entries where an interaction occurred during the frame (which can be detected by the presence of a firstUIEventTimestamp value):
You can reveal long animation frames in DevTools by utilizing the performance.measure() API. These frames will then appear in the DevTools user timings track within performance traces, highlighting where you should concentrate your performance enhancement efforts.
You can check all of the use cases in Chrome’s documentation.
While still in the experimentation stage, LoAF API seems to offer plenty of benefits when it comes to boosting page responsiveness and INP score:
“We [Chrome team] believe that focusing on frames rather than tasks offers many benefits that make this a fundamentally different proposal to the existing Long Tasks API.”
But while LoAF has the upper hand over Long Tasks API, there are no plans to deprecate the latter.
Nevertheless, if you’re interested in LoAF API, the Chrome team is seeking feedback to ensure it's easy to use and meets developers' needs before being released for general use.
Feedback can be provided at the Long Task GitHub Issues list, or bugs in Chrome's implementation of the API can be filed in Chrome's issue tracker.
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.