Cumulative Layout Shift (CLS) is what happens when a page is loading and elements suddenly jump around — a button moves right before you click it, text shifts down when an image loads, or an ad pops in and pushes the content you were reading off the screen. It’s disorienting. It breaks trust. And since 2021, Google has used it as a ranking signal.
Google measures CLS on a scale from 0 to 1. A score below 0.1 is “good.” Between 0.1 and 0.25 is “needs improvement.” Above 0.25 is “poor.” A poor CLS score hurts your search rankings and your conversion rate simultaneously — visitors who experience unexpected layout shifts bounce at higher rates.
What CLS Actually Measures
CLS is calculated by multiplying the impact fraction (how much of the viewport was affected by the shift) by the distance fraction (how far elements moved, as a proportion of the viewport). A large image loading without dimensions reserved can produce a CLS score of 0.4+ on its own.
Google doesn’t measure a single layout shift. It accumulates all unexpected shifts during the page load session. The cumulative score is what gets reported — which means multiple small shifts can add up to a poor score even if no single one seems catastrophic.
One nuance: Google also measures “interaction-expected shifts” — layout changes triggered by a user action (clicking a button to expand an accordion, for example) are not counted against your CLS score. Only unexpected shifts during load are measured.
The Most Common Causes of High CLS
Images Without Explicit Dimensions
The most common cause. When an image loads without width and height attributes in the HTML, the browser has no idea how much space to reserve for it. It renders the surrounding content first, then shifts everything when the image loads.
The fix is straightforward: always set width and height on every img tag. This does not mean you lose responsive design — CSS max-width: 100% still applies. The dimensions tell the browser the aspect ratio, not the exact display size.
<!-- Wrong: browser doesn't know the dimensions -->
<img src="hero.webp" alt="Office interior">
<!-- Right: browser reserves the space before the image loads -->
<img src="hero.webp" alt="Office interior" width="1400" height="700">Page builders like Elementor and Divi frequently omit these attributes, or generate them inconsistently, which is one reason Elementor sites commonly have poor CLS scores.
Web Fonts Loading Late
When a custom web font loads after the browser has already rendered text using a system font fallback, the text reflows. The new font has different letter spacing, line height, or character width — everything moves.
The fix has two parts. First, preload the font in the <head> so it’s fetched as early as possible:
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>Second, use font-display: optional in your @font-face declaration if you’re comfortable falling back to a system font, or font-display: swap combined with a size-adjusted fallback that closely matches the custom font’s metrics. The size-adjust property in CSS lets you match the fallback font’s size so the transition causes minimal shift.
Ads, Embeds, and Iframes Without Reserved Space
Google Ads, YouTube embeds, third-party review widgets — any external content that loads asynchronously after the main page can push content down. If the space isn’t reserved before the embed loads, it’s a CLS source.
Reserve the space with a CSS container that matches the embed’s dimensions:
.ad-container {
min-height: 250px; /* reserve space for the ad unit */
width: 100%;
}For YouTube embeds, use a responsive container with a known aspect ratio (16:9 is standard). The aspect-ratio CSS property makes this straightforward: aspect-ratio: 16 / 9.
Dynamically Injected Content
Content injected by JavaScript after the initial page render — cookie banners, chat widgets, notification bars, newsletter popups that appear at page load — all cause layout shift if they push existing content rather than overlaying it.
Cookie consent banners that push the page down (rather than overlaying from the top or bottom with position: fixed) are a common culprit. The solution: use position: fixed or position: sticky for any element that appears after page load. Fixed-position elements don’t affect document flow, so they don’t cause layout shift.
Late-Loading Custom Fonts via Google Fonts
The standard Google Fonts implementation loads a CSS file, which then triggers font file downloads. Two network roundtrips before the font is available. On slow connections, this means a significant FOUT (Flash of Unstyled Text) or FOIT (Flash of Invisible Text) — both of which cause layout shift.
Self-hosting fonts eliminates the extra roundtrip. Download the font files, host them on your domain, and use @font-face directly. Combined with a preload link, this is the fastest path to font stability.
How to Diagnose Your CLS Score
Several tools measure CLS:
Google PageSpeed Insights — Free, runs a Lighthouse test and shows your CLS score alongside LCP and FID. URL: pagespeed.web.dev
Google Search Console — Shows real-user CLS data under “Core Web Vitals.” This is field data (actual user measurements), not lab data. Both matter — lab data is reproducible; field data is what Google uses for rankings.
WebPageTest — Shows a filmstrip of your page loading and highlights layout shift events. Useful for identifying exactly which element is shifting and when.
Chrome DevTools — In the Performance panel, layout shifts are logged as green bars. The Layout Shift column in the Experience section shows the shift score for each event.
You can also run a full audit including CLS at honest.designodin.com.
CLS in WordPress Specifically
WordPress sites have some recurring CLS sources that don’t affect static sites:
WordPress admin bar — When logged in, WordPress injects an admin bar at the top of the page with JavaScript. If CSS for it loads late, it causes a layout shift. Not visible to site visitors, but visible in lab testing while you’re logged in. Test your CLS while logged out.
WooCommerce cart fragments — WooCommerce makes an AJAX request on every page load to update the cart count. This triggers a DOM update that can cause layout shift if the cart icon is in a position that affects layout. Some caching configurations block this request, which creates a different problem (stale cart data), but resolves the CLS.
Plugin-injected banners — Plugins that add admin notices, sale banners, or shipping threshold messages often inject content with JavaScript, causing shifts. Audit your active plugins for any that modify the page visually after load.
Slider plugins — Slider/carousel plugins often reserve space for only the first slide until JavaScript loads, then expand or resize. This is a classic high-CLS pattern. If you’re using a slider plugin, measure your CLS with and without it.
Fixing CLS: Priority Order
Address CLS issues in this sequence:
- Add
widthandheightto all images (biggest impact, easiest fix) - Reserve space for ads and embeds with CSS containers
- Switch cookie consent and popups to
position: fixed - Preload critical fonts and self-host where possible
- Audit JavaScript-injected content and convert to
position: fixedor remove
After each change, retest with PageSpeed Insights and verify the CLS score improves. Don’t fix everything at once — isolate changes so you know which fixes moved the number.
What a Good CLS Score Means for Rankings
CLS is one of three Core Web Vitals. Google confirmed in May 2021 that Core Web Vitals are ranking signals, combined under the “Page Experience” signal. While not as heavily weighted as content relevance or backlinks, poor Core Web Vitals create a measurable ranking disadvantage.
More directly: Google’s own user experience research shows that sites with good Core Web Vitals have 24% lower abandonment rates. Fewer visitors leaving before converting means more business value from the same traffic — without increasing your ad spend or SEO effort.
A CLS score above 0.25 is also a signal your site was likely built with bloated tools. Page builder sites commonly score in the 0.2–0.5 range because they load assets without proper dimension handling. A hand-coded WordPress site with explicit image dimensions and no dynamic injection typically scores below 0.05.
FAQ
What is a good CLS score for a business website? Below 0.1 is considered “good” by Google. Below 0.05 is excellent. Above 0.25 is “poor” and represents a ranking disadvantage.
Does CLS affect conversions, not just rankings? Yes. Layout shift causes accidental clicks (the “phantom click” problem, where a visitor clicks a button that moved into position), form submission errors, and general distrust. Research from Google found that users on sites with poor CLS complete purchases less often than those on sites with good CLS.
How do I find which element is causing my CLS? Use WebPageTest’s filmstrip view or Chrome DevTools’ Performance panel. Both show layout shift events with timestamps and identify the element responsible.
Is CLS different on mobile vs. desktop? Yes. Mobile scores are often worse because slower connections and smaller viewports amplify the effect of late-loading content. Google’s Core Web Vitals report in Search Console separates mobile and desktop scores.
Do videos cause CLS?
They can if the container isn’t sized properly before the video loads. Use a fixed aspect-ratio container (aspect-ratio: 16/9) to reserve the space regardless of when the video loads.
Does switching to a faster host fix CLS? Partially. A faster host reduces the time window during which layout shifts can occur (the page loads faster, so fewer assets are still loading). But it doesn’t fix the root causes — missing image dimensions, late font loading, and injected content require code-level fixes.
Will a caching plugin fix my CLS score? No. Caching plugins serve pages faster, which can improve LCP but not CLS. CLS is a layout issue, not a speed issue. The fix is always in the HTML/CSS — explicit dimensions, reserved space, and font loading strategy.
If your site has a CLS score above 0.1 and you want it fixed correctly — not with a plugin that masks symptoms but with actual code-level changes — that’s exactly what our custom WordPress development process addresses. Get started here and we’ll audit your current score before the project begins.