Fixing Cumulative Layout Shift on WordPress
Find the images, fonts and late-loading elements that move a WordPress layout. A practical checklist for measuring CLS and fixing the cause.
In this article
You're about to tap a button, and the page moves. An image arrives, a notice appears above the header, or a heading changes size when a font loads. The click lands somewhere else. That's the kind of problem Cumulative Layout Shift is meant to describe.
On WordPress, the cause may sit in the theme, a block, a plugin or a third-party embed. Installing a cache plugin won't necessarily fix it. The useful starting point is to identify the element that moved and the space that wasn't reserved for it.
This guide explains how to investigate the problem and choose a repair. It is a technical checklist, not a promise that one setting will give every site the same score.
Start with the page that actually moves
Open the affected URL on a phone-sized viewport and watch what happens during loading. Then scroll the page, open the menu and use any tabs or forms. A layout that is stable for the first second may move later when a lazy-loaded widget appears.
Write down the element, the action and the timing. For example: the article heading moves down when the image above it loads, or the first product row moves when a promotional banner appears. This is more useful to a developer than saying the site needs a better score.
Use the browser's performance tools to inspect layout-shift events. The highlighted element is the one that moved, which is not always the element that caused the movement. An image inserted above a paragraph can move the paragraph even though the paragraph itself has no incorrect styling.
Why lab and visitor measurements can disagree
A short lab test observes a specific loading sequence under its test conditions. Visitor measurements can include the rest of the page session. Scrolling to an embed or waiting for an announcement can reveal a problem a simple load test never reaches.
Compare like with like. Check whether PageSpeed Insights is showing data for this exact URL or for the whole origin. If only origin-level data is available, the issue might belong to another template. Don't rebuild a stable page solely because the domain's combined measurement is poor.
Connection speed, device size and cached resources also change the order in which elements arrive. Retest with a cold cache and at several widths. A good desktop result doesn't tell you whether a narrow mobile heading changes height when the font swaps.
Google's web performance guidance describes a good CLS result as 0.1 or less at the 75th percentile of page visits. Treat that as a measurement of visitor experience rather than a number to obtain by hiding useful content.
Give images and embeds a place before they load
The browser needs to know how much room an image will occupy. Keep width and height attributes in the image markup, and use responsive CSS that preserves the intended aspect ratio. Those attributes describe the image's proportions; they don't mean it must display at a fixed size on every screen.
WordPress can output image dimensions, but custom templates and plugins may strip or replace that markup. Inspect the final HTML of the affected image. A setting in the editor is not proof that the public template contains the right attributes.
For a video, map or booking widget, reserve a container with an appropriate aspect ratio or agreed minimum height. The placeholder should match the content reasonably closely. Reserving a tiny box and replacing it with a large widget still moves everything beneath it.
Lazy loading does not remove the need for dimensions. It delays the resource, making reserved space especially useful further down the page. Keep the loading behaviour appropriate for the image: the main visible image and an image several screens down have different priorities.
Check fonts and content that arrives late
A fallback font can be wider or taller than the final font. When the final font arrives, a heading may wrap onto a new line and move the section below. Check both the font-loading setup and the actual heading at narrow widths.
Use a sensible fallback and avoid loading weights the design doesn't use. A developer can consider matching fallback font metrics, but these settings need testing against the actual fonts. Preloading every font is not a general solution and can compete with other important resources.
Late-inserted notices deserve the same attention. If a message must sit above the header, its space should be planned. If a consent interface overlays the page, it still needs to be usable and must not cover essential controls. Choose the behaviour for the visitor, not just for the metric.
Ask whether rotating banners change height between slides. Check whether an expanded navigation area or an asynchronous search result changes the layout unexpectedly. Some shifts following a recent qualifying user input are excluded from CLS, but that does not make every interaction pleasant to use.
Fix the responsible template or component
Once you know the cause, work in a staging environment with a backup. Change the responsible component rather than adding a broad CSS rule across the site. A fixed height that helps one banner can clip a longer translated message or create a large empty area on another page.
For images, the repair might belong in a theme template. For an embed, it may belong in the wrapper used by an editor block. For a plugin-inserted banner, check whether the plugin provides a suitable rendering option before overriding its output.
After changing the component, test the templates that use it. If the header is shared by product pages, articles and contact pages, all three should be checked. Include longer content, smaller viewports and any logged-in or logged-out variants that affect the output.
- Record the affected URL and the original behaviour.
- Identify the component that introduces or resizes content.
- Reserve the right space or adjust the loading behaviour in that component.
- Retest the full visitor journey, not just the initial load.
- Compare lab results and allow new visitor data to accumulate after deployment.
Confirm the repair without promising an instant report change
A successful local test is useful evidence, but it doesn't immediately replace historical visitor data. Save the deployment date and what changed. Then monitor the relevant URL or template so you can distinguish the new behaviour from older measurements.
Watch for regressions when a plugin is updated or a new content block is added. A template can be stable until an editor inserts a different embed. Documenting the expected image dimensions and embed wrappers helps the team avoid reintroducing the same issue.
If you need help, send the URL and describe when the page moves. A screen recording is useful, along with the affected device size and any recent changes. That gives a developer a concrete starting point and keeps the investigation focused.
Frequently asked questions
What causes layout shift on a WordPress site?
Common causes include images or embeds without reserved space, font changes and content inserted after loading. The theme, a plugin or a third-party service can produce the markup, so inspect the affected page before choosing a fix.
Does a cookie banner hurt CLS?
It can if it inserts or resizes content and moves the page. The effect depends on the implementation. Reserve space or choose an appropriate overlay while keeping the consent interface accessible and usable.
How do I reserve space for an image?
Keep its width and height attributes and use responsive styling that preserves the aspect ratio. Inspect the final public HTML, especially when the image is rendered by a custom template or plugin.
Why is CLS fine in Lighthouse but poor in Search Console?
A load test may miss shifts that happen later in a visitor session. Also check whether the visitor report covers the exact URL or a group of pages, and whether it still contains historical measurements from before your repair.