CLS Debugger
Find which elements cause layout shifts and fix the jank.
What is Cumulative Layout Shift?
CLS measures visual stability—how much elements move unexpectedly while the page loads. A high CLS score means users experience jarring shifts, like clicking a button that suddenly moves because an ad loaded above it.
Google considers CLS one of the three Core Web Vitals that directly affect search rankings. A score of 0.1 or below is considered good.
Layout Shift Example
Elements moving after render causes poor user experience and missed clicks.
Common CLS Causes & Fixes
Most layout shifts come from these common issues
Images without width/height push content when they load.
<img width="800" height="600" ...> Custom fonts can cause text to reflow when they load.
font-display: optional; Ads, embeds, and async content push existing content.
Reserve space with min-height Avoid animating properties that trigger layout.
Use transform, not top/left Banners, cookie notices, and alerts inserted at the top.
Use position: fixed or sticky Async content should have skeleton loaders.
Show skeleton while loading Explore more Core Web Vitals tools