Cwv cls

Moderate effort

Found on 42% of audited stores.

Eliminate unexpected layout shifts by reserving space for every image, video, embed, and dynamically injected element so nothing jumps when the page loads.

What it is

Cumulative Layout Shift (CLS) measures how much page content unexpectedly moves around while a visitor is looking at it. Every time an image pops in and shoves text down, a banner slides in from a cookie notice, or a font swap causes a paragraph to reflow, that counts as a layout shift. Google adds all those shifts together into a single score; anything above 0.1 is considered "needs improvement," and above 0.25 is "poor." A score of 1.35 (like the example above) means the page is shifting dramatically — visitors are misclicking, losing their place, and bouncing before they buy.

Why it matters

CLS is one of Google's three Core Web Vitals and is a direct ranking signal in Google Search — a poor score actively suppresses your position in search results, reducing organic traffic and revenue. On mobile, where most ecommerce shopping happens, layout shifts are especially jarring: a customer tapping "Add to Cart" can accidentally tap a shifted link instead, killing the conversion. High CLS also signals a low-quality page experience, which increases bounce rate and reduces the trust visitors place in your store. Google's own data shows that sites meeting Core Web Vitals thresholds see measurably better business outcomes than those that don't.

How to fix it

  1. Audit your CLS sources: open Chrome DevTools → Performance tab, record a page load, then expand the 'Experience' lane to see every Layout Shift event and which elements caused it. Alternatively, use Google Search Console → Core Web Vitals report to find the worst URLs, and PageSpeed Insights (with field data) to confirm the score.
  2. Fix images and videos first — they are the #1 CLS cause: add explicit width and height attributes to every <img> and <video> tag so the browser reserves the correct space before the file downloads. Modern browsers use these to calculate aspect ratio automatically.
  3. Fix banners, cookie notices, and promotional bars: never inject these above existing content after page load. Either render them server-side so space is reserved from the start, or position them as overlays (fixed/sticky) that do not push other content.
  4. Fix web fonts: add font-display: optional or font-display: swap with size-adjust, ascent-override, descent-override, and line-gap-override CSS descriptors to make the fallback font match your web font's metrics so text does not reflow when the custom font loads.
  5. Fix ads and third-party embeds (reviews widgets, social feeds, chat buttons): always wrap them in a container with a fixed min-height that matches the expected rendered size, so the slot is reserved even if the embed loads slowly.
  6. Validate the fix: re-run PageSpeed Insights and check the CLS score is below 0.1. Then wait 28 days and confirm improvement in Google Search Console → Core Web Vitals report (field data lags by roughly 28 days).

Fix it on your platform

Pick your platform for the exact steps.

How to fix cwv cls on Shopify
  1. Images: In your theme editor (Online Store → Themes → Edit code), open the Liquid snippet that renders product/collection images — typically sections/product-template.liquid or snippets/product-image.liquid. Find every <img> tag and add width and height attributes matching the rendered dimensions, e.g. width='800' height='800'. Alternatively install the free 'Booster SEO' or 'TinyIMG' app which patches image dimensions automatically across your theme.
  2. Lazy-loading: Shopify's Dawn and most modern themes already add loading='lazy' and explicit dimensions via Liquid's | image_url filter with width parameter. If yours does not, update image_url calls to use: {{ image | image_url: width: 800 }} and render the img tag with width and height set.
  3. Announcement bar / cookie banner: In the theme editor (Customize → Header), move any announcement bar to a server-rendered position rather than injecting it via JavaScript after load. For third-party cookie apps, choose ones that render as fixed overlays (bottom of viewport), not top-push banners.
  4. Fonts: In your theme's layout/theme.liquid, add font-display: optional to any @font-face declarations. If using Shopify's font picker, edit the generated CSS in assets/base.css to add the descriptor.
  5. Ads / embeds: Wrap any review widgets (e.g. Judge.me, Yotpo) or social feed apps in a <div style='min-height:200px'> container in the relevant section file so space is reserved before the widget JS loads.
  6. Verify: Use PageSpeed Insights on your homepage and top product pages; confirm CLS < 0.1 on both mobile and desktop.
Full Shopify guide →Official Shopify docs ↗
How to fix cwv cls on WooCommerce
  1. Images: Install the 'Specify Image Dimensions' plugin (free, WordPress.org) to automatically add missing width/height attributes to all images output by WordPress and WooCommerce. Alternatively, use the 'Perfmatters' plugin → Image tab → 'Add Missing Image Dimensions'.
  2. Theme: In your child theme's functions.php, ensure add_theme_support('html5', ['img']) is present so WordPress outputs modern image markup. For block themes, check theme.json for any layout that may cause reflow.
  3. Fonts: In Appearance → Customize → Additional CSS (or your child theme's style.css), add font-display: swap (with override descriptors if needed) to all @font-face rules. If using Google Fonts via a plugin, switch to 'Local Google Fonts' plugin which gives you control over font-display.
  4. Cookie / GDPR banners: In your cookie consent plugin settings (e.g. Complianz, CookieYes), set the banner display style to 'bottom bar' or 'modal overlay' rather than a top push-down banner.
  5. Caching / optimisation plugin: In WP Rocket, LiteSpeed Cache, or W3 Total Cache → Media settings, enable 'Add missing image dimensions' and 'Lazy load images'. These tools also defer non-critical JS that may inject shifting content.
  6. Verify: Run PageSpeed Insights or use the Chrome Web Vitals extension on your site; target CLS < 0.1.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix cwv cls on BigCommerce
  1. Images: In Storefront → My Themes → Edit Theme Files, open templates/components/products/product-view.html (and card.html for listing pages). Add width and height attributes to every <img> tag. BigCommerce's Stencil framework provides {{getImageSrcset}} helpers; use {{image width=800 height=800}} to output sized images with explicit dimensions.
  2. Theme CSS: In assets/scss/settings/foundation/images/_settings.scss, ensure img { max-width: 100%; height: auto; } is present so explicit width/height attributes work correctly with responsive layouts.
  3. Banner / promo: In Marketing → Banners, avoid rotating hero banners injected via JavaScript without a reserved container. In your theme's homepage template (templates/pages/home.html), wrap the banner region in a container with a fixed aspect-ratio or min-height.
  4. Fonts: In assets/scss/settings/global/color-and-type/_settings.scss, locate @font-face declarations and add font-display: optional;.
  5. Apps: For review or chat apps installed from the BigCommerce App Marketplace, wrap their embed scripts in a sized container div in the relevant template file.
  6. Verify: Check PageSpeed Insights on your storefront URLs; CLS should be < 0.1 on both mobile and desktop.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix cwv cls on Wix
  1. Images: In the Wix Editor, click any image → Settings → ensure 'Fit' or 'Fill' mode is set and the image container has a fixed height. Wix renders its own image component with reserved space, but if you've set container height to 'auto' it can collapse before the image loads — set an explicit pixel height on the container.
  2. Strips / sections: For each section strip, go to the strip settings and set a fixed minimum height rather than 'fit to content', especially for sections containing images or embeds.
  3. Cookie banner: In Settings → Cookie Banner, choose 'bottom' position so it appears as an overlay, not a top push-down that shifts content.
  4. Wix Chat / bookings widget: These are rendered by Wix natively with reserved space. If using a custom HTML embed (Add → Embed Code → HTML iframe), set an explicit height on the iframe element in the embed settings panel.
  5. Fonts: Wix manages font loading internally; you cannot add font-display descriptors directly. Use Wix's built-in font choices (available in the Text settings panel) rather than custom uploaded fonts to minimise FOUT-related shifts.
  6. Verify: Use Wix's built-in SEO tool (Marketing & SEO → SEO Tools → SEO Assistant) and cross-check with PageSpeed Insights; target CLS < 0.1.
Full Wix guide →Official Wix docs ↗
How to fix cwv cls on Squarespace
  1. Images: Squarespace's image blocks automatically generate width/height attributes in modern templates (7.1). If you are on a 7.0 template, migrate to a 7.1 template to get this benefit automatically.
  2. Banners / announcement bars: In Pages → Not Linked → promotional pop-ups, or in the Announcement Bar settings, set position to 'bottom' or use a modal overlay style to avoid pushing page content down.
  3. Custom code embeds: Go to any page → Edit → Add Block → Code, and wrap third-party scripts (reviews, chat, social) in a <div style='min-height:150px'> so space is reserved. Enter this in Settings → Advanced → Code Injection (site-wide).
  4. Fonts: In Design → Fonts, choose from Squarespace's curated list; these are loaded with optimised settings. For custom fonts added via Code Injection → CSS, add font-display: swap; inside your @font-face rule in Settings → Advanced → Code Injection → CSS.
  5. Header scripts: Any JavaScript injected via Settings → Advanced → Code Injection → Header that modifies layout should be deferred with defer or async attribute to prevent shifts during initial load.
  6. Verify: Run PageSpeed Insights on your Squarespace domain; CLS should be < 0.1.
Full Squarespace guide →Official Squarespace docs ↗
How to fix cwv cls on Webflow
  1. Images: In the Webflow Designer, click any image element → Element Settings (gear icon) → ensure 'Width' and 'Height' are set to explicit values (not 'auto' for both simultaneously). For CMS-bound images, set a fixed aspect ratio container: create a div wrapper with padding-top: 75% (for 4:3) and position the image absolutely inside it, or use the CSS aspect-ratio property in Webflow's Style panel.
  2. Lazy loading: Webflow automatically adds loading='lazy' to images below the fold. Ensure images in the hero/above-the-fold area have loading='eager' (set in Element Settings) so they load immediately without a shift.
  3. Fonts: In Project Settings → Fonts, Webflow inlines font-display: swap for Google Fonts automatically. For custom uploaded fonts (Project Settings → Fonts → Upload), add font-display: optional via a global CSS embed in Project Settings → Custom Code → Head code: <style>@font-face { font-display: optional; }</style>.
  4. Interactions / animations: In Webflow Interactions panel, review any 'Page Load' animations that move elements downward on trigger — replace with opacity-only animations that do not affect layout.
  5. Embeds: For any HTML Embed element (e.g. a reviews widget), wrap it in a div with a min-height style set in the Style panel to the expected rendered height.
  6. Verify: Publish your site and run PageSpeed Insights; check CLS < 0.1 on mobile.
Full Webflow guide →Official Webflow docs ↗
How to fix cwv cls on Adobe Commerce (Magento)
  1. Images: In your theme's Magento_Catalog module override (app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/), open list.phtml and view.phtml. Add width and height attributes to every <img> tag. For the product image widget, set these in the image configuration: app/etc/view.xml under <images> → set width and height for each image ID.
  2. view.xml: Open app/design/frontend/<Vendor>/<theme>/etc/view.xml and confirm every <image id='...'> entry has both <width> and <height> child elements. These values flow into Magento's image helper and automatically add the HTML attributes.
  3. Cookie / consent notices: Adobe Commerce ships with no built-in cookie notice. Third-party cookie extension settings should be configured to display as a fixed bottom bar — check the extension's admin configuration under Stores → Configuration → [Extension Name].
  4. Fonts: In your theme's web/css/source/_typography.less (or .scss equivalent), add font-display: swap to all @font-face rules. Run bin/magento setup:static-content:deploy after changes.
  5. Page Builder / banners: In Content → Pages or Blocks, edit any Page Builder row containing a banner or slider. Set a fixed minimum height on the row (Advanced → Minimum Height) so the container does not collapse before images load.
  6. Verify: Run bin/magento cache:flush, then test with PageSpeed Insights; target CLS < 0.1.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix cwv cls on Shopify Plus
  1. All standard Shopify steps above apply. Additionally, use Shopify Scripts or Launchpad to ensure promotional banners and flash-sale bars are pre-rendered in theme sections rather than injected via client-side JavaScript.
  2. For checkout extensions: in the Shopify Plus Checkout Editor, all blocks are rendered server-side with reserved space — avoid injecting custom checkout content via external scripts that fire after load.
  3. Use Shopify's CDN image transformations ({{ image | image_url: width: 800 }}) and always pair with width/height attributes in Liquid to prevent CLS on checkout and account pages.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix cwv cls on Klaviyo
  1. Email/SMS signup pop-ups and flyouts served by Klaviyo are a frequent source of CLS when they insert above or within page content. In your Klaviyo account, go to Sign-Up Forms.
  2. For each active form, click Edit > select the Display Settings tab. Set 'Display Behavior' to a triggered/delayed display (e.g. 'Show after 5 seconds' or 'Show on exit intent') rather than 'Show immediately on page load' — this ensures the form does not inject before the page is fully painted.
  3. For flyout/side-tab forms, confirm the form style is set to 'Flyout' or 'Full-Page' (overlay) not 'Embedded' — embedded forms inserted inline above product or blog content push surrounding elements down and cause significant CLS.
  4. If you use an embedded inline form, wrap the Klaviyo embed code in a container div with a fixed min-height matching the form's pixel height, so the browser reserves the space even before the Klaviyo script fires.
  5. Save and publish changes, then re-test your CLS on affected pages with Google PageSpeed Insights to confirm the shift caused by the form is eliminated.
Full Klaviyo guide →Official Klaviyo docs ↗
How to fix cwv cls on Next.js (Headless)
  1. Use next/image for ALL images and always supply explicit `width` and `height` props (or use `fill` with a sized wrapper). Never let an `<img>` tag render without known dimensions — this is the single largest CLS source in headless storefronts.
  2. For above-the-fold hero/banner images, add the `priority` prop so they are preloaded and the space is claimed before first paint, preventing a late swap from a placeholder to the real image.
  3. For videos and third-party embeds (YouTube, Vimeo, ads, chat widgets), wrap them in an aspect-ratio container using Tailwind's `aspect-video` class or a CSS `aspect-ratio` rule so the browser reserves the exact rectangle before the iframe/script loads.
  4. For late-loading widgets (reviews, personalisation banners, cookie notices), set an explicit `min-height` on their mount-point element and use a matching skeleton/placeholder component rendered on the server so the DOM node already occupies space during hydration.
  5. Audit dynamic content injected via `useEffect` (cart drawer, announcement bars, sticky headers) — wrap each in a container with fixed or min-height so the rest of the page is not pushed when they mount.
  6. Run Lighthouse or the Vercel Speed Insights panel after each change to confirm the CLS score drops; target CLS < 0.1.
Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗
How to fix cwv cls on Yotpo
  1. Identify all Yotpo widgets on your storefront (Reviews Widget, Star Ratings, UGC/Visual Marketing gallery, Q&A widget) — these are the most common sources of CLS because they inject content after the initial page render.
  2. For each Yotpo Reviews or Star Rating widget container in your theme templates (e.g. product.liquid or product-template.liquid), add an explicit min-height CSS rule that matches the rendered widget height — for example: `.yotpo.yotpo-main-widget { min-height: 600px; }` and `.yotpo-bottomline { min-height: 28px; }` — so the browser reserves space before the Yotpo script loads.
  3. If you use the Yotpo Visual UGC / Shoppable Gallery widget, wrap its embed `<div>` in a fixed-aspect-ratio container (e.g. `aspect-ratio: 1/1` or a padding-top percentage trick) and set `overflow: hidden` so the gallery grid does not reflow when images lazy-load in.
  4. In the Yotpo Admin (yotpo.com → Account Settings → Widgets), check whether 'Lazy Load' or deferred widget initialisation is enabled; if the widget script is deferred, ensure the placeholder `<div>` in your theme already carries the reserved dimensions before the script executes.
  5. Load your product page in Chrome DevTools → Performance tab, record a page load, and confirm the Yotpo widget containers no longer cause layout shift events (LS rectangles) in the Experience section; adjust the min-height / aspect-ratio values if residual shifts remain.
  6. Deploy the CSS changes via your theme editor (Online Store → Themes → Edit Code → assets/theme.css or your custom CSS file) and re-run a Core Web Vitals test (e.g. PageSpeed Insights) to verify the CLS score has improved.
Full Yotpo guide →Official Yotpo docs ↗
How to fix cwv cls on Elementor
  1. Open the Elementor editor for the affected page. For every Image widget, click the widget → go to the 'Style' tab → set explicit 'Width' and 'Height' values (in px or %) so the browser reserves exact space before the image loads. Avoid leaving both dimensions set to 'Auto'.
  2. For Video widgets, select the widget → 'Style' tab → enable 'Aspect Ratio' (e.g. 16:9) under the widget's settings. Then in the 'Advanced' tab add a CSS class (e.g. 'video-wrapper') and add custom CSS in Elementor → Site Settings → Custom CSS: `.video-wrapper { aspect-ratio: 16/9; width: 100%; }` to lock in reserved space.
  3. For any widget that loads dynamic content (Posts, Portfolio, WooCommerce Products grid, etc.), go to the widget's 'Layout' tab and set fixed 'Min Height' values for cards/items so the container does not collapse before content renders.
  4. Eliminate font-swap layout shifts: navigate to Elementor → Site Settings → Typography, and for each Global Font set the 'Font Display' property to 'Swap' and, where possible, preload the primary font by adding a `<link rel='preload'>` tag via Elementor → Site Settings → Custom Code (Head).
  5. Go to Elementor → Site Settings → Performance (or the active theme's settings if using Hello Elementor) and enable 'Optimized DOM Output'. This reduces extra wrapper `<div>`s that can shift surrounding content unexpectedly.
  6. Use Elementor's Responsive Mode (the device icons in the bottom editor bar) to verify that every breakpoint (Desktop, Tablet, Mobile) also has explicit dimensions set — CLS often spikes on mobile where sizes are left 'Auto'. Adjust width/height or aspect-ratio CSS per breakpoint as needed, then click 'Update' to publish.
Full Elementor guide →Official Elementor docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find cwv cls — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Cwv cls?

Cumulative Layout Shift (CLS) measures how much page content unexpectedly moves around while a visitor is looking at it. Every time an image pops in and shoves text down, a banner slides in from a cookie notice, or a font swap causes a paragraph to reflow, that counts as a layout shift. Google adds all those shifts together into a single score; anything above 0.1 is considered "needs improvement," and above 0.25 is "poor." A score of 1.35 (like the example above) means the page is shifting dramatically — visitors are misclicking, losing their place, and bouncing before they buy.

Why does cwv cls matter?

CLS is one of Google's three Core Web Vitals and is a direct ranking signal in Google Search — a poor score actively suppresses your position in search results, reducing organic traffic and revenue. On mobile, where most ecommerce shopping happens, layout shifts are especially jarring: a customer tapping "Add to Cart" can accidentally tap a shifted link instead, killing the conversion. High CLS also signals a low-quality page experience, which increases bounce rate and reduces the trust visitors place in your store. Google's own data shows that sites meeting Core Web Vitals thresholds see measurably better business outcomes than those that don't.

How do I fix cwv cls?

Eliminate unexpected layout shifts by reserving space for every image, video, embed, and dynamically injected element so nothing jumps when the page loads.

Authoritative references

Related SEO issues