CLS — How to Stop Your Content From Jumping

A familiar frustration: you go to click a button, and just then the page injects an image or ad and everything shifts — your click lands in the wrong place. That annoyance is measured by CLS (Cumulative Layout Shift), the third Core Web Vital. It measures how much elements move unexpectedly during loading. A good score is below 0.1; above 0.25 is considered poor, and Google uses it as a ranking signal.

Why content jumps

The main causes are almost always the same: images and video without set dimensions, ads and embeds that load late and push content down, web fonts that replace the system font so text reflows, and content injected by JavaScript above existing content (banners, cookie notices). All of it moves what the user has already seen.

How to prevent CLS

• Always set width and height on images and videos. The browser then reserves the space up front, and nothing jumps when the image loads. This fixes most of the problem.
• Reserve space for ads and embeds. Define a fixed container height before the ad loads.
• Use font-display: optional or swap with preload. This reduces the text shift when the real font arrives.
• Do not inject content above existing content. Place banners and cookie notices as an overlay or at the bottom, not so they push content down.
• Animate dynamic elements with transform, not by changing height. Transform-based animations do not trigger a reflow.

The most common mistake

By far the biggest culprit is images without dimensions. In modern HTML it is enough to set the width and height attributes (or aspect-ratio in CSS) and the browser calculates the space itself. Many people skip this thinking responsive design handles it — it does not, because the browser does not know the proportions until the image arrives.

Where hosting comes in

CLS is mostly a front-end problem, but delivery speed helps: if images and fonts load quickly from fast hosting and a CDN, the window in which content can jump is shorter. A slow server extends the period of unstable layout. Building on quality WordPress hosting gives you a good foundation, but you still have to set image dimensions and reserved space yourself.

How to measure CLS

PageSpeed Insights reports CLS and, in the diagnostics section, which elements shift. Chrome DevTools also has a visual layout-shift view in the Performance panel, where you see exactly what jumps and when.

Frequently asked questions

What is a good CLS? Below 0.1 for 75% of mobile visits.

Does a cookie notice hurt CLS? Yes, if it pushes content down. Place it as an overlay that does not move the page.