Long Animation Frames API to debug INP

The Long Animation Frames API, usually shortened to LoAF, is the current recommended way to find out what actually made a slow interaction slow. It was built alongside the Interaction to Next Paint metric, INP, specifically to answer the question of which script delayed a response. When an interaction fails INP, LoAF tells you the script URL, the function, and the character position responsible, even for real users you cannot reproduce locally.

What LoAF measures

A long animation frame is a rendering update that is delayed beyond 50 milliseconds. Where the older Long Tasks API reports individual main-thread tasks over that threshold, LoAF treats the whole frame as the unit and captures every script that ran within it. Each entry includes the total duration, the blocking duration, the start of style and layout work, and an array of script entries with their source URL, function name, character position and the callback type that invoked them.

This matters because a single interaction in INP is rarely one long task. A 40-millisecond click handler followed by a long style and layout pass can sum to well over a second of user-visible delay, yet no single task crosses the Long Tasks threshold, so that API reports nothing. LoAF captures the entire frame as the real unit of blocking.

Why it beats long tasks

The Long Tasks API has been available for many years, but two limitations make it a poor fit for INP debugging. First, it misses the common case of several medium tasks plus a long render adding up to a bad interaction. Second, it reports the container where a task happened, such as the enclosing frame or element, but not which script ran, so you still have to reopen DevTools and re-record the interaction to find the cause.

LoAF replaces both gaps. It measures the frame as a whole and it names the exact script and function that delayed it, so the result is actionable in the field, not just in a lab. There are no plans to remove Long Tasks, but for new INP diagnostics the Long Animation Frames API is the superior tool, and it is available in Chromium-based browsers from Chrome 123 onward.

Collecting LoAF data

The quickest route is the attribution build of the web-vitals library, which correlates Long Animation Frame entries with the slowest INP interaction automatically.

import { onINP } from "web-vitals/attribution";

onINP((metric) => {
  metric.attribution.longAnimationFrameEntries.forEach((entry) => {
    entry.scripts.forEach((script) => {
      console.log(script.toJSON && script.toJSON().url, script.name);
    });
  });
}, { reportAllChanges: true });

If you read the raw API instead, observe long-animation-frame entries with a performance observer, and use feature detection before relying on it, since it is unsupported in Firefox and Safari and will simply produce no entries there. The opportunities it identifies in Chromium usually apply to every browser, so an empty source set is not a reason to ignore the findings.

Once you have a list of the top scripts that overlap your slowest interactions, break the work down by origin to separate your own code from third-party embeds, then target the worst offender. See improve INP, the INP debugging guide and how the web-vitals library collects field data for the surrounding workflow.