Performance

How to fix layout shift (CLS) on a WordPress site

You tap a button and hit the ad that jumped into its place — that is layout shift. Cumulative Layout Shift scores how much the page moves after it starts rendering, and Google wants it under 0.1. On WordPress the causes are remarkably consistent.

1. Give every image its dimensions

An image without width and height attributes takes up zero space until it downloads, then shoves everything below it down. Modern WordPress adds dimensions automatically for content images, but theme images, page-builder widgets and hand-written HTML often miss them. Add the attributes (or an aspect-ratio in CSS) so the browser reserves the box before the file arrives.

2. Reserve space for late arrivals

Cookie notices, promo bars, ad slots and A/B-test banners that inject themselves after load are CLS machines. Two rules: render them into space that is already reserved (a container with a fixed min-height), or overlay them (position fixed/sticky) so they do not displace content at all. A top banner that pushes the whole page down scores against every element on it.

3. Stop font-swap jumps

When a web font arrives late and is noticeably larger or smaller than the fallback, every paragraph reflows. Use font-display: swap together with a well-matched fallback font — the size-adjust descriptor lets you match the fallback’s metrics to the web font so the swap is invisible. Preloading the main font file also shrinks the window in which a swap can happen.

4. Watch embeds and sliders

YouTube embeds, map iframes and carousel/slider widgets frequently render at one height and then resize themselves. Wrap embeds in a fixed aspect-ratio container, and prefer sliders that reserve their full height up front — or replace the slider entirely; they are a conversion dead-zone anyway.

5. Find your shifts precisely

PageSpeed Insights lists the exact elements that shifted and by how much, and Chrome DevTools (Performance panel, “Layout Shifts” track) shows each shift frame by frame. Fix the top two or three offenders and CLS usually drops from failing to comfortably green — it is rarely more than a handful of elements.