What is CLS?

CLS (Cumulative Layout Shift) measures content moving at unexpected moments. If the text you started reading slides down because an ad loaded above it, or a button jumps just as you tap it, CLS is high. It's a unitless score calculated from the size of the moving area and the distance it moves.

#Why it matters

• A jumpy page causes mis-taps, lost reading position and a feeling of distrust.
• CLS is one of the three Core Web Vitals.
• It's usually easy to fix: reserving space is often enough.
• Shifts right after a user interaction (within about 500 ms), such as content moving down when a menu opens, don't count. Only unexpected shifts raise the score.

#Where you see it in SEOAsist

• The Core Web Vitals card on the Overview page shows CLS separately for mobile and desktop.
• SEO analysis raises a Layout shift finding when mobile CLS exceeds 0.1; the suggestion is to fix image dimensions and late-loading blocks.

More: Overview dashboard.

#Example

<!-- No dimensions: pushes everything below it when it loads -->
<img src="/img/product.webp" alt="Oak table">

<!-- With dimensions: the browser reserves the space up front -->
<img src="/img/product.webp" alt="Oak table" width="800" height="600">

<!-- Reserve a fixed height for a late banner -->
<div style="min-height:90px"><!-- campaign banner --></div>

#Common mistakes

• Leaving width/height (or aspect-ratio) off images and videos.
• Inserting a cookie notice or promo bar above the content after load; use an overlay from the bottom instead.
• Text changing size a lot when a web font loads; pick a fallback font with similar metrics.
• Looking for shifts only on first load; content that loads during scrolling also adds to CLS.