Cumulative Layout Shift is the jump you feel when a page loads — text appears, an image shoves it down, a banner shoves everything again, and the link you were about to tap moves as your finger lands. Google measures it, and a CLS above 0.1 quietly drags rankings. The instinct is to install a “CLS fixer” plugin; the reality is that nearly every cause lives in your theme and content, fixable directly.
Layout shift has one root cause: content arriving without a reserved seat. Every fix is a version of reserving the seat.
Cause 1: Images without dimensions
The biggest offender everywhere. When an image tag carries no width and height, the browser reserves zero space for it, renders the text, then reflows everything when the image arrives. Every image needs its dimensions — either width/height attributes (WordPress adds them to content images automatically, but themes and builders frequently strip them on heroes, logos, and custom blocks) or an aspect-ratio rule in CSS. Audit the images that load above the fold first; that’s where the measured shift concentrates.
Cause 2: Web fonts swapping mid-read
The page renders in a fallback font, your custom font finishes downloading, and every line of text changes height — a full-page micro-shift users feel as flicker. Two-part fix: preload your primary font file in the head so the swap happens before meaningful paint, and use font-display: swap so text is never invisible while waiting. If your custom and fallback fonts differ wildly in width, CSS size-adjust on the fallback closes the gap, but for most sites preload alone gets CLS contribution from fonts to near zero.
Cause 3: Late-arriving blocks with no reserved space
Embeds, ad slots, cookie notices, announcement bars, lazy-loaded sections — anything injected above existing content pushes that content down. The rule is universal: reserve the space or take the element out of flow. Give embeds and ad slots a container with a fixed min-height matching their rendered size. Cookie bars and announcements should be position: fixed overlays, not blocks inserted at the top of the body. If a plugin injects a banner you can’t control, that plugin is your CLS score now — style its container’s height yourself or replace it.
Cause 4: Animations that move layout
Reveal-on-scroll effects that animate height, margin, or top shift everything around them, and Google counts it. Animate only transform and opacity — they move pixels without moving layout, which is why they’re the only properties a performance-conscious theme animates.
Measuring it properly
PageSpeed Insights reports CLS, but the diagnosis tool is Chrome DevTools: Performance panel, reload, and the Experience row flags each individual shift with the exact element that moved. Fix the biggest contributor, re-measure, repeat — CLS work is a checklist, not a mystery. Google’s CLS documentation covers the metric’s mechanics if you want the full detail.
None of this needs a plugin — it needs dimensions on media, preloaded fonts, and reserved space for anything late. If your CLS is one symptom among several red vitals, that’s usually a sign the theme itself needs a proper performance pass rather than one-metric whack-a-mole.