Web features explorer

Layout instability performance entries

Limited availability

A layout-shift performance entry measures the layout stability of web pages based on movements of the elements on the page. They're used to calculate cumulative layout shift (CLS), a common metric for perceived stability.

Browser support

  • Chrome 84 Released on 2020-07-27
  • Chrome Android 84 Released on 2020-07-27
  • Edge 84 Released on 2020-07-16
  • Firefox Not supported Position: positive Bugs: 1651528
  • Firefox for Android Not supported Position: positive
  • Safari Not supported
  • Safari on iOS Not supported
👍
27

Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.

MDN documentation

Specifications

Usage (according to Chrome Platform Status)

~42.018% of page loads. More data at chromestatus.com.

Web Platform Tests (WPT)

View the latest WPT test results for this feature

Developer use cases

  • Measure performance metrics on different browsers Measure performance metrics on different browsers [see original comment]
  • Accurately measure user experience across all browser engines. Accurately measure user experience across all browser engines. [see original comment]
  • Detect and troubleshoot layout shift issues across all browsers. RUM platforms (I work on Datadog RUM, but Cloudflare, New Relic, and others face the same problem) use `layout-shift` entries not just to compute CLS scores, but to pinpoint *which* element shifted and *why* — that's what turns a metric into an actionable diagnostic. Detect and troubleshoot layout shift issues across all browsers. RUM platforms (I work on Datadog RUM, but Cloudflare, New Relic, and others face the same problem) use `layout-shift` entries not just to compute CLS scores, but to pinpoint *which* element shifted and *why* — that's what turns a metric into an actionable diagnostic. [see original comment]

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist