The short answer
Cumulative Layout Shift measures how much a page's content moves unexpectedly as it loads. Google counts it as one of three Core Web Vitals, and a score of 0.1 or below is Good. Four things cause almost all of it: images and embeds with no reserved space, web fonts that swap and reflow the text, content injected above what the reader is already looking at, and animations that move layout instead of pixels.
The fix for every one is the same idea: reserve the space before the thing loads. Dimensions on media, metric overrides on fonts, min-height on injection slots, and transform instead of top, left or margin for movement.
- Reserve space before anything loads. That removes most CLS.
- Aim for 0.1 or less; keep a buffer and target about 0.05.
- Measure with field data first (Search Console, CrUX), then reproduce and fix in the lab (Lighthouse, Chrome DevTools).
How CLS Is Scored
Good
0 to 0.1
Needs Improvement
0.1 to 0.25
Poor
Over 0.25
Each unexpected shift is scored as its impact fraction, how much of the visible screen moved, multiplied by its distance fraction, how far it moved relative to the viewport height. CLS is not the sum of every shift across the whole visit. It uses a session window: shifts less than a second apart are grouped, each group is capped at five seconds, and your CLS is the largest single group. Movement you trigger yourself, such as opening a menu you clicked, does not count.
Google judges the number at the 75th percentile of real page loads, so you only pass when roughly three in four visits are at or below 0.1. That is why a page can look perfect on your fast laptop and still fail: the score is set by slower devices and connections where assets arrive late and shifts are larger.
Target 0.05 in practice
The Good threshold is 0.1, but experienced teams aim for about 0.05 to hold a safety buffer. CLS moves when you add an ad unit, change a font or ship an experiment, and a page sitting right on 0.1 slips into Needs Improvement with the smallest change.
Watch It Diagnosed
Reading about layout shift only goes so far. This walkthrough shows the elements moving in a real browser and the tooling that pinpoints them.
The 4 Most Common CLS Causes and Fixes
Images and embeds with no reserved space
HIGHThe browser cannot reserve layout space before the file downloads, so content below jumps once it knows the real size.
Fix
Add width and height attributes to every image, iframe and video. For responsive media, set a CSS aspect-ratio on the container so the box is sized before the asset loads.
Web font swap
HIGHThe fallback font and the custom font have different character dimensions, so the text reflows when the custom font arrives.
Fix
Use font-display to control the swap, preload the font, and set metric overrides (ascent-override, descent-override, line-gap-override, size-adjust) on the fallback so it matches the custom font.
Content injected above what the reader sees
HIGHAds, cookie banners, notices or chat widgets inserted after render push the existing content down.
Fix
Reserve space with a min-height container sized to the largest expected element. Never insert above content the reader is already looking at. Pin banners to the bottom or over the top rather than above the flow.
Layout-affecting animations
MEDIUMAnimating top, left, margin, width or height triggers reflow and shifts surrounding elements.
Fix
Rebuild movement with transform: translate() and scale(), and fades with opacity. These run on the compositor thread and do not change document layout, so they cannot cause CLS.
Images are the most common offender, so our image SEO guide covers dimensions and modern formats in depth. For the wider picture, measuring PageSpeed and Core Web Vitals shows where CLS sits alongside LCP and INP.
How to Find and Fix CLS, Step by Step
The order matters. Field data tells you whether a problem is real and widespread, and only then is it worth opening the lab tools to fix a specific element.
- 1
Start with field data
Open the Core Web Vitals report in Google Search Console and look at the CLS status for mobile and desktop. This is the 75th-percentile score from real Chrome users over the last 28 days, grouped into URL groups of similar pages. It tells you whether a problem is real and which templates it affects.
- 2
Reproduce it in the lab
Run the worst URL group's representative page through PageSpeed Insights or Lighthouse. Lab CLS is measured in a controlled load, so it is repeatable and safe to test fixes against, even though it will not match the field number exactly.
- 3
Find the element that moves
In Chrome DevTools, open the Performance panel, record a load with network and CPU throttling, and look at the Layout Shift entries. DevTools highlights the exact node that moved and when, which turns a vague score into a specific element to fix.
- 4
Fix the biggest shift first
Reserve space for that element using the matching fix below, then re-record. One undimensioned hero image or one late banner is often most of the score, so the first fix usually moves the number the most.
- 5
Confirm in the field
Lab data confirms the element stopped moving, but only field data confirms real visitors benefit. Watch the Search Console Core Web Vitals report over the following weeks, since it updates on a rolling 28-day window and lags your deploy.
A Worked Example
Illustrative scenario, not client data
A shop's category page fails CLS on mobile with a 75th-percentile score of 0.28, flagged in the Search Console Core Web Vitals report for the whole category template. Here is how the steps above narrow a scary number down to three edits.
- Reproduce: PageSpeed Insights on a representative category URL shows lab CLS of 0.24. The problem is real, not a one-off.
- Find the movers: a DevTools Performance recording shows three Layout Shift entries: a promo banner that loads a second in and pushes the grid down, product images with no dimensions, and the page heading reflowing when the brand font swaps in.
- Fix the biggest first: the banner is most of the score. Giving its slot a fixed min-height, reserved whether or not a promo is live, drops lab CLS to about 0.09 on its own.
- Then the rest: width and height on the product images, and metric overrides plus preload on the brand font, take it to roughly 0.02 in the lab.
- Confirm in the field: over the next few weeks the Core Web Vitals report moves the category template from Poor to Good as the rolling 28-day window catches up with the deploy.
The lesson is the one behind every CLS fix: one late, unreserved element is usually most of the score. Find it, give it space, and the number falls fast.
Where Murkuz Fits
Murkuz does not measure CLS. That is what Lighthouse, PageSpeed Insights, the Chrome User Experience Report and the Core Web Vitals report in Search Console are for, and they are the right tools for it. Murkuz is a read-only connector that puts your Search Console, Analytics 4 and Bing data inside Claude or ChatGPT.
Where it helps is after a fix. Ask Page_Search_To_Behaviour about a page you repaired and it puts what the page earns in search next to what visitors then do on it, so you can see whether a steadier layout came with better engagement. Ask Search_Analytics for the clicks and impressions on that URL before and after the deploy. It will not tell you a page is janky, but it will tell you whether the work paid off. See the Search Console connector.
Further reading
The references behind this guide, starting with Google's own documentation on the metric and its fixes. Each one was opened and read before it was added here.
Official docsweb.dev
Cumulative Layout Shift (CLS)Google's definition of the metric: what it measures, how impact and distance fractions combine, and why a score of 0.1 or less is Good. Read this first.
Official docsweb.dev
Optimize Cumulative Layout ShiftThe companion fix guide. Walks through undimensioned images, ads, embeds and fonts, and the reserve-the-space pattern that solves each one.
Official docsweb.dev
Best practices for fontsHow to load and render web fonts without a jarring swap, including font-display and metric overrides. The reference behind the font section here.
Official docsGoogle Search Central
Understanding Core Web Vitals and Google Search resultsGoogle's own statement on how Core Web Vitals, CLS among them, factor into ranking and where to see the field data in Search Console.
ReferenceMDN Web Docs
aspect-ratio (CSS property)The CSS property that holds a fixed width-to-height ratio so a container reserves the right space before a responsive image or embed loads.
Frequently Asked Questions
What is a good CLS score?
Google's thresholds are 0.1 or below for Good, above 0.1 up to 0.25 for Needs Improvement, and above 0.25 for Poor. The score is judged on the 75th percentile of real page loads, so you pass only when about three in four visits are at or below the threshold. Many teams target roughly 0.05 to keep a buffer, because a new ad unit, font change or A/B test can nudge the number up at any time.
How is Cumulative Layout Shift calculated?
Each unexpected shift scores the impact fraction, how much of the visible screen moved, multiplied by the distance fraction, how far it moved relative to the viewport height. CLS is not a simple sum of every shift over the whole visit. It uses a session window: shifts less than one second apart are grouped, each group is capped at five seconds, and your CLS is the largest single group. Movement you cause yourself, such as expanding an accordion you clicked, is not counted.
How do I measure CLS on my site?
Use two kinds of data. Field data is what real visitors experienced: the Core Web Vitals report in Google Search Console and the Chrome User Experience Report (CrUX) show your 75th-percentile CLS over 28 days. Lab data is a controlled test you can run on demand: Lighthouse, PageSpeed Insights and the Performance panel in Chrome DevTools reproduce and highlight the shifting elements. Field data tells you whether you have a problem; lab tools tell you which element to fix.
Why do images without explicit dimensions cause layout shift?
When the browser meets an image tag with no width and height, it does not know how much vertical space to reserve, so it lays the page out without the image and then pushes everything below it down once the file arrives and its real size is known. Setting width and height attributes, or a CSS aspect-ratio on the container, lets the browser reserve the correct space in the first layout pass, before the image loads.
How do web fonts cause CLS, and how do I stop it?
A custom font almost never has the same character widths and line height as the fallback it replaces, so when it swaps in, the text reflows and everything below shifts. Reduce it two ways: use font-display to control the swap, and set font metric overrides (ascent-override, descent-override, line-gap-override, and size-adjust) on the fallback so its dimensions match the custom font closely. Preloading the font so it arrives before first paint helps too.
Do CSS animations and transitions contribute to CLS?
Animating layout properties such as top, left, margin, width or height forces the browser to recompute layout and can push other elements, which counts toward CLS. Animating transform and opacity does not, because those run on the compositor and do not change the document layout. Rebuild position and size animations with transform (translate and scale) and you remove animation-driven shift entirely, while also getting smoother motion.
Does CLS actually affect my Google rankings?
Core Web Vitals, including CLS, are part of Google's page experience signals, so they can help as a tie-breaker between pages of similar relevance. Google is clear that great page experience does not outrank genuinely more useful content, and that there is no fixed cut-off that triggers a penalty. Treat CLS as a user-experience problem worth fixing on its own terms, with a modest ranking upside, not as a switch that turns traffic on or off.