Cumulative Layout Shift

Cumulative Layout Shift (CLS) is a Core Web Vital that measures how much a page’s visible content unexpectedly moves during loading or interaction.

Beginner3 min readUpdated 2026-07-26Reviewed by Lucía Marín

Key takeaways

CLS measures unexpected visual movement during page load or interaction.
A good CLS score is under 0.1; poor scores hurt SEO and user experience.
Main causes: images without dimensions, ads, embeds, and web fonts.
Fix by reserving space for all dynamic content and using font-display: swap.
Monitor CLS with real-user data, not just lab tools.

CLS is one of Google’s Core Web Vitals and a key signal of page stability.

Example

A user reads an article on mobile. A banner ad loads after the text, pushing the content down. The user loses their place and has to scroll back. This unexpected movement is a layout shift. CLS measures the total impact of such shifts across the page's lifetime.

When should I use this?

Monitor CLS whenever you want to ensure a stable, user-friendly page experience. It is especially important for:

Pages with ads, embeds, or dynamic content.
Mobile-first or responsive designs.
Sites aiming to meet Google’s page experience ranking criteria.
Any page where user engagement and bounce rate matter.

What it is not

CLS is not a measure of page load speed or time.
It does not count shifts caused by user actions (e.g., clicking a button).
It is not the same as visual design quality or aesthetics.
CLS does not measure content relevance or SEO keyword performance.

Quick start

Check your current CLS using PageSpeed Insights or Google Search Console.
Identify shifts with Lighthouse or the Chrome DevTools Performance panel.
Fix images and videos: Add explicit width and height attributes or use CSS aspect-ratio.
Reserve space for ads and embeds: Use placeholder containers with fixed dimensions.
Optimize web fonts: Use font-display: swap to prevent invisible text shifts.
Avoid inserting dynamic content above existing content after the page has loaded.

Common mistakes

Leaving image or video dimensions unspecified, which forces the browser to reflow content after assets load.
Inserting banners, cookie notices, ads, or pop-ups above existing content without reserving space.
Assuming animations always cause CLS, when user-initiated changes and transform-based animations are usually not counted the same way.
Optimizing only for lab tools and ignoring field CLS data from real users.

Next step

Core Web VitalsLearn how CLS fits with LCP and INP in Google's page experience metrics.

FAQ

What is a good CLS score?

A good CLS score is less than 0.1. Scores between 0.1 and 0.25 need improvement, and scores above 0.25 are poor.

How can I improve cumulative layout shift?

Set explicit dimensions on images and videos, reserve space for ads and embeds, use font-display: swap for web fonts, and avoid inserting dynamic content above existing content after the page has loaded.

Does CLS affect SEO?

Yes, CLS is one of Google's Core Web Vitals and is a ranking factor in the page experience signal. Poor CLS can negatively impact search rankings, especially for mobile.

Sources

web.dev: Cumulative Layout Shift (CLS) — Primary Google explanation of the metric and how CLS is defined.
web.dev: Optimize Cumulative Layout Shift — Google guidance on how to reduce CLS and target thresholds.
MDN Glossary: CLS — Clear glossary definition of CLS and what counts as unexpected shift.
Google Publisher Tag: Minimize layout shift — Authoritative guidance for ad-related layout shift prevention.

Reviewed by Lucía Marín, Founding editor.