How to Fix Cumulative Layout Shift in WordPress

You’ve probably felt this on your own site before you even knew it had a name: you go to tap a link or a button, and at the last second an image or an ad loads in above it and pushes everything down. You end up clicking the wrong thing. On a site I built for a client last year, this exact problem was quietly costing them ad clicks and annoying returning visitors, and neither of us noticed until the numbers in Search Console flagged it.

That jumping is called Cumulative Layout Shift, or CLS, and it’s one of the three Core Web Vitals Google uses to judge page experience. Most site owners first meet it as a red or amber score in a speed report, with no real explanation of what’s actually moving or why. In my experience, the causes are almost always the same handful of things, and fixing them is a focused afternoon of work rather than a redesign.

Quick Answer

Cumulative Layout Shift happens when elements on a page move after the browser has already rendered them, almost always because the browser didn’t know how much space they’d need in advance. You fix it by giving images, ads, embeds, and web fonts a reserved size before they load, so nothing else on the page has to move once they finish rendering.

Why This Matters

A layout that keeps shifting under a visitor’s cursor isn’t just visually annoying, it directly causes mis-clicks: someone means to tap a menu link and instead lands on an ad or a completely different section of the page. On mobile, where screens are smaller and thumbs are less precise, this problem is worse and far more noticeable.

CLS is also a ranking signal. Google folds it into the Core Web Vitals it uses as part of page experience, alongside loading speed and interactivity. A page that scores poorly on CLS won’t be penalised into oblivion, but it’s one more thing working against you if you’re already competing hard for a position. I usually recommend treating CLS fixes as low-effort, high-value work: unlike a lot of Core Web Vitals work, which can mean genuine trade-offs against design or functionality, layout shift fixes are almost always free once you know where to look.

Step-by-Step Instructions

1. Measure Your Current CLS Score

Before changing anything, find out where the shifts are actually happening. Open your page in Chrome, open DevTools, and run a report from the Lighthouse panel — it lists each layout shift it detected along with the specific element responsible. This saves you from guessing and fixing things that were never a problem in the first place.

2. Add Width and Height to Every Image

This is the single biggest cause of layout shift on ordinary content sites. When an <img> tag has no width and height attribute, the browser has no idea how tall the image will be until it finishes downloading, so it renders zero height and then snaps everything below it downward once the image arrives. WordPress adds these attributes automatically to images inserted through the Block Editor, but images pasted in as raw HTML, added via page builders, or pulled in through some ad and embed scripts often skip this. Check your theme’s featured image and post thumbnail templates too, since those are common places explicit dimensions get lost.

3. Reserve Space for Ads and Embeds

Ad units are the classic offender because the ad network doesn’t know what size creative will actually be served until the auction resolves. Set a fixed min-height on the ad container that matches your most common ad size for that slot, so the surrounding content doesn’t move regardless of what loads in. The same logic applies to embedded YouTube videos, Twitter/X posts, and other third-party widgets — wrap them in a container with a set aspect ratio rather than letting the embed script determine its own size on the fly.

4. Load Web Fonts Without Layout Jumps

If you’re using a custom font, the text often renders first in a fallback system font and then swaps to the custom one once it downloads. If the two fonts have noticeably different character widths, that swap reflows every line of text around it. Choose a fallback font with similar metrics to your custom font, or use font-display: optional if a slightly delayed custom font is an acceptable trade-off for a completely stable layout.

5. Avoid Inserting Content Above Existing Content

Cookie banners, “sign up” bars, and notification prompts that get injected above the main content after the page has already rendered are a frequent and entirely avoidable cause of shift. Where possible, reserve their space in the initial layout, or push them into an overlay that doesn’t displace anything rather than a banner that shoves the page down.

6. Check Lazy-Loaded Images Don’t Shift Layout

Lazy loading images is good for initial page speed, but it can reintroduce layout shift if the placeholder before the image loads doesn’t match the image’s real dimensions. Confirm your lazy-loading setup keeps the same width and height attributes on the placeholder as on the final image, so scrolling down the page doesn’t trigger the same jumping you just fixed above the fold.

Practical Tips

• Use the CSS aspect-ratio property alongside width and height attributes so images reserve the right space even when a responsive layout resizes them.
• Test on a real mobile device, not just a resized desktop browser window — shift patterns are often different on smaller screens with different ad breakpoints.
• Fix above-the-fold shifts first. They’re the ones visitors actually notice and interact with, and they carry more weight in Google’s measurement.
• If you’re using a caching plugin, clear the cache after making these changes — cached HTML can hide whether a fix actually worked.

Common Mistakes

• Only checking the score once. CLS can regress any time you add a new ad unit, plugin, or embed, so re-check after significant content or plugin changes.
• Turning off lazy loading altogether as a shortcut. This usually just trades a CLS problem for a slower loading speed problem.
• Guessing at ad slot sizes instead of checking what your ad network actually serves most often in that position.
• Fixing only the homepage. Layout shift is often worse on individual posts where featured images and embeds are more common.

When to Use This vs Alternatives

A general-purpose caching or performance plugin will usually help your loading speed and interactivity scores, but it won’t touch layout shift on its own, since CLS is caused by missing dimensions and reflows rather than slow file delivery. If your Core Web Vitals report shows CLS specifically flagged as poor, the fixes in this guide are the right next step rather than installing another optimisation plugin. Reach for a full page rebuild only if the shifting is coming from your theme’s core layout structure itself, which is rare — in most cases it’s a handful of specific elements, not the whole design.

Conclusion

Run a Lighthouse report, find the specific elements it flags, and reserve their space with explicit dimensions before you touch anything else. Re-test after each change so you know exactly which fix worked, then check back after adding any new ad unit, embed, or plugin in future.

For a wider view of where CLS fits alongside loading speed and interactivity, see the step-by-step guide to building a WordPress website, and check the LayoutShift API reference on MDN if you want to understand exactly how the score is calculated.