Google keeps changing its performance metrics. One year it’s page speed, then it’s FID, then it’s INP. Somewhere in the mix, CLS became a problem too. It stands for Cumulative Layout Shift, and it affects how stable your WordPress site feels while loading. Improving Cumulative Layout Shift in WordPress is essential for better user experience.

If users see text jumping or buttons moving while the page loads, you probably have a CLS issue. Let’s fix that.

What is CLS?

CLS measures how much visible elements shift on the screen while the page is loading. A low CLS score means a stable layout. A high score usually means something jumped unexpectedly: images, fonts, embeds, or banners.

Good CLS: below 0.1 Needs improvement: 0.1 – 0.25 Poor: above 0.25

1. Set Image Sizes Properly

When images don’t have a set height and width, they load after the rest of the layout, causing it to jump.

In WordPress, use add_image_size() in your theme and call the right size in your template.

// functions.php
add_image_size('hero', 1200, 600, true);

Then in your theme:

<?php the_post_thumbnail('hero'); ?>

If you’re using the Block Editor, use “Image Size” settings in the block panel and avoid full-size images unless needed.

2. Preload Fonts and Avoid FOUT

Fonts can cause layout shift if they load late or switch after a fallback renders. And that triggers a FOUT! (Flash of Unstyled Text).

Add this to functions.php:

function preload_fonts() {
echo '<link rel="preload" href="' . get_template_directory_uri() . '/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action('wp_head', 'preload_fonts');

Use font-display: swap in your stylesheet:

@font-face {
font-family: 'Inter';
src: url('/fonts/Inter.woff2') format('woff2');
font-display: swap;
}

3. Manage Lazy Loading Carefully

Since WordPress 5.5, lazy loading is enabled by default. That’s helpful for below-the-fold images but risky for critical ones.

Avoid lazy loading for:

• Logos
• Above-the-fold featured images
• Hero sections

You can disable lazy loading globally (not recommended):

add_filter('wp_lazy_loading_enabled', '__return_false');

Or you can selectively control it using JavaScript or by filtering specific elements.

4. Reserve Space for Embeds and Ads

If you use shortcodes or embed content like YouTube videos, add a wrapper with a fixed height:

<div style="height: 300px;">
[embed]https://www.youtube.com/watch?v=example[/embed]
</div>

With ads, reserve a slot using min-height:

.ad-slot {
min-height: 250px;
}

5. Stabilize Layout Shifts from Gutenberg Blocks

Sometimes block-based themes render headings or buttons that jump when fonts or padding load. This usually happens when styles are injected too late.

Use theme.json in block themes to define spacing and fonts early:

{
"settings": {
"spacing": {
"padding": true
},
"typography": {
"fontSizes": [
{ "slug": "large", "size": "36px" }
]
}
}
}

Also, pre-render important parts of the layout using server-side rendering wherever possible.

6. Avoid Injecting Content After Render

Plugins that inject popups, banners, or cookie notices can shift everything downward.

Instead of injecting, load them in pre-reserved space or render them server-side with PHP.

<div class="cookie-banner" style="min-height: 60px;">
<?php if ( !isset($_COOKIE['accepted']) ) { ?>
<p>We use cookies.</p>
<?php } ?>
</div>

If a plugin causes layout shifts, check its documentation for render timing options.

Cheatsheet for WordPress CLS Fixes

Images jump on load	Use add_image_size() and define width/height
Fonts load too late	Preload fonts and use font-display: swap
Logo disappears briefly	Disable lazy loading for above-the-fold images
Embeds move layout	Set fixed heights in wrappers
Plugin content shifts page	Reserve space or render server-side
Block padding loads late	Use theme.json to preload layout styles

CLS is fixable. You don’t need to overhaul your theme or rewrite your plugins.

• Reserve space where needed.
• Load fonts predictably.
• Avoid surprises in layout.
• Treat layout like a grid that never moves.