Cumulative Layout Shift (CLS) measures visual stability — how much the content on your page moves around as it loads. You have experienced bad CLS as a user: you start reading an article, an image loads and pushes everything down, and you lose your place. You go to click a button and an ad loads above it at the last moment, sending you somewhere you did not intend.

Google uses CLS as a Core Web Vitals ranking signal.

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

The Main Causes of CLS on WordPress Sites

1. Images without explicit dimensions

This is the most common cause. When the browser builds the page before images have downloaded, if an image does not have explicit width and height attributes, the browser does not know how much space to reserve. When the image loads, everything below it shifts down.

<!-- This causes layout shift -->
<img src="product.jpg" alt="Product">

<!-- This does not -->
<img src="product.jpg" alt="Product" width="800" height="600">

WordPress automatically adds width and height attributes since version 5.5. The problem cases are images inserted with custom HTML, images from page builders that strip dimension attributes, and images in sliders.

2. Fonts causing layout shift

When a browser encounters a custom font, it must download it before displaying text. When the custom font loads, if it has different dimensions than the fallback font, the text reflows and everything below it shifts.

Fix: add font-display: swap to your @font-face declarations, and preload your primary body font in the head section.

For Google Fonts, add &display=swap to your URL:

https://fonts.googleapis.com/css2?family=Open+Sans&display=swap

3. Ads and dynamically injected content

Ads that load asynchronously and inject into the page without reserved space cause layout shift. Fix by giving their container explicit minimum dimensions:

.ad-container {
  min-height: 250px;
  width: 300px;
}

4. Lazy-loaded images above the fold

Lazy loading is good for below-the-fold images. But if applied to above-the-fold images, the browser renders without them and then shifts when they load. Do not apply loading="lazy" to hero images or featured images that are always visible on page load.

Diagnosing CLS in Chrome DevTools

1. Open Chrome DevTools (F12)
2. Go to the Performance tab
3. Record a page load
4. Look for "Layout Shift" events in the timeline (shown in purple)
5. Click on one to see which elements moved and by how much

Realistic Expectations

CLS is one of the easier Core Web Vitals to improve because most causes are fixable with CSS and HTML changes rather than infrastructure work. Adding image dimensions and preloading fonts typically brings CLS to 0.1 or below.

If your overall PageSpeed score is poor but CLS is already under 0.1, focus on LCP and TBT instead — they have more impact on rankings and conversions.

Run your site through the HigherHost speed test to see your full Core Web Vitals across multiple pages.

HigherHost provides managed WordPress and WooCommerce hosting with performance optimisation included. View our hosting plans.