How to Fix Cumulative Layout Shift (CLS) for Good

CLS measures how much your page jumps around while loading. Google scores it 0 to 1: under 0.1 is good, 0.1 to 0.25 needs work, above 0.25 is poor. It's one of three Core Web Vitals, and unlike a slow load, layout shift is felt directly by users, tap the wrong button, lose their place, bounce. Fixing it usually takes a day, not a sprint.

Start with images, the single biggest cause. Every img and video tag needs explicit width and height attributes (or a CSS aspect-ratio). The browser reserves that box before the file arrives, so nothing below it moves. On Shopify, most themes already do this, but custom sections and app-injected images often don't, audit them. Run Lighthouse or PageSpeed Insights and check the "Avoid large layout shifts" diagnostic; it names the exact elements shifting.

Fonts are the second offender. When a web font loads late, the browser swaps the fallback for it and text reflows. Add font-display: optional or swap, preload your primary font file with <link rel="preload" as="font" crossorigin>, and match the fallback's size so the swap is invisible. Tools like Fontaine or the CSS size-adjust property let you tune the fallback metrics to near-zero shift.

Ads, embeds, and iframes shift pages hard because their height is unknown until they render. Reserve a min-height on the container based on the most common size, YouTube embeds, Instagram cards, review widgets, ad slots. A booked 250px slot that fills with a 250px ad shifts nothing. If size varies, reserve the largest common size and accept a little whitespace; empty space beats a jump.

Never inject content above what the user is already looking at. Cookie banners, promo bars, "free shipping" ribbons, and lazy-loaded sections that push the page down are classic CLS spikes. Use fixed or sticky positioning, overlay them, or reserve their space in the initial layout. The same applies to anything a JavaScript app renders after hydration: give it a placeholder of the right dimensions.

Measure in the field, not just the lab. Lighthouse gives you one synthetic run, but Google ranks on real users via the Chrome UX Report (CrUX). Install the free web-vitals JavaScript library or check Google Search Console's Core Web Vitals report to see your 75th-percentile CLS across real devices. Lab and field often disagree, trust the field number, that's what affects rankings.

To keep CLS fixed for good, put a guard in place. Add web-vitals tracking to your analytics so a regression shows up the day it ships, not three months later in Search Console. Re-test after every theme update, new app install, or marketing tag, those are where shift creeps back in. A five-minute check per deploy is what turns a one-time fix into a permanent one.