If you need to fix cumulative layout shift, you are dealing with one of the three Core Web Vitals Google uses to judge page experience. Cumulative Layout Shift (CLS) measures how much visible content jumps around while a page loads. A good score is 0.1 or less. Anything above 0.25 is poor, frustrates visitors and can hold back your rankings. Here are nine proven ways to fix cumulative layout shift on WordPress, Shopify and custom sites.
What is cumulative layout shift?
Cumulative layout shift adds up every unexpected movement of visible elements during the life of a page. When a late image pushes a button down just as a visitor taps it, that is a layout shift. Google measures CLS with real Chrome user data, so lab tools like Lighthouse are useful for debugging, but the field data in Search Console is what counts for ranking. Read our Core Web Vitals guide for how CLS fits with LCP and INP.
How to find what causes CLS
- Open PageSpeed Insights and check the Avoid large layout shifts diagnostic.
- In Chrome DevTools, open the Performance panel, record a page load and look at the Layout Shift track.
- Use the Web Vitals extension to see shifts live as you scroll.
- Check the Core Web Vitals report in Search Console for groups of affected URLs.
9 proven fixes to fix cumulative layout shift
- Set width and height on every image. Browsers reserve the right space before the file loads. In WordPress this is automatic for images added through the editor, but theme and page builder images often miss it.
- Use aspect-ratio for responsive media. The CSS aspect-ratio property keeps space reserved on every screen size.
- Reserve space for ads and embeds. Give ad slots, YouTube embeds and maps a fixed minimum height.
- Preload key fonts. Preload the main font files and use font-display: optional or swap with matching fallback metrics to stop text from jumping.
- Avoid injecting content above existing content. Promo bars, cookie notices and newsletter strips should overlay the page or sit in reserved space.
- Animate with transform, not top or height. Transform and opacity animations do not trigger layout shifts.
- Fix lazy-loaded hero images. Never lazy-load the first visible image. Load it eagerly with fetchpriority high.
- Stabilise sliders and carousels. Set a fixed height for the slider container so slides do not resize the page.
- Check third-party widgets. Chat bubbles, review badges and social feeds often load late. Load them in fixed containers or after user interaction.
How to fix cumulative layout shift in WordPress
On WordPress, start with your theme and page builder. Elementor, Divi and similar builders can add shifts through sliders, sticky headers and motion effects. Enable image dimensions in your cache plugin, preload fonts, and replace heavy sliders with a static hero image. A lightweight theme and a good cache setup, as covered in our WordPress speed guide, solve most CLS problems.
How long until Google sees the improvement?
Search Console uses a 28-day rolling window of real user data. After you fix cumulative layout shift, click Validate fix in the Core Web Vitals report and expect the status to update over about four weeks as new visits replace old data.
Need help with Core Web Vitals?
Softnexis Technologies runs performance audits and fixes LCP, INP and CLS issues for WordPress, WooCommerce and Shopify sites. We test every change on real devices before going live. Book a speed audit and we will send a prioritised fix list.
Quick checklist to fix cumulative layout shift
- Every image and video has width and height or an aspect-ratio.
- The hero image is not lazy-loaded and uses fetchpriority high.
- Fonts are preloaded and have size-adjusted fallbacks.
- Ad slots, embeds and sliders have reserved space.
- Cookie and promo bars overlay the page instead of pushing it down.
- Animations use transform and opacity only.
Work through this list on your top templates first: home page, service pages, product pages and blog posts. When you fix cumulative layout shift on a template, every page using it improves at once, which is the fastest way to move your whole site into the good range. After deploying, re-test with PageSpeed Insights and the Web Vitals extension, then validate the fix in Search Console. Teams that fix cumulative layout shift early usually see better engagement too, because visitors stop mis-tapping buttons and links.
Fix cumulative layout shift: FAQs
What is a good CLS score?
A CLS score of 0.1 or less at the 75th percentile of page loads is considered good by Google.
Does CLS affect SEO?
Yes. CLS is part of Core Web Vitals, which Google uses as a page experience signal alongside content relevance.
Why is my CLS good in Lighthouse but poor in Search Console?
Lighthouse only measures the initial load in a lab. Search Console uses real users, including shifts that happen while scrolling and interacting.
Further reading
Learn more in our Core Web Vitals guide. Google explains the metric in detail on web.dev: Cumulative Layout Shift.
Featured image by Freepik.
