← Back to release summary

Long Animation Frame Timing

Category
Performance
Type
New or changed feature
Status
Enabled by default (Chrome 123)
Intent stage
Origin Trial

Summary

This is a extension of long tasks. It measures the task together with its subsequent rendering update, adding information such as long running scripts, rendering time, and time spent in forced layout and style ("layout thrashing"). Developers can use this as a diagnostic for "sluggishness", which is measured by INP, by finding the causes for main-thread congestion which is often the cause for bad INP.

Motivation

Long tasks, shipped in Chrome 58, are marketed as the way to diagnose responsiveness/jank issues such as long INP. However, in the years since we've shipped them we found that they are lacking: 1. They don't contain the rendering phase, which means a lot of what goes into blocking interactivity is not counted 2. Long tasks are missing details about what made the task long 3. UI events are not specified not implemented in terms of tasks, causing confusion. 4. Internal changes to how we deal with tasks in Chrome change the meaning of a "task" too often. The revamp: - Counting frames instead of task: from the beginning of the task until the frame has been rendered or the task is complete and there are no changes. - Add information about how long it took to style&layout, as well as a breakdown of long-running same-frame top-level scripts, plus additional information that can help diagnose long main-thread blocking periods. See https://developer.chrome.com/docs/web-platform/long-animation-frames

Standards & signals

Docs: https://docs.google.com/document/d/1SeMd4KbXWZf0ZnRSMvYhjSBpXPBln5xrRyTu2Gr68BY/edit#heading=h.7nki9mck5t64

Explainers: https://github.com/w3c/longtasks/blob/loaf-explainer/loaf-explainer.md

View on chromestatus.com