SEO & performance
CLS
Cumulative Layout Shift
CLS, or Cumulative Layout Shift, measures how much a page's content jumps around while it loads. The "good" threshold is a score below 0.1. It is caused by images and ad slots without reserved dimensions, late-injected banners, and web fonts that resize text on swap — and it is the vital most directly responsible for mis-taps at checkout.
Why it matters
CLS is the vital with the most direct link to lost orders, because layout shift does not merely annoy — it causes mis-taps. A shopper reaching for "add to cart" while a banner loads above it presses something else, and on mobile that something else is frequently the wrong variant or a different product entirely.
It is also the cheapest of the three to fix. LCP and INP require judgement about architecture and third-party code; CLS is mostly a matter of reserving space for things that have not arrived yet. The fixes are well understood and mechanical.
The reason stores fail it anyway is that shifts are invisible to anyone testing on a fast connection. The content arrives quickly enough that nobody sees the jump, and the field data reports a problem the team cannot reproduce.
How it works on Shopify
The score accumulates: every unexpected shift during the visit contributes, weighted by how much of the viewport moved and how far. Below 0.1 is good.
Shifts have a short list of causes. Images and videos without width and height attributes, so the browser cannot reserve space until the file arrives. Content injected above existing content — announcement bars, cookie notices, app banners — which pushes everything down. Web fonts that swap from a fallback with different metrics, resizing every line of text. And embeds or ad slots given no reserved dimensions.
On Shopify the injected-content cause dominates, because apps commonly insert their elements after the page has rendered. An app-inserted trust badge above the buy button is a shift on every product page view.
The fixes are to set explicit dimensions or aspect ratios on every image, reserve space for anything injected, use font-display and size-adjust so fallback and web font occupy the same space, and never insert content above the fold after render.
Common mistakes
- Images without dimensions. The most common cause and the easiest fix.
- Announcement bars injected late. Everything below moves. Reserve the space or render it server-side.
- Cookie banners pushing content. Overlay rather than displace.
- Fonts with mismatched metrics. The swap resizes text across the page. Adjust the fallback to match.
- Testing on desktop broadband. Everything arrives fast enough to hide the problem.
- Fixing the homepage only. Product pages carry the buy button, which is where mis-taps cost money.
When you need help
Most CLS work does not need outside help — it is a checklist, and a competent theme developer can work through it.
The case that does is a store where the shifts come from apps rather than theme code. Reserving space for content an app injects, when you do not control when or whether it appears, needs coordination between the theme and the app's behaviour, and sometimes the honest answer is that the app should be replaced.
The other case is CLS failing alongside LCP and INP, where fixes trade against each other and the work is a single performance programme rather than three separate tickets.
Need this done on your store?
SEO servicesRelated terms
- Core Web VitalsCore Web Vitals are the three metrics Google uses to score real-world page experience: LCP for loading, INP for responsiveness, and CLS for visual stability. They are measured from actual Chrome users, not a lab test, and a page passes only if 75% of visits are within the "good" threshold on all three. They are a genuine — if modest — ranking signal, and a large conversion one.
- LCPLCP, or Largest Contentful Paint, measures how long it takes for the biggest visible element — usually a hero image or heading — to render. Google's "good" threshold is 2.5 seconds. On Shopify the usual culprits are unoptimised hero images, render-blocking app scripts, and fonts, in that order.