How to Fix Cumulative Layout Shift (CLS) on WordPress

This guide shows you how to find what is moving on your pages and how to stop it, using fixes that work inside WordPress themes, page builders and plugins. If you need to fix cumulative layout shift WordPress problems, start with images, ads, fonts and banners, because those four cause most of the shifts I find.

What is a good CLS score?

A good CLS score is 0.1 or less, a score above 0.25 is poor, and anything in between needs improvement, judged at the 75th percentile of real visits. These thresholds come from web.dev’s explainer on Cumulative Layout Shift.

CLS has no unit. Each unexpected shift gets a score based on how much of the viewport moved and how far it moved. Shifts that happen close together are grouped into a session window, where each shift is less than one second after the previous one and the window lasts at most five seconds. Your CLS is the score of the worst window. Shifts within 500 ms of a tap, click or key press are excluded, because the user expected something to change.

One detail confuses many site owners: lab tools like Lighthouse usually measure only the initial load, while field data in Search Console covers the whole visit. A page can score 0 in Lighthouse and still fail in the field because of a banner that appears after five seconds of scrolling.

What causes layout shift on WordPress?

Layout shift on WordPress is mostly caused by elements that load late without reserved space: images without dimensions, ads and embeds, injected banners, and web fonts that swap after the text has already rendered. The table below maps each cause to where it usually comes from and the fix.

How do you find which element is shifting?

You find the shifting element by recording the page in Chrome DevTools or checking the diagnostics in PageSpeed Insights, which name the elements that moved. Start with the URL groups Search Console flags in its Core Web Vitals report.

1. Open PageSpeed Insights for a flagged URL and read the “Avoid large layout shifts” diagnostic. It lists the elements and their shift scores.
2. In Chrome DevTools, open the Performance panel, enable CPU and network throttling, reload, and look at the Layout shifts track. Click each shift to highlight the moved element.
3. Scroll and wait on the page while recording. Late banners and lazy loaded ads often shift content after the load test has ended.
4. Test on a real phone too. Mobile menus, sticky headers and smaller viewports reveal shifts that desktop testing misses.

How do you fix CLS on WordPress step by step?

You fix CLS by reserving space for anything that loads late and making sure nothing pushes existing content around. web.dev’s guide to optimizing CLS gives the same core advice: always include width and height on images and video, reserve space for ads and embeds, and avoid injecting content above existing content.

1. Images. WordPress adds width and height to images inserted in post content, but theme templates, page builders and custom HTML often skip them. Check your logo, hero and featured image output and add the attributes, or set aspect-ratio in CSS.
2. Ads. Give each ad container a min-height equal to the most common ad size in that slot. Do not collapse the space if no ad fills it.
3. Embeds. Wrap YouTube and map iframes in a container with aspect-ratio: 16 / 9 or a fixed height.
4. Banners and notices. Make the cookie notice a fixed overlay at the bottom of the screen instead of a bar that pushes the header down. Do the same for promo bars, or render them in the server HTML so their space exists from the first paint.
5. Fonts. Self host your fonts, preload the one or two used above the fold, and use font-display: optional, or tune a fallback with size-adjust and ascent-override so the swap barely moves text.
6. Animations. Turn off entrance animations that slide content in using margin or top. If you keep them, use transform.

The web.dev list of the most effective ways to improve Core Web Vitals adds one more fix that WordPress sites often miss: make pages eligible for the back/forward cache, so returning visitors see the page restored instantly without repeated shifts. Avoid unload event listeners and no-store headers unless the page shows sensitive data.

Do fonts cause cumulative layout shift?

Yes, web fonts can cause layout shift when the browser first renders text in a fallback font and then swaps to the web font, which has different widths and line heights. The text reflows, and everything below it moves.

The fix depends on how much you care about the exact font on first view. font-display: optional removes the swap entirely: if the font is not ready almost immediately, the fallback stays for that page view. If you need the brand font every time, preload it and match the fallback’s metrics with size-adjust, ascent-override, descent-override and line-gap-override so both fonts take up nearly the same space. Loading fonts from your own domain rather than a third party also removes a connection step.

What does a CLS fix look like with real numbers?

Add a CLS check to your monthly routine with my free SEO audit checklist. If your theme or page builder keeps fighting you, my WordPress website design work starts from a lean, stable layout, and my technical SEO service can diagnose and fix CLS on your current site without a rebuild.

Frequently asked questions