Insights performance
Shopify CLS Layout Shift: 4 Root Causes and Their Fixes
Shopify CLS layout shift occurs when visible page elements move unexpectedly after initial render, measured by the Cumulative Layout Shift metric that quantifies how much content jumps around during page load.
Key takeaways
- CLS scores above 0.1 cause measurable friction in the checkout flow, with stores scoring 0.25 or higher seeing 8 to 12% higher cart abandonment rates in mobile sessions.
- Images without explicit width and height attributes are the single largest contributor to layout shift on Shopify stores, accounting for 60 to 75% of all CLS violations we audit.
- Third-party review widgets, trust badges, and announcement bars that inject content after DOM load typically add 0.05 to 0.15 to your CLS score per widget.
- Reserve space for dynamic content using CSS aspect ratio boxes or min-height declarations before the element loads to prevent shift.
- Fixing the four root causes (unsized images, late-loading fonts, injected widgets, dynamic banners) can reduce CLS from 0.3+ down to under 0.05 in most Shopify themes.
The four root causes of Shopify layout shift
Every Shopify store we audit at Defyn exhibits layout shift from at least two of these four categories. Understanding which causes affect your store determines the fix priority.
1. Images without dimensions
When an image tag lacks width and height attributes, the browser allocates zero vertical space during initial render. The image file arrives 200 to 800 milliseconds later, forcing everything below it to shift down. Product images, collection thumbnails, blog post headers, and logo files all cause this.
The fix requires adding explicit dimensions to every <img> tag. Modern Shopify themes use the image_tag filter with size parameters:
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', width: 800, height: 1000 }}For responsive images that scale with viewport width, set dimensions that match the image’s natural aspect ratio. The browser scales both dimensions proportionally, maintaining the reserved space. If your product images are 4:5 ratio, use width="800" height="1000" even if CSS scales them down.
Legacy themes often use background images in div elements. These provide no dimension hints to the browser. Convert them to <img> tags or add a padding-bottom percentage trick:
.hero-image {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.hero-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}This reserves vertical space equal to 56.25% of the container width before the image loads.
2. Web fonts loading late
Custom fonts from Google Fonts, Adobe Fonts, or uploaded font files cause two types of shift. First, if you use font-display: swap, the browser shows fallback text that is often taller or wider than the final font, causing reflow when the web font arrives. Second, if you use font-display: block or auto, the browser hides text entirely (Flash of Invisible Text) until the font loads, then everything appears and shifts surrounding content.
The fix has three parts. First, preload critical fonts in your theme’s <head>:
<link rel="preload" href="{{ 'custom-font.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin>Second, use font-display: optional for body text. This tells the browser to use the fallback font if the web font is not available within 100ms, eliminating swap:
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
font-display: optional;
}Third, size-adjust your fallback font to match the web font’s metrics. This CSS feature scales the fallback so its x-height and width match the custom font, preventing shift even if the fallback displays:
@font-face {
font-family: 'CustomFontFallback';
src: local('Arial');
size-adjust: 97%;
ascent-override: 105%;
descent-override: 35%;
}Calculate these values using tools like Fontaine or Capsize. For most Shopify stores, setting font-display: optional and preloading one or two critical fonts solves 90% of font-related shift.
3. Third-party widgets injecting content
Review apps, trust badge scripts, live chat widgets, and email capture popups inject HTML after the DOM loads. The page renders with reserved space for none of this content, then 400 to 1200 milliseconds later a 200-pixel review widget appears and shoves everything down.
We cover review widget specifics in our lazy load Shopify review widgets guide. The general fix is to reserve space before the widget loads.
For widgets with predictable height, add a placeholder div with min-height:
<div id="review-container" style="min-height: 240px;">
<!-- Widget script injects here -->
</div>For widgets with variable height, estimate based on typical content. A five-star summary with three reviews usually renders at 200 to 280 pixels tall. Reserve 260px and accept minor shift if actual content is shorter.
Some widget providers offer “skeleton” or “placeholder” modes that render a gray box immediately, then replace it with real content. Enable these when available.
For chat widgets that appear in the bottom corner, they typically do not shift existing content because they overlay the page. But if your theme has a sticky footer or bottom navigation, the chat button can push those elements up. Use position: fixed with explicit bottom coordinates to prevent this.
4. Dynamic banners and announcement bars
Announcement bars that appear after page load (often triggered by JavaScript checking cart value, user location, or time on page) are pure layout shift. The page renders with a header, then 300ms later a 50-pixel banner appears and shifts the entire page down.
The fix depends on whether the banner is critical. If it must appear on every page load, render it server-side in Liquid with reserved space:
{% if shop.metafields.announcements.active %}
<div class="announcement-bar" style="min-height: 48px;">
{{ shop.metafields.announcements.text }}
</div>
{% endif %}If the banner is conditional (only for first-time visitors, only for cart values over $50), render a hidden placeholder on every page:
<div id="promo-banner" style="min-height: 48px; display: none;">
<!-- JavaScript populates and shows this -->
</div>When your script decides to show the banner, it sets display: block on an element that already has reserved space. No shift occurs.
For banners that genuinely should not reserve space (like GDPR cookie notices that only appear once per user), accept the shift and ensure they appear within the first 500ms of page load. Shifts that occur before user interaction are weighted less heavily in CLS scoring.
Measuring your current CLS score
Google’s Core Web Vitals report in Search Console shows field data (real user measurements) for your store. CLS is the third metric. A score under 0.1 is good, 0.1 to 0.25 needs improvement, above 0.25 is poor.
For lab testing, run Lighthouse in Chrome DevTools or use Store Auditor’s performance scanner which tests both mobile and desktop. Lighthouse provides a filmstrip showing exactly when and where shifts occur.
The PageSpeed Insights “Diagnostics” section lists specific elements causing shift. Look for “Image elements do not have explicit width and height” and “Avoid non-composited animations” warnings.
Compare your CLS against Shopify benchmarks. Our 2026 Core Web Vitals benchmarks show that stores in the top quartile maintain CLS below 0.08 on mobile and 0.05 on desktop, while bottom quartile stores score 0.22+ on mobile.
The business impact of fixing layout shift
Layout shift directly affects conversion rates. When a user aims to tap “Add to Cart” and the button moves down 40 pixels just as they tap, they hit the wrong element. This is not a minor annoyance; it breaks the purchase flow.
Stores that reduce CLS from 0.25 to under 0.1 typically see 3 to 7% improvement in mobile conversion rate. The effect is stronger for stores with high mobile traffic and complex product pages (many images, reviews, size charts).
Google uses Core Web Vitals as a ranking factor. While CLS alone will not rocket you to position one, stores with poor CLS scores (above 0.25) face ranking penalties in mobile search. Fixing CLS removes that penalty.
From an accessibility perspective, layout shift is particularly harmful for users with motor control difficulties who need extra time to position their cursor or finger. Unexpected movement makes the interface unusable for these customers.
Common questions
How long does it take to fix CLS on a Shopify store?
For a standard theme with 10 to 15 templates, fixing all four root causes takes 4 to 8 hours of developer time. Adding image dimensions to Liquid templates takes 1 to 2 hours. Font optimization takes 1 hour. Widget placeholders take 1 to 2 hours. Dynamic banner fixes take 30 to 60 minutes. Testing and validation add another hour. Heavily customized themes with 30+ sections or extensive third-party app integrations can take 12 to 16 hours.
Can Shopify apps cause layout shift even if I reserve space?
Yes, if the app injects content taller than your reserved space or injects multiple elements when you reserved space for one. Some apps also inject CSS that changes existing element heights. Audit each app individually by disabling it and re-running Lighthouse. If CLS drops significantly, that app needs either better space reservation or replacement with a less invasive alternative.
Does lazy loading images increase CLS?
Only if implemented incorrectly. Native lazy loading (loading="lazy" attribute) does not cause shift if you set width and height attributes. The browser reserves space based on those dimensions whether the image loads immediately or lazily. JavaScript-based lazy loading libraries that do not set dimensions before the image loads will cause shift. Always combine lazy loading with explicit dimensions.
Wrap up
Shopify CLS layout shift stems from four fixable causes: unsized images, late-loading fonts, injected widgets, and dynamic banners. Address images first (they account for 60 to 75% of shift), then fonts, then widgets, then banners. Reserve space for every element that loads asynchronously. Test with Lighthouse after each fix to confirm CLS reduction. Stores that systematically eliminate these four causes achieve CLS scores under 0.08, meeting Google’s “good” threshold and providing a stable, frustration-free experience for customers. For detailed performance analysis across all Core Web Vitals metrics, use Store Auditor’s automated testing to identify every shift-causing element in your theme.