Cumulative Layout Shift (CLS) measures how much your page visually jumps around as it loads, a frustrating experience that causes users to mis-tap, lose their place in long-form content, and abandon transactions mid-flow when a button moves at the wrong moment.
Loading Website Speed Test…
CLS score measurement
Shift source element identification
Before/after comparison support
No sign-up required
Drop the Website Speed Test into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.
Embed code
<iframe
src="https://www.fixtools.io/web-tools/website-speed-test?embed=1"
width="100%"
height="780"
frameborder="0"
style="border:0;border-radius:16px;max-width:900px;"
title="Website Speed Test by FixTools"
loading="lazy"
allow="clipboard-write"
></iframe>Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.
Cumulative Layout Shift (CLS) measures the degree to which visible elements unexpectedly move during page loading. It is expressed as a unitless score representing the cumulative impact of all unexpected layout shifts, calculated as the product of the impact fraction (how much of the viewport shifted) and the distance fraction (how far elements moved). A shift that moves 50 per cent of the viewport content by 10 per cent of the viewport height produces a CLS contribution of 0.05. Google's thresholds are Good under 0.1, Needs Improvement between 0.1 and 0.25, and Poor above 0.25. Unexpected layout shifts are particularly damaging to user experience when they cause users to click on the wrong element, for example a button that shifts just as the user taps it, triggering an unintended action such as confirming a purchase the user was still evaluating.
The most common cause of poor CLS is images without explicit width and height attributes in the HTML. When a browser encounters an img tag without dimensions, it cannot reserve the correct space in the layout until the image actually downloads and the browser learns its intrinsic dimensions. When the image eventually loads, all content below it shifts downward to accommodate the now-known dimensions, producing a cumulative shift that registers in the CLS score. The fix is mechanical and immediate: add explicit width and height attributes to every image tag, or use the CSS aspect-ratio property to reserve the correct space before the image loads. Modern browsers use these attributes to calculate the aspect ratio and reserve the correct space immediately during initial layout, preventing any layout shift when the image data eventually arrives.
Three other frequent CLS causes require different fixes that target their specific mechanisms. Web fonts cause layout shift when the fallback font renders at a different size than the loaded font, producing the FOUT or Flash of Unstyled Text problem familiar to anyone who has used custom typography. The fix is to use font-display: optional, which prevents the swap entirely for slow-loading fonts, or font-display: swap combined with size-adjust to match fallback and loaded font metrics so the swap is visually imperceptible. Late-injected banner ads and cookie banners push existing content down when they load after the page has already rendered. Reserve space for ads and banners before they load using min-height CSS on their containers. Dynamically injected content such as navigation menus, promotional banners, and infinite scroll loads can push existing content in ways that surprise users, and the fix is to ensure injections only occur below the viewport or in spaces explicitly reserved for them.
Diagnosing CLS in production requires identifying which specific elements are contributing to the cumulative score, because the fix is element-specific and depends on what that element is. Chrome DevTools' Performance panel includes a Layout Shift section that lists every shift event with its score contribution and the element responsible, played back frame by frame so you can see exactly when each shift occurs. The Web Vitals JavaScript library can also be deployed in production to attribute real-user CLS to specific elements, which is invaluable when lab tests show a healthy CLS but field data in Search Console reveals a problem that only appears under conditions a lab cannot reproduce, such as slow network connections that delay image loading past the user's first interaction with the page.
Enter your URL to measure CLS and identify the specific elements causing layout shifts on your page.
Step-by-step guide to check your cls score (cumulative layout shift):
Enter your URL
Paste the URL of the page you want to test for layout shift issues, choosing a page that represents a meaningful traffic pattern rather than a stripped-down development view. Pages with heavy ad inventory, lots of images, or third-party widgets are usually the worst CLS offenders, so test those first if you suspect a problem. The tool measures the page exactly as a real visitor would experience it on a typical mobile device.
Review the CLS score
Check the CLS value against Google's standard thresholds. Good is under 0.1, Needs Improvement sits between 0.1 and 0.25, and Poor is anything above 0.25. Note that the score is unitless and represents the cumulative impact of every shift during the measurement window, so a single dramatic shift can push the score into Poor territory even when the rest of the page is visually stable throughout the load.
Identify the shifting elements
Review the report to see which specific elements are contributing to the CLS score and how much each one contributes. Note each shift source separately, because the fix for an image-driven shift differs from the fix for an ad-driven shift or a font-driven shift. Capture screenshots of each problematic element so you can show the team exactly what is moving and at which moment in the load sequence, which makes the subsequent fix conversation faster and more concrete.
Apply targeted fixes
For image-driven shifts, add explicit width and height attributes or use CSS aspect-ratio. For ad and embed shifts, reserve CSS space with min-height on the container so the slot occupies its eventual size from the first paint. For dynamically injected content, switch to fixed positioning or pre-render the content so it occupies its space at initial load rather than appearing later. Re-test after each fix in isolation so you know which change drove which improvement, rather than batching everything and losing the attribution.
Common situations where this approach makes a real difference:
Ad-heavy news site
A news site with CLS of 0.45 across its article template investigates the cause using the FixTools checker. The report shows three ad slots loading at different intervals without reserved height are each contributing to the cumulative shift, with the largest slot near the top of the article responsible for almost half the total score. Adding min-height CSS sized to the largest expected ad creative for each container reduces CLS to 0.08, comfortably back inside the Good range. The site sees improved time-on-page metrics within weeks as readers stop losing their place when ads finally render.
Cookie banner fix
An e-commerce site discovers that its cookie consent banner, which loads roughly 2 seconds after the page first renders, pushes every other element down by 80 pixels and produces a single dramatic shift event that dominates its CLS score. Moving the banner to a fixed-position overlay at the bottom of the viewport, where it overlays content rather than displacing it, eliminates the CLS contribution entirely without sacrificing the banner's legal compliance function. The fix is a single CSS change and ships the same day the cause is identified.
Image gallery improvement
A photographer's portfolio site presents a masonry gallery where images load progressively without reserved dimensions, producing a CLS of 0.38 as each new image arrives and pushes the surrounding tiles into new positions. The developer adds explicit width and height attributes to every image tag and wraps each tile in a CSS aspect-ratio container that reserves the correct space from initial layout. CLS drops to 0.04 with no visual change to the gallery design, and the site moves from the Poor CLS bucket into the Good bucket in Search Console within the next CrUX update window.
Use this when you notice your page content jumping around for users, when your CLS score is flagged as Poor in Google Search Console, or as part of a Core Web Vitals audit.
Get better results with these expert suggestions:
Add width and height to every image tag
The single fastest CLS fix is to add explicit width and height attributes to every img tag in your HTML markup. This allows browsers to calculate the intrinsic aspect ratio and reserve the correct layout space before the image data downloads, which prevents the most common cause of layout shift across the entire web. This is a one-line change per image, takes a single afternoon to implement across most sites, and typically produces immediate CLS improvement that shows up in the next Lighthouse run without any other intervention required.
Reserve space for ads and cookie banners
Late-loading ads and cookie consent banners are among the most common sources of high CLS scores because both load on a delay and both insert visual content where there previously was none. Reserve their space with a min-height placeholder before they load by adding a container div sized to the expected dimensions and injecting the ad or cookie banner into that pre-sized container rather than pushing surrounding content out of the way. The same technique works for video embeds, social media widgets, and any other late-loading visual content that lives inline on the page.
Use size-adjust to match font fallback dimensions
Web font loading causes CLS when the fallback font renders at different proportions than the loaded font, producing the visible reflow known as FOUT when the custom font finally arrives and the browser re-renders the text. The CSS size-adjust descriptor, supported in all modern browsers, scales the fallback font to match the loaded font's metrics so the swap is visually imperceptible to users. Pair size-adjust with font-display: swap for the best balance of perceived performance and visual stability across the loading sequence.
Record CLS as a video to identify shift source
For high CLS scores where the shift source is not immediately obvious, record the page loading as a video using the Chrome DevTools Performance panel and play back frame by frame to identify exactly which element shifts and at what point in the load timeline the shift occurs. This visual debugging method quickly reveals the shift source for complex CLS issues that involve interactions between multiple late-loading elements, and the recording itself becomes useful documentation for explaining the fix to a stakeholder who needs to authorise the work.
Always specify width and height on images
The single most common cause of CLS is images without explicit width and height attributes. Without dimensions, the browser reserves no space and content jumps down when the image loads. Adding width and height eliminates this class of CLS entirely.
Reserve space for ads and embeds
Ad slots, video embeds, and dynamic content often load asynchronously and push content down when they appear. Use CSS to reserve a minimum space for these elements before they load.
Avoid injecting content above existing content
Banners, cookie notices, and notifications injected above the page fold after load cause significant CLS. Load them before initial render or animate them in from outside the viewport to avoid shifting existing content.
More use-case guides for the same tool:
Open the full Website Speed Test — free, no account needed, works on any device.
Open Website Speed Test →Free · No account needed · Works on any device