You have experienced Cumulative Layout Shift even if you have never heard the term. You are reading an article on your phone and the text suddenly jumps down as an ad loads above it. You reach to tap a button and the page shifts at the last moment, so you click the wrong thing. That visual instability is CLS - and it is one of the three Core Web Vitals metrics that Google uses to assess page experience.
What CLS Is and How It Is Measured
Cumulative Layout Shift is a measure of how much a page's visible content moves unexpectedly after it initially renders. Every time an element shifts position while a user is reading or interacting with the page, that shift is measured and added to a running CLS score.
The score is expressed as a decimal value:
- Good: CLS below 0.1
- Needs improvement: 0.1 to 0.25
- Poor: Above 0.25
A score of 0.1 means that the average shift across the visible viewport was about 10 percent of the screen height or width. In practice, a score above 0.25 usually means something significant on your page is jumping around during load, and visitors are definitely noticing.
What Causes CLS
Images without dimensions: This is the most common cause. When a browser encounters an <img> tag with no width and height attributes, it does not know how much space to reserve for the image until the image downloads. It renders the surrounding text, and when the image finally loads, everything below it shifts down. Setting explicit dimensions on images tells the browser to reserve the correct space in advance.
Web fonts loading late (FOUT): When a custom web font loads after the page has already rendered with a fallback system font, text can reflow as the character widths change. This is called Flash of Unstyled Text (FOUT), and it generates CLS when the font swap causes text to reformat.
Dynamically injected content: If JavaScript adds a banner, a cookie notice, an ad, or any other element above existing content after the page has loaded, everything below it shifts down. The classic example is a cookie consent banner that pushes all page content down when it appears.
Ads and embeds without reserved space: Third-party ad networks and embeds often inject content of unpredictable sizes. If no space is reserved for them, they push surrounding content when they load.
How to Measure CLS
Chrome DevTools: Open DevTools, go to the Performance tab, record a page load, and look at the Layout Shift track. It shows exactly when layout shifts occur and which elements caused them.
PageSpeed Insights: Enter your URL at pagespeed.web.dev and look at the Core Web Vitals section. CLS is reported alongside LCP and INP. The "Opportunities" section often identifies the specific elements causing shifts.
Google Search Console: The Core Web Vitals report in Search Console shows real-user CLS data aggregated across your pages, flagging URLs with poor scores based on actual visitor experiences - more representative than a single lab test.
Fixing CLS in WordPress
Set width and height on all images: In the WordPress block editor, ensure every image block has dimensions specified. For theme and template images, add width and height attributes in the HTML. WordPress has automatically included these attributes on images since version 5.5 for newly uploaded images, but images uploaded before that update may lack them.
For bulk fixing, check your theme's image output and any page builder elements that generate image HTML. A plugin like Smush or ShortPixel may handle some of this automatically.
Use font-display: swap: In your theme's CSS or Google Fonts loading code, add font-display: swap to your font-face declarations. This tells the browser to use a fallback font immediately and swap to the web font when it loads, rather than hiding text while waiting. This creates FOUT but avoids the worse alternative of invisible text. The CLS impact from FOUT is generally minor if font sizes are similar.
Avoid inserting content above existing content: If you use a cookie consent plugin, configure it to display as a fixed overlay at the bottom of the screen rather than pushing page content down from the top. Review any plugins that inject banners or notices and ensure they use absolute or fixed positioning rather than adding to the document flow.
Reserve space for ads and embeds: If you display advertising or third-party widgets, give their containers a minimum height in CSS so space is reserved before content loads. Even a close approximation reduces shift significantly.
Addressing CLS is one of the higher-impact Core Web Vitals improvements you can make because it directly affects how usable your site feels - especially on mobile. The fixes are mostly one-time changes that pay dividends in both user experience and search performance.
