You load a page, go to tap a link, and the entire screen jumps down. You end up clicking an ad instead. Google hates this as much as your users do.
Cumulative Layout Shift (CLS) measures visual stability. Since the Page Experience update in mid-2021, and continuing through the Chrome UX Report refinements in 2025 and 2026, Google strictly penalizes pages that jump around during loading. A poor CLS score will directly bottleneck your organic traffic.
If you run WordPress, you are likely dealing with a specific set of themes, plugins, and dynamic elements that cause these shifts. Fixing CLS on WordPress requires targeting a few usual suspects rather than tearing down your entire site architecture.
What This Post Covers
- How CLS is calculated and what the thresholds mean for rankings
- The 7 most common WordPress-specific CLS culprits
- Concrete code fixes for each issue
- How to diagnose which elements are shifting using DevTools
- A prioritized fix order for maximum impact
The Impact of Layout Shifts on SEO
Google calculates CLS by looking at the proportion of the viewport that shifts and the distance the unstable elements move. To pass the Core Web Vitals assessment, your CLS score must be 0.1 or less. Anything above 0.25 is considered poor and requires immediate intervention.
CLS Thresholds
| Score | Rating | SEO Impact |
|---|---|---|
| ≤ 0.1 | Good | Passes Core Web Vitals. No ranking penalty. |
| 0.1 – 0.25 | Needs Improvement | Partial penalty. You are losing ground to stable competitors. |
| > 0.25 | Poor | Fails Core Web Vitals. Significant ranking penalty on mobile. |
When pages are visually unstable, user experience plummets. Bounce rates increase, time on page drops, and conversion rates suffer. Search engines use these behavioral signals to determine quality. You cannot outrank a stable, fast-loading competitor with a jumping, frustrating website. Performance metrics are no longer tiebreakers — they are fundamental prerequisites for competitive search visibility.
How to Find Your CLS Culprits
Before fixing anything, you need to identify exactly which elements are shifting. There are two reliable approaches.
Method 1: Chrome DevTools Layout Shift Regions
- Open Chrome DevTools (F12)
- Press Cmd+Shift+P (or Ctrl+Shift+P on Windows) and type "Show Rendering"
- Enable Layout Shift Regions
- Reload the page — shifting elements flash blue as they move
- Check the Performance panel → Experience row for individual shift events with exact CLS contribution scores
Method 2: PageSpeed Insights Diagnostics
- Run your URL through PageSpeed Insights
- Scroll to the "Avoid large layout shifts" diagnostic
- It lists the exact DOM elements responsible for each shift, along with their CLS contribution — this tells you precisely which WordPress elements to target
Culprit 1: Missing Width and Height Attributes on Images
The single most common cause of layout shifts in WordPress is images loading without declared dimensions. When a browser does not know how much space an image will occupy, it renders the surrounding text first. Once the image downloads, the browser forces the text out of the way to make room.
Modern WordPress core (5.5+) automatically adds width and height attributes to images uploaded through the media library. However, older themes, custom page builders, or images inserted via external URLs often strip these attributes away.
Before: No dimensions (causes CLS)
<img src="hero.jpg" alt="Product photo">
After: Explicit dimensions
<img src="hero.jpg" alt="Product photo" width="1200" height="630">
Alternative: CSS aspect-ratio (works with responsive images)
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
WordPress-Specific Tip
If your theme or page builder strips dimensions, add this filter to your functions.php to force WordPress to always include width and height on <img> tags: add_filter('wp_img_tag_add_width_and_height_attr', '__return_true');. For images loaded via ACF custom fields or external URLs, you may need to manually add the attributes in your template files.
Culprit 2: Web Fonts Causing FOIT and FOUT
Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT) happen when your custom web fonts load slower than your HTML. The browser initially displays a fallback system font. When your custom font loads, it replaces the system font.
Because different fonts have different letter spacing, x-height, and line heights, swapping them causes the text block to expand or contract. This shifts every element positioned below the text.
Step 1: Add font-display: swap
@font-face {
font-family: 'YourFont';
src: url('/fonts/yourfont.woff2') format('woff2');
font-display: swap;
}
Step 2: Preload the critical font file
<link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin>
Step 3: Match fallback geometry to reduce swap shift
@font-face {
font-family: 'YourFont Fallback';
src: local('Arial');
size-adjust: 105%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
The size-adjust and override properties let you tune the fallback system font to closely match the custom font's dimensions. This minimizes the visible reflow when the swap happens. Tools like Fallback Font Generator can calculate the exact values for your font pairing.
Culprit 3: Dynamically Injected Ads and Embeds
Ad networks and third-party embeds (YouTube videos, Twitter widgets, Instagram posts) are notorious for ruining CLS scores. These elements are injected via JavaScript late in the page load cycle, pushing content down after the user has already started reading.
Reserve space for ad slots with min-height
<div class="ad-slot" style="min-height: 250px;">
<!-- Ad network script injects here -->
</div>
Reserve space for YouTube embeds
<div style="aspect-ratio: 16 / 9; width: 100%;">
<iframe src="..." loading="lazy" ...></iframe>
</div>
If the ad fails to load or serves a smaller creative, the reserved space simply remains blank instead of collapsing and causing a shift. The same logic applies to social embeds — always wrap them in a container with fixed dimensions matching the expected widget size.
Culprit 4: Cookie Banners and Notification Bars
Cookie consent banners are legally required in many regions, but they are often implemented poorly. When a banner drops from the top of the screen and pushes the main content down, it triggers a layout shift penalty.
Cookie Banner Positioning Strategies
| Approach | CLS Impact | Notes |
|---|---|---|
position: fixed; bottom: 0 |
Zero CLS | Overlays content, does not displace anything. Best option. |
position: fixed; top: 0 |
Zero CLS | Overlays from top. Fine as long as it does not push content down. |
Top banner, position: static |
High CLS | Pushes all content down when injected. Avoid this pattern entirely. |
| Modal overlay | Zero CLS | Covers content with a centered dialog. No layout displacement. |
If your banner absolutely must push content down (some GDPR implementations require this), ensure it renders in the initial HTML response rather than being injected by JavaScript after the page has already painted. A banner present on first paint does not count as a layout shift.
Culprit 5: Late-Loading or Deferred CSS
When critical CSS is deferred or loads asynchronously, the browser briefly renders the page as plain unstyled HTML. Once the stylesheet arrives, the page snaps into its intended layout. This massive restructuring destroys your CLS score.
Many WordPress caching and performance plugins offer options to "Optimize CSS Delivery" or "Remove Unused CSS." While these features improve other metrics, misconfiguring them strips out styles needed for above-the-fold content.
The Trap: CSS Optimization Plugins
Plugins like WP Rocket, Autoptimize, and Perfmatters all offer CSS deferral features. When enabled blindly, they can move all CSS to load asynchronously, causing a flash of unstyled content (FOUC) that registers as a massive layout shift.
The fix: Always extract your critical path CSS and inline it directly into the <head>. Most of these plugins have a "Critical CSS" option that does this automatically — make sure it is enabled alongside any CSS deferral. Test every major page template after enabling these features; do not assume the auto-generated critical CSS is complete.
Culprit 6: Lazy-Loaded Above-the-Fold Content
WordPress 5.5+ adds loading="lazy" to all images by default. This is excellent for below-the-fold images but disastrous for images visible in the initial viewport. When the hero image or a prominent above-the-fold graphic is lazy loaded, the browser reserves no space for it until the intersection observer triggers — causing a shift when it finally loads.
Remove lazy loading from above-the-fold images in your theme
<img src="hero.jpg" width="1200" height="630"
fetchpriority="high"
decoding="async"
alt="Hero image">
Note: no loading="lazy" attribute
Or use the WordPress filter to skip lazy loading on the first image
add_filter('wp_img_tag_add_loading_attr', function($value, $image) {
if (str_contains($image, 'hero-image')) return false;
return $value;
}, 10, 2);
WordPress 6.3+ introduced the fetchpriority="high" attribute on the first content image automatically. If you are on an older version, add it manually to your hero image to ensure the browser prioritizes downloading it immediately.
Culprit 7: Theme Header Height Changes
Many WordPress themes use a transparent or slim header on desktop that transforms into a different height on scroll or on mobile. If the header height is not explicitly set, the body content position shifts when the header transitions between states.
Sticky headers that change height when a user scrolls past a threshold are a common offender. The content below the header jumps up or down as the header shrinks or expands.
Fix: Reserve consistent header space
.site-header {
height: 80px; /* fixed height prevents shift */
}
.site-header.scrolled {
height: 60px;
}
main {
padding-top: 80px; /* matches header height */
}
Use CSS transform: translateY() for header animations instead of changing height or padding. Transform-based animations run on the compositor thread and do not trigger layout recalculation, so they cannot cause CLS.
Prioritized Fix Order
Not all CLS fixes are equal. Here is the order we recommend based on typical impact and effort:
<img> tag. Fixes the majority of CLS issues on most WordPress sites.
position: fixed if not already. Immediate CLS elimination.
min-height or aspect-ratio to container divs. Medium effort, high impact on ad-heavy pages.
font-display: swap, tune fallback metrics. Medium effort, eliminates text reflow shifts.
Start by running your most important pages through PageSpeed Insights. Look at the specific elements flagged under the "Avoid large layout shifts" diagnostic. Address image dimensions first, then work down the list. Most WordPress sites can drop their CLS below 0.1 by fixing just the first three items.
If your theme is fundamentally broken or you are dealing with complex shifts you cannot track down, a full technical SEO audit with waterfall analysis will pinpoint the exact source. For a broader view of how CLS fits into the complete performance picture, read our site speed audit process guide.
Stop losing traffic to jumping pages
Barracuda SEO crawls your WordPress site and flags exactly which elements cause layout shifts — with prioritized fixes so you know what to tackle first.
Try Barracuda SEO Free