Long Animation Frames

This feature is available only on the Essentials or Professional plan.

The Long Animation Frame (LoAF) API tracks every time your website’s animations or transitions block interactivity for users. LoAF measures frames that take too long to render, creating lag and frustration and contributing to Interaction to Next Paint (INP). Request Metrics captures these long animation frames from real user sessions, showing you exactly when and where they happen. You’ll get detailed insights into the scripts and pages responsible for the delays, helping you optimize and smooth out your website’s performance.

Request Metrics pulls data from the LoAF API as well as the scripts that cause it and automatically adds inline script sources so you can see exactly where problems are coming from.

Interactive Demo

Here’s an interactive demo that walks through how to use the LoAF report to find blocking animation frames:

LoAF Dashboard

The Long Animation Frame (LoAF) Dashboard gives you a comprehensive overview of all the long animation frames occurring on your site. It provides real-time data on how often LoAFs are happening and shows detailed metrics for both desktop and mobile users.

The LoAF Over Time charts the 75th Percentile of LoAF duration over time, so you can understand if the problems are getting better or worse. You can change the percentile being tracked or compare with the previous period.

The LoAF Summary shows you a breakdown of how many LoAFs have occurred by duration, so you can see what the overall median, P75, and P95 values are for your time range.

The LoAF dashboard supports all the time, device, and filtering capabilities of Request Metrics, allowing you to drill in on specific problems.

Interaction vs Evaluation

LoAFs are usually caused by either a user interaction, such as a click, or the evaluation of a script that has been downloaded. You can filter to only show LoAFs from these sources using the inline filter controls. This let’s you know whether you should focus on reducing overall script size, or optimizing your event handlers.

LoAF by Pages

Shows you all the pages (or page grouping) that have had Long Animation Frames, as well as their count and durations. You can click on any page in the listing to get more details about it in the LoAF Page Details report.

LoAF by Script Invocations

Shows the reasons why scripts were invoked that were involved in the Long Animation Frame. These are things like event listeners, or setTimeout firing.

Inline Script Sources

The inline “Show Code” button shows you the live inline code being invoked and potentially causing this LoAF.

Note: Show Code fetches the current live source code from your website. If you have deployed changes since the LoAF was recorded, the code may not reflect what was running at the time.

LoAF by Script Evaluation

Shows the individual scripts that were evaluated, parsed, or compiled that were involved with the Long Animation Frame, as well as the count and durations. The inline “Analysis” button shows the current load performance, file size, and caching potential of the script, so you can understand if the file might be too large or complex. Clicking on any script in the listing will take you to the LoAF Script Details report.

LoAF Page Details Report

The LoAF Page Details Report dives deep into the long animation frames occurring on a specific page, or page grouping. This view provides a detailed breakdown of each LoAF event and highlights the scripts contributing to these performance issues.

You’ll find the same LoAF Over Time and LoAF summary reports as the Dashboard, but filtered specifically to this page. You’ll also find:

• Top Script Invocations: Lists the events and callbacks that triggered long animation frames. The “Show Code” button provides inline access to the live source code, helping you quickly identify and troubleshoot problematic scripts.
• Top Script Evaluations: Displays the scripts that took the longest to evaluate or compile during the LoAF events. This data helps pinpoint whether large or complex scripts are dragging down page performance.
• Recent Page Views: A detailed log of recent page views where LoAFs occurred. Each entry shows the worst LoAF duration, the browser used, the associated Core Web Vital, and the user’s location. This section helps you understand how performance issues impact real users in different contexts.

LoAF Script Details Report

The LoAF Script Details Report zeroes in on how a specific script impacts long animation frames across your site. This report provides detailed insights into the behavior of the script and its contribution to performance issues, helping you identify and fix the underlying problems.

You’ll find the same LoAF Over Time and LoAF Summary reports as the Dashboard, but filtered specifically to this script. You’ll also find:

• Top Script Invocations: Shows the specific instances where this script was invoked and led to long animation frames. The Show Code button gives you inline access to the live source code being executed, helping you diagnose problematic scripts in real time.
• Page URLs: A list of the URLs where this script is being used and triggering long animation frames. You can review how the script performs across different pages and prioritize the most affected URLs for optimization.
• Recent Page Views: A detailed log of recent page views where this script caused LoAFs. Each entry shows the worst LoAF duration, the browser, the associated Core Web Vital, and the user’s location, giving you a contextual view of the performance impact on real users.

LoAF in the Page Load Waterfall

On the Page Details Report, Long Animation Frames (LoAFs) are displayed directly in the waterfall timeline, giving you precise insight into where performance issues occur during the page load. The upper line represents the duration of the LoAF in the overall load sequence. This is expanded into the bottom line that shows the total duration and the contribution of each script to the LoAF.

By visualizing LoAFs directly in the waterfall, you can see the interplay between various resources, scripts, and animations, and how they impact the overall load time. This level of detail makes it easier to pinpoint and address the root cause of jank or slow animations in your site.

What if there are no scripts in my LoAF?

Long Animation Frames can occur without any scripts running if the browser is overwhelmed with other tasks, such as a layout of a complicate document structure. If there are no scripts in the majority of your LoAF events, consider simplifying the DOM structure by reducing elements or nesting.