If your WordPress site feels janky when it loads, with buttons jumping, images pushing text down, or ads causing chaos, you’re dealing with Cumulative Layout Shift (CLS). It’s one of the three Core Web Vitals Google uses to rank pages, and a poor score can quietly hurt your SEO and conversions.
In this guide, we’ll walk you through exactly how to fix cumulative layout shift on WordPress in 2026 using free tools like PageSpeed Insights and Chrome DevTools. No fluff, just real fixes that move your CLS score toward zero.
What Is Cumulative Layout Shift (CLS)?
CLS measures how much visible content shifts around unexpectedly during page load. Google considers a CLS score:
- Good: 0.1 or less
- Needs improvement: Between 0.1 and 0.25
- Poor: Above 0.25
Every unexpected shift, whether from a late-loading font, an image without dimensions, or an injected ad, adds to your total score. The goal is a stable, predictable page that doesn’t move under the user’s finger.
Step 1: Diagnose Your CLS Issues (Free Tools)
Before touching any code, you need data. Here are the tools we use at Creative Pixels Media to identify shift sources.
PageSpeed Insights
Go to pagespeed.web.dev and enter your URL. Scroll to the Diagnostics section and look for “Avoid large layout shifts”. Google now highlights the specific DOM elements causing shifts, complete with their contribution to the total score. This guide goes deeper on it.
Chrome DevTools Performance Panel
- Open your page in Chrome incognito mode
- Press F12 to open DevTools
- Go to the Performance tab
- Enable Web Vitals in the settings
- Click record, reload the page, then stop
- Look at the Experience track for red “Layout Shift” bars
Click each shift to see exactly which element moved and by how much. This is the fastest way to catch shifts that only appear on first load.
Chrome DevTools Rendering Tab
In DevTools, press Ctrl+Shift+P, type “Rendering” and enable Layout Shift Regions. Now reload the page. Every shift will flash in blue in real time. Highly recommended for visual troubleshooters. There’s a good explainer over at onlinemediamasters.com.
Step 2: Fix Images That Cause Layout Shift
Images without explicit dimensions are the number one CLS culprit on WordPress sites.
Always Set Width and Height Attributes
Modern browsers use the width and height attributes to reserve space before the image loads. Since WordPress 5.5, these are added automatically, but they get stripped by some themes, page builders, and lazy-load plugins.
Check your HTML source. Your images should look like this:
<img src="hero.webp" width="1200" height="600" alt="...">
Fix Missing Dimensions in Page Builders
Elementor, Divi, and Bricks sometimes output images inside background containers with no reserved space. The fix:
- Use aspect-ratio CSS on image containers:
aspect-ratio: 16 / 9; - Set a min-height on hero sections
- Avoid background images for above-the-fold content when possible
Exclude Above-the-Fold Images from Lazy Loading
Lazy loading your LCP image will cause a visible shift. In plugins like WP Rocket, Perfmatters, or LiteSpeed Cache, add your hero image URL or CSS class to the lazy load exclusion list.
Step 3: Fix Font-Related Layout Shifts
Fonts cause two types of shifts: FOUT (Flash of Unstyled Text) and FOIT (Flash of Invisible Text). Both hurt CLS when the fallback font has different metrics than the loaded font.
Add font-display: swap
This tells the browser to show fallback text immediately, then swap when the custom font loads. Most caching plugins now offer a toggle for this. In WP Rocket, it’s under File Optimization > Optimize CSS delivery. In Perfmatters, look for Display Swap.
If you host fonts manually, add this to your @font-face rule:
font-display: swap;
Preload Critical Fonts
Add a preload hint in your theme header or via a plugin:
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
Use size-adjust to Match Fallback Metrics
In 2026, all major browsers support the size-adjust, ascent-override, and descent-override descriptors. These make your fallback font visually match your web font, eliminating shift on swap.
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
size-adjust: 107%;
ascent-override: 90%;
}Step 4: Tame Ads, Embeds, and Dynamic Content
Ads and embeds are notorious CLS offenders because their size isn’t known until they load.
Reserve Space for Ad Slots
Wrap every ad container with a fixed min-height that matches the largest ad size it might display: You can read more here.
.ad-slot {
min-height: 250px;
width: 100%;
}Reserve Space for Embeds
YouTube videos, Twitter/X embeds, and Instagram cards should sit inside an aspect-ratio wrapper. Use the modern CSS approach:
.embed-wrapper {
aspect-ratio: 16 / 9;
}Avoid Inserting DOM Above Existing Content
Cookie banners, notification bars, and “you may also like” boxes should slide in from the bottom or use transform: translate instead of pushing content down. Never inject new elements above the fold after render unless triggered by a user action.
Step 5: Check Your Plugins and Theme
When all else fails, the classic troubleshooting method still works.
- Clone your site to a staging environment
- Switch to a default theme like Twenty Twenty-Five
- Disable all plugins
- Measure CLS on PageSpeed Insights
- Reactivate one plugin at a time, measuring after each
This isolates the exact plugin or theme file responsible. Common culprits include sliders, popup builders, review widgets, and older lazy-load plugins.
Quick Reference: CLS Causes and Fixes
| CLS Cause | Fix |
|---|---|
| Images without dimensions | Add width/height or aspect-ratio |
| Web fonts swapping in | font-display: swap + size-adjust |
| Lazy-loaded hero image | Exclude from lazy load |
| Ads and iframes | Reserve min-height on containers |
| Cookie banners | Fixed position, slide from bottom |
| Sliders and carousels | Set fixed height on wrapper |
| Late-loading JS widgets | Reserve space or defer below fold |
Step 6: Verify Your Fixes
After making changes:
- Clear all caches (plugin, CDN, browser)
- Retest in PageSpeed Insights
- Wait 28 days for field data in Google Search Console’s Core Web Vitals report to reflect real user experience
- Monitor with tools like Google Search Console, SpeedVitals, or Treo
Lab data is instant, but field data is what Google actually uses for ranking, so don’t panic if it takes a few weeks to update.
Frequently Asked Questions
What is a good CLS score for WordPress in 2026?
Google recommends a CLS score of 0.1 or less. Anything above 0.25 is considered poor and can hurt your rankings.
Does WP Rocket fix Cumulative Layout Shift?
WP Rocket helps by adding font-display: swap, adding missing image dimensions, and optimizing CSS delivery. It won’t fix every CLS issue, especially those caused by ads, third-party scripts, or theme code, but it handles the most common ones.
Why is my CLS bad only on mobile?
Mobile screens have less horizontal space, so any shift is more visible. Common mobile-specific causes include hamburger menu animations, mobile ad units with different sizes, and hero images that reflow differently at smaller viewports.
Can a WordPress theme cause layout shift?
Yes. Themes that use JavaScript to inject headers, sliders, or custom fonts after page load often cause CLS. If a lightweight test theme like Twenty Twenty-Five gives you a good score, your theme is likely the problem.
How long does it take for CLS improvements to show in Google?
Lab data (PageSpeed Insights) updates immediately. Field data used by Google for ranking is based on a rolling 28-day window from the Chrome User Experience Report (CrUX), so expect around 3 to 4 weeks for full reflection.
Final Thoughts
Fixing CLS on WordPress isn’t about one magic setting. It’s about auditing your site methodically, reserving space for every element that loads asynchronously, and testing after each change. Start with images and fonts, tackle ads and embeds next, then isolate plugin conflicts on staging.
Do this well, and you won’t just improve your Core Web Vitals score. You’ll deliver a smoother, more professional experience that keeps visitors on the page and boosts your organic visibility in 2026 and beyond.
Need help auditing your WordPress site’s Core Web Vitals? The team at Creative Pixels Media specializes in performance optimization. Get in touch to see what your CLS score could be.