Cumulative Layout Shift Debugger (CLS)

The purpose of the Cumulative Layout Shift Debugger is to visualize the cumulative layout shifts of any webpage so it becomes easier to identify what needs improving on mobile and/or desktop in the initial load of a website. The Cumulative Layout Shift Debugger uses the Layout Instability API in Chromium to detect and measure the layout shifts in the viewport between when a webpage starts loading and when it finishes loading and calculates its cumulative layout shift score.

Cumulative Layout Shift and its scores are all about the impact moving HTML elements compared to the size of the viewport have (without user interaction) when a page is loaded and/or viewed. The animation in this tool shows the size of the HTML elements moving and visualizes how large of a movement this represents in the mobile viewport while loading. The list of HTML elements responsible for the movement seen in the animation, with the corresponding scores, and the test data can be found in the tables below the animation.

How real users experience the Cumulative Layout Shift on the hostname (origin) level and what Google uses for its Core Web Vitals: Aggregated data from Real User Measurements for the entire relevant hostname (origin) of the tested URL. Data is queried from the Chrome User Experience Report API and represents a rolling average of the past 28 days.

The Cumulative Layout Shift Debugger is under constant development and improvements will be added over time. Bugs will happen. Despite best efforts to maintain the code base and data quality, no guarantees can or will be given. Data may be incomplete and/or errors may occur.

CLS Debugger


Article Navigation

Wait .. there's more!

Online CV Jan Rajtoral