Reducing layout shift (CLS)

What a layout shift feels like to a customer

You go to tap "Call now" and, just before your finger lands, a photo loads above it and the button slides down. You tap an advert instead. That is a layout shift. It annoys people and can cause wrong taps on forms and buttons.

CLS adds up these unexpected moves into one score. Movement that happens within half a second of the visitor's own tap or key press does not count, because the visitor expected something to change.

The usual causes, from most to least common

• Images and videos without width and height, so the browser does not know how much room to keep.
• Embeds such as maps, booking widgets, social feeds and video players that load late and push content down.
• Cookie notices, offer bars or app banners inserted at the top after the page has drawn.
• Web fonts that arrive late and are wider or taller than the fallback font.
• Content added by scripts above what the visitor is already reading, such as "related products" or review stars.

Fixes that work

• Give every img and video tag width and height attributes, or a CSS aspect-ratio. The browser then reserves the box before the file arrives.
• Wrap embeds in a container with a fixed minimum height that matches the widget.
• Show cookie and offer banners as an overlay at the bottom of the screen instead of pushing the page down.
• Preload your main web font and pick a fallback font with similar size, or use size-adjust so the swap barely moves anything.
• Insert late content below the fold, or keep a placeholder of the same size where it will appear.
• For animations, move things with CSS transform instead of changing top, left, width or height.

Finding the element that moves

PageSpeed Insights lists the elements that shifted the most during the lab run. Chrome DevTools can highlight shifting areas as the page loads. Load the page on a phone with a slow connection and watch: you often spot the culprit in seconds.

Remember that lab tests only see shifts during loading. Field data from real visitors also includes shifts that happen while scrolling, such as an advert that appears halfway down the page.

Theme and page builder traps

Many WordPress themes and page builders add sliders, sticky headers that change height, and lazy-loaded images with no placeholder. If your CLS is poor on every page, the theme is the likely source, so one fix in the template helps the whole site. Test a page with plugins switched off on a staging copy to see which one adds the shift.

Watching CLS in AI Marketing Master

The app shows CLS for phone and computer, with real-visitor field data from the Chrome UX Report where Google has enough visits and PageSpeed Insights lab data otherwise. Each result has a plain status label. After you fix a template, compare the lab result the same day and the field result over the next few weeks.