How Long Animation Frames (LoAFs) Impact Web Performance

Have you noticed your website feeling sluggish or unresponsive during animations? You might be dealing with Long Animation Frames (LoAFs). LoAFs occur when your website’s animations take longer than 50 milliseconds to render, causing noticeable stuttering, also known as jank. These long frames can make your site feel laggy, frustrating your users.

In the article, Long Animation Frames: Toasting User Interactivity, they dive into what LoAFs are, how to track them, and how to fix them to ensure smoother interactions and improved user experiences.

What Are Long Animation Frames?

Every time your browser updates your website’s visuals, it processes an animation frame. Ideally, these frames should render in under 50 milliseconds to maintain a smooth 20 frames per second experience. But when the browser can’t keep up, a Long Animation Frame is flagged.

LoAFs are caused by a number of performance bottlenecks, including:

• Long JavaScript execution – Scripts that block the main thread too long.

• Large JavaScript files – Complex files take more time to parse and execute.

• Forced synchronous layouts – When JavaScript forces the browser to recalculate the layout in the middle of rendering.

The more LoAFs your site accumulates, the worse it feels for users—especially during critical moments like form submissions or page transitions.

Why LoAFs Matter for Web Performance

LoAFs don’t just hurt user experience—they can also tank your Core Web Vitals scores. Google’s Core Web Vitals, particularly INP (Interaction to Next Paint), measure how quickly a page responds to user interactions. LoAFs directly affect INP, making your site feel unresponsive, which could hurt your SEO rankings.

Since Google prioritizes fast, interactive websites, fixing LoAFs is critical for both user experience and search performance.

How to Track and Fix Long Animation Frames

To address LoAFs, the Long Animation Frame API was introduced by Google in Chrome 123. This API helps developers track long frames, making it easier to identify what’s causing jank. You can also use tools like PerformanceObserver to log LoAFs and analyze them in real time.

For more detailed analysis, Request Metrics offers a built-in LoAF report that helps track long frames from real users in production environments. This allows you to see which pages or scripts are causing performance issues.

Best Practices for Fixing LoAFs

Reducing LoAFs involves optimizing JavaScript execution, reducing the impact of large files, and avoiding layout recalculations. Some tactics include:

• Breaking up long tasks: Spread heavy JavaScript execution over multiple frames.

• Code-splitting: Load only the JavaScript needed for the current interaction.

• Batching DOM updates: Avoid layout thrashing by grouping reads and writes to the DOM.

For more in-depth tips and code examples, check out the full post here.

By addressing LoAFs, you can improve your website’s performance, make animations buttery smooth, and deliver a more responsive user experience. Read the full guide on Request Metrics to learn how to identify and toast those LoAFs once and for all!