10 Tips To Reduce CLS In Shopify Stores

Cumulative Layout Shift (CLS) measures how much content unexpectedly moves while a page loads. A high CLS score can frustrate users, hurt SEO rankings, and reduce conversions. Here’s how to tackle it:

1. Set Fixed Dimensions for Images: Always define width and height to avoid content jumps.
2. Load Fonts Correctly: Use font-display: swap and preload fonts to prevent layout shifts.
3. Control Dynamic Content: Reserve space for pop-ups, banners, and widgets.
4. Optimize Third-Party Scripts: Use async or defer and reserve space for injected content.
5. Efficient CSS and JavaScript Loading: Preload critical CSS and defer non-essential scripts.
6. Use Transform-Based Animations: Avoid animating layout properties like height or width.
7. Stabilize Product Galleries: Set image dimensions and use lazy loading for below-the-fold images.
8. Fix Mobile Layout Issues: Reserve space for dynamic elements and improve navigation stability.
9. Use Browser Tools: Analyze CLS issues with Chrome DevTools, WebPageTest, or Web Vitals Extension.
10. Audit Themes and Apps: Regularly check for CLS issues in your Shopify theme and apps.

Why It Matters

Google considers a CLS score below 0.1 as "good." Fixing CLS can improve user experience, reduce bounce rates, and boost conversions – like Snapdeal’s 30% increase in conversions after improving Core Web Vitals.

Quick Comparison of Key Fixes

Issue	Solution	Tools/Methods
Unoptimized Images	Set fixed dimensions, lazy load	HTML attributes, TinyIMG
Font Loading Problems	Use font-display: swap, preload	CSS @font-face, preload tags
Dynamic Content Shifts	Reserve space for elements	CSS min-height, placeholders
Third-Party Scripts	Use async/defer, reserve space	Chrome DevTools, audits
Late-Loading CSS/JS	Preload critical, defer non-critical	<link rel="preload">, defer JS

Improving CLS is an ongoing process, but these steps will make your Shopify store faster and more user-friendly.

How to improve Cumulative Layout Shift (CLS) Shopify Store

What Causes CLS in Shopify Stores

Layout shifts in Shopify stores can disrupt user experience and affect conversion rates. Identifying the main causes is crucial to fixing these issues.

Unoptimized Images

One common culprit is loading images without predefined dimensions. When browsers don’t know the image size in advance, they adjust the page layout as the images load, causing unexpected content jumps.

Font Loading Problems

Custom fonts can also create layout shifts. If fonts aren’t set up correctly, users may see a flash of unstyled text (FOUT). In this case, the browser first displays text in a fallback font, then switches to the custom font once it’s ready. This font switch can cause the surrounding layout to move.

Dynamic Content

Dynamic elements like pop-ups, GDPR notices, or product recommendations often appear suddenly, shifting the layout. These elements are frequently added by third-party apps without reserving space in advance.

Dynamic Element	Impact on CLS
Pop-up banners	Pushes main content down unexpectedly
GDPR notices	Appears suddenly, shifting page elements
Product recommendations	Alters layout when loaded
Third-party apps	Inject content without reserving space beforehand

Late-Loading CSS

When CSS for key page elements loads late – especially for content visible above the fold – it disrupts the layout, leading to shifts.

Poorly Implemented Animations

Animations that modify layout properties instead of using CSS transform properties can also cause layout shifts. A better approach is to use fixed dimensions and optimized CSS. For example, Shoptimizer‘s product category pages achieved a CLS score of 0 by setting fixed dimensions for thumbnails and refining their CSS structure.

Third-Party Scripts

Scripts for ads, social media widgets, live chat, or analytics often inject content without reserving space. This can result in unexpected layout changes if not managed properly.

1. Set Fixed Dimensions for Images

To avoid layout shifts and improve user experience, always set fixed dimensions for images. This ensures the browser reserves the correct amount of space during page load.

Using HTML Attributes and Liquid

Define the width and height attributes in your HTML, or use Shopify’s Liquid image_tag to reserve space effectively:

<img src="product-image.jpg" width="800" height="600" alt="Product Name">

Suggested Image Dimensions

Image Type	Suggested Size	Common Uses
Full-width images	2048 x 2048px	Hero sections, banners
Content images	1024 x 1024px	Product descriptions, blogs
Thumbnails	200 x 200px	Product galleries, collections

Using CSS Aspect Ratio

Leverage the aspect-ratio property in CSS to reserve image space dynamically. Here’s an example:

.product-image {
  width: 100%;
  aspect-ratio: 4/3;
}

Image Optimization Tools

Compress your images to improve loading speed. Tools like TinyIMG can reduce file sizes significantly – by up to 94% for PNGs and 54% for JPGs .

"With TinyIMG, Shopify merchants can save gigabytes of space and improve their website speed thanks to automatic bulk image optimization."

• Kristina Jaruseviciute, Senior Writer at TinyIMG

Up next: Learn how to properly load fonts to further stabilize your layout.

2. Load Fonts Correctly

Proper font loading is key to avoiding text shifts and keeping CLS (Cumulative Layout Shift) low. Just like setting fixed image dimensions, this helps maintain a stable layout. Here’s how to self-host fonts and fine-tune their loading to keep your design steady.

Self-Host Your Fonts

To self-host fonts like Roboto in different weights, upload the font files to Shopify’s Files or the assets folder. Then, define your fonts using the @font-face rule in a snippet (e.g., css-fonts.liquid):

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('{{ "roboto-v18-latin-regular.woff2" | asset_url }}') format('woff2');
}

The font-display: swap property ensures system fonts are shown temporarily while custom fonts load.

"Google recommends that you use a property called font-display. In this example, we’re using the ‘swap’ value which defaults back to system fonts temporarily until your Google Fonts have finished loading. This fixes the invisible text problem and is supported in all modern browsers." – Perfmatters.io

Optimize Font Loading

Preloading fonts in the <head> of your theme can further reduce layout shifts. Add this snippet:

<link rel="preload"
    href="{{ "roboto-v18-latin-regular.woff2" | asset_url }}"
    as="font"
    type="font/woff2"
    crossorigin>

This tells the browser to fetch the font early, ensuring it’s ready when needed.

Match Fallback Fonts

To improve consistency, use fallback fonts that closely match your custom fonts. Define them with CSS like this:

@font-face {
    font-family: 'Roboto-fallback';
    size-adjust: 97.5%;
    src: local(Arial);
}

For more advanced Shopify theme tweaks, check out E-commerce Dev Group at scaleshopify.com.

3. Control Dynamic Content Changes

Dynamic elements like banners, recommendations, and review widgets can cause layout shifts, leading to CLS (Cumulative Layout Shift) issues. The solution? Reserve space for these elements to keep your layout stable.

Reserve Space for Dynamic Elements

Set aside space for dynamic content to prevent unexpected shifts. Use CSS to define fixed dimensions for these elements:

.promo-banner { min-height: 60px; width: 100%; }

.product-reviews { min-height: 250px; margin-top: 20px; }

For app-injected content, you can target Shopify app blocks with:

.shopify-app-block { min-height: 120px; position: relative; }

Strategic Content Placement

Where you place dynamic elements matters. Here are some tips to limit their impact:

• Place widgets below the fold to avoid disrupting the user’s initial view.
• Use fixed-size containers for recommendations and reviews.
• Opt for carousels or sliders to handle frequently changing content more effectively.

User-Initiated Loading

Another approach to reduce layout shifts is to let users decide when to load content. Examples include:

• Adding "Load More" buttons for extra products.
• Using "Show Reviews" toggles for customer feedback.
• Including "Refresh" options for dynamic price updates.

Handle Late-Loading Elements

For content that loads later, use these strategies to maintain layout stability:

• Add placeholder content with the same dimensions as the final element.
• Use smooth loading techniques to replace content seamlessly.
• Ensure content is loaded into fixed-size containers.
• Keep reserved space intact, even if the content is temporarily unavailable.

"To prevent CLS issues in the store you can assign a certain min-height and min-width to the elements beforehand using CSS to the elements that are responsible for causing the layout shift so that they already occupy the space and stop it from further shifting."

4. Manage Third-Party Scripts

Third-party scripts can load content after the page is displayed, leading to layout shifts. To prevent this, use async or defer attributes and reserve space for dynamic elements in advance.

Load Scripts the Right Way

Use async for analytics and defer for non-essential scripts to improve loading efficiency:

<!-- Example for analytics -->
<script async src="analytics.js"></script>

<!-- Example for non-critical scripts -->
<script defer src="reviews-widget.js"></script>

Reserve Space for Dynamic Content

Avoid unexpected shifts by setting fixed dimensions for app elements:

.reviews-widget {
    min-height: 250px;
    width: 100%;
}

Position Content Thoughtfully

Strategic placement of app content can minimize layout disruptions:

• Add widgets below the fold to reduce their impact.
• Group dynamic elements into specific sections.
• Place review widgets near static elements of a similar size.

Regular audits and performance checks help maintain a smooth Shopify experience.

Optimize and Audit Scripts

• Remove unused apps that add unnecessary scripts.
• Choose apps using modern app blocks instead of the outdated ScriptTags API.
• Self-host critical third-party scripts for better control.

For professional Shopify performance reviews, check out E-commerce Dev Group.

Boost Loading Speed

Use resource hints like <link rel='preconnect'> or <link rel='dns-prefetch'> for faster access to critical CDNs. Self-hosting key third-party assets can also improve performance. For instance, Casper.com shaved 1.7 seconds off their home page load time by self-hosting Optimizely scripts .

Keep an Eye on Performance

Track the impact of third-party scripts using tools like:

• Chrome DevTools: Check the Network tab.
• WebPageTest: Use the Web Vitals view.
• Web Vitals Chrome Extension: Analyze performance metrics.
• PageSpeed Insights: Get detailed performance reports.

5. Load CSS and JavaScript Efficiently

Properly managing CSS and JavaScript loading can help reduce CLS (Cumulative Layout Shift) in your Shopify store, ensuring a smoother user experience.

Optimize JavaScript Loading

Use async or defer attributes for script tags based on their purpose:

• For analytics and non-critical tracking:

  <script async src="analytics.js"></script>
  

• For UI components or essential features:

  <script defer src="essential-features.js"></script>
  

• For JavaScript modules, which load deferred by default:

  <script type="module" src="shop-features.js"></script>
  

Streamline CSS Delivery

Focus on loading critical CSS first and deferring non-critical styles:

• Preload critical CSS:

  <link rel="preload" href="critical.css" as="style">
  

• Defer non-critical CSS and adjust the media attribute once loaded:

  <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
  

These steps ensure the most important styles are available immediately while delaying less critical ones.

Optimization Tips

• Keep JavaScript bundles under 16 KB to maintain fast loading speeds.
• Use resource hints like preconnect and Shopify’s CDN to accelerate asset delivery.

Performance Monitoring

Shopify offers tools to track and improve performance:

• Theme Check: Identify performance bottlenecks in your theme.
• Web Performance Dashboard: Monitor site speed and stability.
• Lighthouse Audits: Analyze loading times and layout stability.

Efficient Loading Methods

Here are some practical examples of efficient loading:

• Lazy load images below the fold to save bandwidth and improve speed:

  <img loading="lazy" src="product-image.jpg" alt="Product">
  

• Load non-critical JavaScript features on demand, triggered by user interaction:

  document.getElementById('reviews-button').addEventListener('click', () => {
      import('./reviews-module.js');
  });
  

These techniques complement other strategies, ensuring assets load without impacting layout stability.

Key Priorities for Resource Loading

The table below highlights the best practices for loading different resource types:

Resource Type	Loading Strategy	Best Practice
Critical CSS	Preload	Inline or preload above-the-fold styles
Core Scripts	Defer	Use defer for essential functionality
Analytics	Async	Load asynchronously to avoid blocking
Images	Lazy Load	Apply lazy loading for below-the-fold content

6. Use Smart Animation Methods

Adding animations to your Shopify store? Make sure they’re smooth and don’t disrupt your site’s performance. Using CSS transforms is a great way to minimize layout shifts and improve your Core Web Vitals.

Transform-Based Animations

Stick to CSS transforms for better animation performance:

/* Not Ideal: */
.banner {
    animation: slideUp 0.3s;
    bottom: -100px;
}

/* Better Option: */
.banner {
    transform: translateY(100%);
    transition: transform 0.3s;
}

Animation Properties to Focus On

Avoid animating properties like height, width, or position (top, right, bottom, left). Instead, use transform: scale() for resizing and transform: translate() for movement. These are easier on your browser and keep things running smoothly.

Hardware Acceleration for Smooth Animations

Using CSS transforms enables hardware acceleration, which ensures smoother animations. This approach helps reduce scroll lag and improves touch response, all while keeping Cumulative Layout Shift (CLS) in check.

Respecting Accessibility Preferences

Not everyone loves flashy animations. Use the prefers-reduced-motion media query to honor user settings:

@media (prefers-reduced-motion: reduce) {
    .animated-element {
        transition: none;
        animation: none;
    }
}

Tips for Effective Animations

"The best website animations have both purpose and style. Intentional animation can create a level of feeling and perception close to what a person experiences when interacting with a physical object in real life." – Heidi Olsen

• Keep animation timing and easing consistent across your site.
• Add visual feedback for user actions, like button clicks.
• Use CSS custom properties to make styling more flexible.
• For advanced updates, consider requestAnimationFrame() for efficiency.

7. Set Up Product Galleries Properly

Product galleries can often cause layout shifts, impacting the user experience. Here’s how to stabilize image loading and avoid CLS issues.

Set Fixed Image Dimensions

Define the width and height of your images to reserve space before they load. This keeps the layout steady as the images appear.

Implement Smart Lazy Loading

Once you’ve reserved space for images, control when they load using the loading attribute:

<!-- Images in the viewport load immediately -->
<img src="main-product.jpg" loading="eager" width="800" height="600">

<!-- Images outside the viewport load lazily -->
<img src="gallery-image.jpg" loading="lazy" width="800" height="600">

Choose the Right Gallery Apps

Pick apps designed to reduce CLS. Look for features like lazy loading and fixed dimensions. Here are a few options:

App Name	Features
Photo Gallery Robin PRO	Lazy loading, Fixed dimensions
VSlide	Variant-specific image loading
Gallerify	Optimized gallery layouts

Use Liquid Image Tags

For Shopify stores, Liquid tags can help automate the assignment of image dimensions. Here’s an example:

{% assign image = product.featured_image %}
{{ image | image_tag: width: 800, height: 600 }}

This approach complements the fixed-dimension method, ensuring your gallery remains stable.

"The app works great…One of the other great things it did is sped up our load speed. Previously Shopify would load ALL of the images for ALL of the variants, but this app doesn’t cause the images to be loaded until the variant is selected."
– Boost Auto Parts, VSlide: variant images gallery User

Gallery Best Practices

• Reserve Space: Use CSS aspect ratio boxes or fixed dimensions to prevent layout shifts.
• Load Variant Images on Demand: Only load variant-specific images when a user selects the variant.

8. Fix Mobile Layout Issues

When it comes to mobile devices, layout shifts can become even more noticeable. These tips will help you tackle mobile-specific challenges and create a smoother browsing experience.

Reserve Space for Dynamic Content

Mobile layouts often require tighter spacing. To avoid unexpected shifts, assign minimum heights to dynamic elements like app blocks. For example:

.shopify-app-block {
    min-height: 120px;
}

Place Widgets Carefully

Dynamic elements, such as review widgets or banners, should be placed below static content. This reduces the chance of layout disruptions. Also, refine your navigation setup to make it more stable on mobile devices.

Improve Mobile Navigation

Keep your navigation fixed and ensure tap targets are large enough – at least 44×44 pixels. This not only prevents layout shifts but also makes navigation easier for users.

Handle Cookie Notices Better

Use CSS transforms to display cookie notices without disrupting the layout. Here’s a quick example:

.cookie-notice {
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.cookie-notice.visible {
    transform: translateY(0);
}

Focus on Above-the-Fold Content

Loading above-the-fold content first can significantly reduce layout shifts during rendering. Remember, websites that load in one second convert 2.5× better than those that take five seconds .

Real-World Example

A Shopify merchant using the Shella theme faced major layout shifts when their banner and product grid loaded before the title section . By predefining container heights, reordering the load sequence, and using CSS aspect ratio boxes, they improved their mobile CLS to meet Google’s standards .

Optimize Mobile Forms

For mobile forms, use larger input fields with fixed dimensions, consistent padding and margins, and place labels above the input fields (instead of floating labels). These tweaks work alongside desktop optimizations to create a seamless mobile experience.

Google considers a CLS score below 0.1 as good, while scores above 0.25 are poor . These mobile-specific adjustments will help you achieve a more stable, user-friendly layout.

9. Use Browser Tools to Find CLS Issues

Modern browser tools make it easier to identify and measure CLS (Cumulative Layout Shift) issues in your Shopify store.

Chrome DevTools Performance Panel

Chrome DevTools provides detailed insights into layout shifts. Here’s how to use it:

1. Open DevTools (press F12 or right-click and select Inspect).
2. Go to the Performance tab.
3. Enable network throttling and set it to Slow 3G.
4. Start recording while loading your page.

In the "Experience" section, you’ll see layout shifts highlighted with timing details, showing which elements caused shifts and how they impacted your CLS score.

WebPageTest Visual Analysis

WebPageTest offers a frame-by-frame filmstrip that highlights shifted content in pink. This tool is especially helpful for spotting issues in dynamic content sections.

Web Vitals Extension

The Web Vitals Chrome extension provides real-time feedback on layout shifts directly in your browser’s console. It’s a great tool for identifying problems during development.

Best Practices for Testing

• Disable Cache: Clear your cache to simulate a first-time visitor experience.
• Test Different Speeds: Use various network throttling settings to see how loading impacts CLS.
• Focus on Above-the-Fold Content: Pay close attention to content visible without scrolling.
• Check Multiple Pages: Test key pages like product, collection, and home pages separately.

Real-Life Example of Improvement

The Telegraph Media Group achieved a 250% improvement in their CLS score by standardizing ad sizes and setting aside space for ad slots. This change not only boosted their CLS score but also increased visitor engagement and ad revenue .

"CLS is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts – a low CLS helps ensure that the page is delightful." – Google

As of June 1, 2021, 62.2% of websites had a CLS score below 0.1 for desktop experiences . Next, focus on optimizing your theme and app performance to further reduce CLS issues.

10. Check Theme and App Performance

After tackling earlier optimizations, it’s time to dive into your theme and apps to identify any hidden CLS (Cumulative Layout Shift) issues. Regular performance checks should include a close look at how your theme and apps are performing.

Evaluating Theme Performance

• Use Shopify Lighthouse CI to test key pages like the homepage, product pages, and collection pages.
• Add automated performance testing to your workflow to catch issues early.
• Keep an eye on CLS scores regularly to ensure stability.

If you’re working with frameworks like Vue or React, consider an HTML-first approach. This can help minimize CLS caused by heavy JavaScript usage.

Managing App Performance

To optimize how apps affect your site’s performance, focus on these areas:

JavaScript Loading

• Add async or defer attributes to non-essential scripts.
• Load resources only when users interact with them.
• Keep minified JavaScript bundles under 16 KB.

CSS Handling

• Load remote stylesheets after inline JavaScript.
• Limit CSS files to 50 KB per app.
• Reserve space for dynamic content to avoid layout shifts.

Real-Life Example

In July 2023, MyRubyLips made a simple tweak by removing a problematic script from their Dawn theme. This change boosted their site speed by 10 points and completely eliminated CLS.

"Our job is to help merchants improve their web performance and apply learnings back to our platform. In our experience, we’ve observed the same common CLS issues across most Shopify sites." – performance.shopify.com

Seeking Expert Help

If you’re facing complex performance issues, consider reaching out to specialists like E-commerce Dev Group. They can provide detailed Shopify audits and help resolve stubborn CLS problems.

Conclusion

Improving your Shopify store’s CLS can enhance the shopping experience and improve your search rankings. With just 44.1% of origins hitting good Core Web Vitals scores , there’s plenty of room to stand out from the competition.

Impact on Business Performance

Lowering CLS can lead to measurable benefits. For example, Snapdeal saw a 30% increase in conversions , Zitmaxx Wonen achieved a 20% boost in session duration , and Currys plc experienced a 2% rise in revenue .

Keeping CLS Scores in Check

Track your site’s performance using tools like:

• Google PageSpeed Insights: Offers detailed page-level analysis.
• Google Search Console: Provides historical tracking of your site’s vitals.
• Chrome User Experience (CrUX) reports: Delivers broader data insights .

Key steps to maintain low CLS scores include:

• Setting explicit dimensions for images.
• Using proper font-loading strategies.
• Reserving space for dynamic elements.
• Performing regular performance audits on themes and apps .

"Google indicates that scoring under 0.1 for CLS is the goal for a great user experience!"

Moving Ahead

Every optimization you make strengthens both your site’s usability and its performance. This is especially important since over half of the Top 500 retail sites score "Poor" for CLS on mobile . As John Mueller from Google explains:

"Core Web Vitals is more than a random ranking factor, it’s also something that affects your site’s usability after it ranks (when people actually visit)" .

CLS optimization isn’t a one-time task – it demands consistent monitoring. Regular updates ensure your Shopify store remains fast and user-friendly, which is critical as faster sites can generate up to 327% more revenue .

For more complex issues, consider working with experts like E-commerce Dev Group. They can provide detailed audits and customized solutions to keep your Shopify store performing at its peak.

Related Blog Posts

• 8 Ways to Boost Shopify Store Conversion Rates
• CDN Integration Tips for Shopify
• Common Liquid Code Issues Slowing Shopify Stores
• How To Monitor Core Web Vitals in Shopify