AmaarDev.
Hire Me

How to Improve CLS (Cumulative Layout Shift) in WordPress

Guide to improve CLS WordPress: developer fixing cumulative layout shift on a laptop

Your page loads fast. It responds instantly. But the button you’re about to tap jumps half an inch at the last moment — and your thumb lands on an ad instead. That’s Cumulative Layout Shift, the Core Web Vital most site owners ignore until it costs them clicks.

If you want to improve CLS in WordPress, nearly every cause is a markup or CSS problem with a concrete fix — no hosting upgrade required. Below: how CLS is measured, six places WordPress sites lose layout stability, and the exact fix for each.

What Is Cumulative Layout Shift?

Unlike LCP and INP, CLS isn’t a time measurement — it’s a score. Every time a visible element moves after it has rendered, the browser records a shift scored as impact fraction × distance fraction: how much of the viewport was affected, times how far the element moved. Shifts are grouped into session windows; your CLS is the worst window — the biggest burst of unexpected movement a visitor experienced. This CLS measurement reference covers the math precisely.

Two details matter. Shifts within 500 milliseconds of a user interaction don’t count — a menu opening because you clicked it is expected, not a bug. And Google grades the 75th percentile of real visits (Chrome User Experience Report data): three of four real page loads must score “good” for the URL to pass. Lab tests show you what’s wrong; real users deliver the verdict.

The thresholds:

  • Good: 0.1 or less
  • Needs improvement: 0.1 to 0.25
  • Poor: above 0.25

Why care? Layout shift is the metric visitors feel in their thumbs — mis-taps, jumping text, forms that move as you fill them. As one of the three Core Web Vitals, it also feeds the page-experience side of Google’s rankings. It completes the trio with Largest Contentful Paint and Interaction to Next Paint, which I’ve covered separately.

How to Check Your CLS Score on a WordPress Site

  1. PageSpeed Insights. Run any URL: lab CLS is instant, field CLS comes from real-user data once there’s enough traffic. The “Avoid large layout shifts” diagnostic names the exact shifted elements — that’s your fix order.
  2. Search Console → Core Web Vitals report. Groups failing URLs by issue, so you can tell whether it’s one page or a template-wide problem.
  3. Throttle the network. Watch the page load on a simulated slow connection in DevTools. Shifts invisible on fiber become obvious there — and it’s closer to what many visitors experience.

Fix the biggest shifts first.

How to Improve CLS in WordPress: 6 Fixes That Work

Work through these in order — each targets a specific, measurable source of layout shift, and together they cover everything you need to improve CLS in WordPress.

Fix 1: Add Width and Height to Every Image

The single most common CLS cause on the web. The browser builds the page layout before images finish downloading — if an <img> has no width and height attributes, the browser reserves zero space for it, then shoves everything below it down when the file arrives.

Since WordPress 5.7, images inserted through the editor get width and height automatically. The gaps are everywhere else: hand-written <img> tags in Custom HTML blocks, theme templates, your logo, shortcode output, and markup where an optimization plugin stripped the attributes. Check above-the-fold images first — a hero without dimensions is often the whole CLS problem on a page.

The fix:

<img src="hero.webp" width="1600" height="900" alt="...">

Then keep it responsive without losing the reserved space:

img {
  max-width: 100%;
  height: auto;
}

The browser computes the aspect ratio from those attributes and reserves the box before a byte arrives. For images whose dimensions you don’t know — user uploads, dynamic product photos — use a CSS aspect-ratio wrapper:

.image-wrapper {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
}
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Sized images usually lift LCP too. My image lazy-loading guide covers the rest of the workflow.

Fix 2: Reserve Space for Ads, Embeds, and Iframes

YouTube embeds, Google Maps, social widgets, and ad slots all load asynchronously — each one is a layout-shift bomb with no space reserved. Same pattern as images: hand the browser a box before the content arrives.

For embeds with a known ratio, a wrapper does it:

.embed-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.embed-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

For ad slots, set min-height on the container sized for the creative you serve — a 300×250 slot gets min-height: 250px. Never let an ad or “recommended content” widget inject itself above on-screen content; insert dynamic content below the viewport or trigger it on interaction.

For heavy YouTube use, try a click-to-load facade: a thumbnail with a play button that loads the iframe only on click — killing the shift and the JavaScript weight together.

Fix 3: Stop Web Fonts from Reflowing Text

Fonts are the most overlooked CLS cause. The browser renders text in a fallback font, then swaps in your custom font when it downloads — and if the two differ in character width or line height, the text block resizes and everything around it moves.

Three moves, in order of impact:

  1. Add font-display: swap to your @font-face rules so text stays visible during the swap instead of flashing invisible: 
    @font-face {
  font-family: 'Sora';
  src: url('sora.woff2') format('woff2');
  font-display: swap;
}
  2. Preload the one font file that renders above the fold, so the swap happens sooner: 
    <link rel="preload" href="/fonts/sora-bold.woff2" as="font" type="font/woff2" crossorigin>
  3. Reduce the need to swap: self-host your fonts, and cut families and weights to what the design uses — two families and two or three weights is plenty. The free OMGF plugin automates self-hosting.

This what-causes-CLS breakdown is a solid second reference for the font side.

Fix 4: Make Cookie Banners and Promo Bars Overlay, Not Push

A consent bar or announcement banner sliding in at the top after load is a textbook layout shift — it pushes every pixel of content down by its height. The fix is structural: banners should overlay the page, not join the flow. Use position: fixed (a bottom bar or corner notice) so the banner never participates in layout, or reserve its space from the first paint. Most consent plugins have an overlay or floating mode — check the display settings first. While you’re at it, move any related-posts widgets, popups, or promo bars that inject above existing content below the fold, or trigger them on interaction.

Fix 5: Animate with Transform, Not Layout Properties

Animations that change top, left, margin, width, or height force a layout recalculation — which counts as a shift. transform doesn’t: translate, scale, and rotate are composited without touching layout. A sticky header sliding in with transform: translateY() is CLS-free; one animating from height: 0 to height: 80px is not. Same rule for reveal-on-scroll effects and sliding panels — pick the transform-based option where your builder offers one.

Fix 6: Watch Performance Plugins and Page Builder Gotchas

Some performance plugins cause the very shifts you’re fixing. Options that delay CSS, inline only part of it, or load stylesheets asynchronously can render the page once with incomplete styles, then jump when the full CSS arrives. If CLS worsened right after enabling an optimization, test with that option off before blaming anything else.

Page builders have their own classics:

  • Sliders at the top of the homepage with no reserved height. The first slide loads, the container grows, everything shifts. Give the slider wrapper a fixed aspect ratio or min-height.
  • Elementor’s custom shape dividers above the fold. They paint after the rest of the section and nudge content around — keep dividers below the fold or drop them there. (Elementor’s image widgets output width and height by default — check Custom HTML blocks and shortcodes for hand-written <img> tags instead.) This Elementor speed guide’s CLS section documents the same gotchas.
  • Related-posts widgets injected above the article. Move them below the content or reserve their space.

I keep a running Elementor performance checklist in my speed-up-Elementor guide if that’s your builder.

Verify Your Fixes (and Give Field Data Time)

Re-run PageSpeed Insights after each fix — lab CLS updates immediately. Field data rolls over a 28-day window of real visits, so Search Console can take weeks to clear a URL after the lab score is green. Don’t revert a working fix because the field report hasn’t caught up.

When the lab score is under 0.1 and the diagnostics are clean, you’re done. Watch the Search Console Core Web Vitals report over the next month to confirm the field data follows.

CLS Quick Checklist

  • Width and height on every image (or aspect-ratio wrappers where dimensions are unknown)
  • Space reserved for ads, embeds, and iframes before they load
  • font-display: swap, one preloaded font, self-hosted and trimmed
  • Cookie banners and promo bars overlay with position: fixed
  • Animations use transform, not layout properties
  • No performance option or builder widget that double-renders the page

Layout stability is one of the three Core Web Vitals I check in every site audit, because it’s where visitors feel the quality of a build. If your scores are stuck in the orange, get in touch and I’ll take a look at your site.