/Web APIs

Layout Instability API

The Layout Instability API provides interfaces for measuring and reporting layout shifts.

Concepts and Usage

A layout shift happens when any element that is visible in the viewport changes its start position between two frames. These elements are described as being unstable, and contribute to a poor Cumulative Layout Shift (CLS) score, indicating a lack of visual stability.

The Layout Instability API provides a way to measure and report on these layout shifts. All tools for debugging layout shifts, including those in DevTools, use this API. The API can also be used to observe and debug layout shifts by logging the information to the console, to send the data to a server endpoint, or to Google Analytics.



Provides insights into the stability of web pages based on movements of the elements on the page.


Provides debugging information about elements which have shifted.


The following example observes all layout shifts, and prints them to the console.

new PerformanceObserver((list) => {
}).observe({type: 'layout-shift', buffered: true});


See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.