How to Fix Cumulative Layout Shift (CLS) on Your Site

Cumulative Layout Shift, or CLS, describes how much visible content moves around while a page loads. Google's target is a score of 0.1 or lower; above 0.25 is poor. The score is not measured in time. It combines how big the moving element is and how far it moves, so a large banner pushing all content down counts much more than a tiny icon moving a few pixels.

Layout shift is the most annoying of the three Core Web Vitals in practice, because it makes people tap the wrong button or lose their place in an article. It is also often the easiest to fix, because the causes are few and well understood.

Finding what is shifting

1. Run the page through PageSpeed Insights and open the diagnostics for layout shifts. It lists the elements that moved.
2. In Chrome DevTools, open the Performance panel, tick the Screenshots option, record a page load and look at the Layout Shifts track.
3. Watch the page load on a throttled mobile profile. Shifts that are invisible on a fast connection show up clearly when files arrive slowly.

Only unexpected shifts count. Movement within 500 milliseconds after a click or tap, such as an accordion opening, is treated as expected and excluded.

The most common causes

Cause 1: images without dimensions

When an image has no width and height, the browser does not know how much space to reserve, so text jumps down when the image arrives. The fix is to include width and height attributes on every img element. Modern browsers use those values to compute the aspect ratio before the file loads, so responsive CSS such as max-width: 100%; height: auto still works. The CSS aspect-ratio property does the same job for videos and containers.

Cause 2: ads, embeds and iframes

Advertising slots, YouTube embeds, maps and social widgets often load late and expand to their own size. Reserve space with a fixed container height or aspect ratio matching the content. If an ad slot can show different sizes, reserve the most common one, or the largest, and keep it empty rather than collapsing it. Avoid inserting new content above content the visitor is already reading.

Cause 3: web fonts

When a custom font replaces a fallback font, text can change width and height, reflowing a paragraph. Reduce this by:

• Hosting fonts on your own domain and preloading the one or two most important files.
• Using font-display: swap or optional to control behaviour while the font loads.
• Choosing a fallback font with similar metrics, and using CSS descriptors such as size-adjust to line them up.
• Limiting the number of weights and styles.

Cause 4: banners and notices injected at the top

Cookie banners, promotional bars and "we use cookies" notices are classic offenders when they are inserted at the top of the page after loading, pushing everything down. Better options are to overlay the banner at the bottom or on top of the content using fixed positioning, or to reserve its height in advance. The same goes for sticky headers that change size on scroll.

Cause 5: dynamically loaded content

Content added by JavaScript after the first render, such as related posts, reviews or "load more" blocks, moves what is below it. Give the container a minimum height, show a placeholder that matches the final layout, and append new content below the visitor's current position instead of above it.

Cause 6: animations that change layout

Animating properties such as top, left, width or height forces layout changes. Use CSS transform and opacity for movement and fading; these do not move other elements and do not count as layout shifts.

WordPress notes

Recent WordPress versions add width and height attributes to images automatically, but themes, page builders and lazy-load plugins can strip or override them. Check the page source for images missing dimensions. Slider plugins and pop-ups are frequent culprits, and so are ad-network plugins that inject banners above the content. If your theme loads Google Fonts from a remote server, consider self-hosting them. The knowledge base has guides for managing your site in Plesk.

Test after, not just before

Re-test on mobile after each change, and check several page types, since a template used by blog posts may shift differently from your home page. Field data in Search Console updates over several weeks, so keep an eye on it before declaring the problem solved.

A pre-launch CLS checklist

• Every image and video has width and height or an aspect ratio set.
• Ad slots, maps and embeds sit in containers with reserved space.
• Banners overlay the page or have their height reserved.
• No more than two or three font files are loaded, and fallback fonts are matched.
• Dynamic blocks have a minimum height and add content below the viewport.

Run through this list whenever you add a new page template, and re-check after theme updates. Because CLS accumulates across the whole visit, even a modest shift late in the page, such as a chat widget popping in, can push a good score over the threshold.

Stable pages, reliable foundation

CLS fixes live in your page code, but a dependable host keeps files arriving promptly so that late-loading elements are less likely to appear unexpectedly. Zebra Hosting Cloud's WordPress hosting includes the Plesk panel and free SSL, a sensible base for a site you plan to tune.