Fix CLS in WordPress: Stop Layout Shifts Without Breaking Your Design

What is CLS and how do you find it?

Cumulative Layout Shift, or CLS, measures unexpected movement on a page while it loads. If text jumps down when an image arrives, a button moves just as you are about to tap it, or a banner pushes the article down, that is a layout shift. It is frustrating for readers, and it can turn a good-looking page into one that feels unreliable.

A good CLS score is 0.1 or less at the 75th percentile. That threshold matters because it is based on real visits, not a single perfect test on a fast connection. This is why field data should matter more than a lab score: a page can look stable in one test and still shift for visitors on slower phones, slower networks, or different screen sizes. Use lab results to find likely problems, then confirm the fix with field data over time.

Start with PageSpeed Insights and the Core Web Vitals report in Search Console, which show how real users experience the page. Then open Chrome DevTools and use its layout shift regions to see exactly which elements move. That combination is far more useful than guessing. Test real pages too, not just the homepage: blog posts, category pages, product pages, and any template with ads, embeds, or dynamic widgets can behave differently. For the wider picture, see the WordPress Core Web Vitals guide.

What causes layout shifts in WordPress?

Most CLS issues in WordPress come from the browser not knowing how much space to reserve before content arrives. When that space is missing, the page is drawn once, then redrawn as images, fonts, ads, and widgets load. The shift is rarely caused by one dramatic failure. It is usually several small decisions adding up.

• Images and embeds without dimensions. When an image, video, or embed has no width, height, or aspect ratio, the browser cannot reserve its space. Content below it is pushed down once the media loads.
• Web fonts swapping. A fallback font is usually narrower or wider than the final web font. When the web font arrives, headings and paragraphs reflow, and everything below them moves.
• Ads and banners injecting space. A late ad, announcement bar, or promotion that appears without a reserved slot will shove the page down. The same happens when an ad loads at a different size than expected.
• Late-loading content above existing content. Related posts, forms, cookie notices, popups, and widgets that appear above what the visitor is already reading are a classic source of shifts.
• Animations and dynamic widgets. Sliders, accordions, tabs, and live widgets that change height after load can move surrounding content, especially on mobile where there is less room to absorb the change.

The fix is not to make the site plainer. It is to give the browser the information it needs before the content arrives, so the design you approved is the design visitors actually see.

How to fix CLS step by step?

Work through these fixes in order, and check the page after each change. Fixing one large shift often reveals a smaller one that was hidden behind it.

1. Reserve space with width and height or aspect ratio. Give images, videos, and embeds real dimensions so the browser reserves the right box before they load. For responsive images, an aspect ratio keeps the space correct at every screen width. Do the same for iframes and embeds, and check that your theme is not stripping dimensions from uploaded media.
2. Preload key fonts and use font-display sensibly. Preload only the fonts used above the fold, choose a fallback with similar metrics where possible, and avoid loading a large family of weights and styles for a single heading. If a font swap still moves text, test a closer fallback or reduce the number of font files. This keeps the design intact without forcing visitors to wait for every decorative font.
3. Reserve space for ads and banners. Set a minimum height or aspect ratio for each ad slot, and do not let a banner appear in the middle of the article without a reserved container. If an ad can arrive at several sizes, reserve space for the largest expected size rather than the smallest, so the page does not jump when a larger creative wins.
4. Avoid inserting content above existing content. Load related posts, notices, and widgets below the content, in a sidebar, or in a reserved area. If a notice must appear at the top, reserve its space in the initial layout. Content that the visitor did not request should never push down what they are already reading.
5. Check animations and dynamic widgets. Prefer transforms for movement instead of changing height, width, or position in a way that reflows the page. For accordions and tabs, reserve space or accept the height change only when the visitor clicks, rather than letting a widget resize itself after load.
6. Test on mobile and desktop, then retest field data over time. Mobile layouts, narrow viewports, and slower connections expose shifts that a desktop test can miss. After a fix, watch Search Console field data for the affected templates, and repeat the check after theme, plugin, or ad changes. A fix that works today can regress with the next update.

Two related checks help here. If slow interactions are the bigger problem, CLS is not the whole story: read the guide to fix slow interactions in WordPress. If a plugin or widget is loading late and moving the page, the Query Monitor tutorial shows how to find what is actually running on a page. For images, also review the guide to LCP and lazy-loaded images, and for scripts that change the page after load, see the guide to delay JavaScript execution in WordPress. If the server itself is slow to respond, that delay can make every late shift more noticeable; the high TTFB guide covers that side of the problem.

If layout shifts are costing you clicks, sales, or enquiries, start with the page that matters most, work through the steps above, and retest on mobile and desktop. If you would like help diagnosing the exact cause on your site, ask ProSpeedGuy about a free speed audit.

Common Questions

Frequently Asked Questions

Clear, honest answers about layout shifts, field data, and fixing CLS without changing your design.