Shopify Performance Issues

Platform-specific guides for diagnosing and fixing Core Web Vitals and performance issues on Shopify.

Core Web Vitals

Largest Contentful Paint (LCP)

Fix slow main content loading on Shopify. Target: under 2.5 seconds.

Cumulative Layout Shift (CLS)

Resolve visual stability issues causing layout shifts. Target: under 0.1.

Common Shopify Performance Issues

Theme Performance

Shopify themes built with Liquid can significantly impact performance.

Common issues:

• Heavy premium themes with excessive features
• Unoptimized Liquid code and loops
• Too many sections loading on every page
• Excessive use of metafields in templates
• Large theme JavaScript bundles

Optimization strategies:

• Use lightweight, performance-optimized themes (Dawn is Shopify's fastest theme)
• Minimize Liquid loops (especially nested loops)
• Limit product/collection loops to 12-24 items
• Remove unused theme sections and blocks
• Defer non-critical JavaScript
• Use theme.liquid efficiently for global elements

Optimized Liquid example:

{% comment %} Good: Limited, paginated collection loop {% endcomment %}
{% paginate collection.products by 24 %}
  {% for product in collection.products %}
    {% render 'product-card', product: product %}
  {% endfor %}
  {{ paginate | default_pagination }}
{% endpaginate %}

{% comment %} Bad: Loading all products {% endcomment %}
{% for product in collection.products %}
  {% comment %} Heavy processing for each product {% endcomment %}
{% endfor %}

Image Optimization

Shopify has built-in image optimization, but proper implementation is crucial.

Best practices:

• Use Shopify's image filters for automatic resizing
• Enable lazy loading for images below the fold
• Upload images at appropriate sizes (2048px max for product images)
• Use JPG for photos (75-85% quality)
• Leverage Shopify CDN for all images
• Use responsive images with image_url filters

Shopify image optimization:

{% comment %} Responsive images with Shopify filters {% endcomment %}
<img
  srcset="{{ product.featured_image | image_url: width: 400 }} 400w,
          {{ product.featured_image | image_url: width: 800 }} 800w,
          {{ product.featured_image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  src="{{ product.featured_image | image_url: width: 800 }}"
  alt="{{ product.featured_image.alt | escape }}"
  loading="lazy">

{% comment %} Use appropriate image sizes {% endcomment %}
{{ product.featured_image | image_url: width: 600, height: 600, crop: 'center' }}

App Performance

Shopify apps can severely impact performance when too many are installed.

Common performance-heavy apps:

• Product recommendation engines
• Review and ratings apps
• Live chat widgets
• Email popup/exit intent apps
• Social media integration apps
• Currency converters

Best practices:

• Limit apps to essential functionality only (10-15 maximum)
• Audit installed apps quarterly
• Remove unused apps completely (not just uninstall)
• Check app performance scores before installation
• Prefer apps that load asynchronously
• Use native Shopify features instead of apps when possible

Monitor app impact:

1. Shopify Admin > Online Store > Themes > Customize
2. Use Speed Analysis tool to see app impact
3. Test page load with apps disabled
4. Review app code in theme.liquid and asset files

JavaScript Optimization

Common issues:

• Large JavaScript bundles from apps
• Synchronous script loading
• jQuery dependencies
• Duplicate library loading
• Unoptimized custom scripts

Optimization techniques:

{% comment %} Defer non-critical JavaScript {% endcomment %}
<script src="{{ 'theme.js' | asset_url }}" defer></script>

{% comment %} Async load third-party scripts {% endcomment %}
<script async src="https://external-widget.com/script.js"></script>

{% comment %} Load scripts conditionally {% endcomment %}
{% if template == 'product' %}
  <script src="{{ 'product.js' | asset_url }}" defer></script>
{% endif %}

Remove jQuery if possible:

• Use vanilla JavaScript for better performance
• Many modern themes don't require jQuery
• Remove jQuery dependencies from custom code

Liquid Template Performance

Optimization best practices:

• Minimize database queries in Liquid (use assign to cache results)
• Avoid nested for loops
• Use limit parameter in collection loops
• Cache expensive calculations with assign or capture
• Use sections and snippets efficiently

Efficient Liquid patterns:

{% comment %} Cache collection count {% endcomment %}
{% assign product_count = collection.products.size %}

{% comment %} Limit loops {% endcomment %}
{% for product in collection.products limit: 12 %}
  {{ product.title }}
{% endfor %}

{% comment %} Use snippets for reusable code {% endcomment %}
{% render 'product-card', product: product %}

Shopify-Specific Performance Features

Shopify CDN

Shopify automatically serves all assets through a global CDN:

• Automatic asset caching
• Image optimization and resizing
• Geo-distributed content delivery
• HTTP/2 and HTTP/3 support
• Automatic SSL/TLS

CDN optimization:

• All theme assets and product images use CDN automatically
• Use asset_url filter for theme assets
• Use image_url filter for product images
• Leverage CDN for custom images uploaded to Files

Online Store Speed Score

Shopify provides a built-in speed score in the admin.

Access Speed Score:

1. Shopify Admin > Online Store > Themes
2. View "Speed" score (0-100)
3. Review specific recommendations
4. Track improvements over time

Improve speed score:

• Remove unused apps
• Optimize images
• Minimize custom code
• Use performance-optimized themes
• Follow Shopify's recommendations

Lazy Loading

Shopify Dawn theme includes built-in lazy loading.

Implement lazy loading:

{% comment %} Native lazy loading {% endcomment %}
<img src="{{ image | image_url }}" loading="lazy" alt="{{ image.alt }}">

{% comment %} Lazy load sections {% endcomment %}
<script>
  if ('IntersectionObserver' in window) {
    const lazyLoad = (target) => {
      const io = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.add('loaded');
            io.disconnect();
          }
        });
      });
      io.observe(target);
    };

    document.querySelectorAll('[data-src]').forEach(lazyLoad);
  }
</script>

Shopify Checkout Performance

Shopify's checkout is hosted and optimized by Shopify.

Performance features:

• Automatically optimized checkout flow
• Global CDN for checkout assets
• Mobile-optimized by default
• A/B tested for conversions and performance

Custom checkout optimization (Shopify Plus):

• Minimize custom checkout scripts
• Optimize checkout.liquid modifications
• Use Shopify Scripts sparingly
• Test checkout performance on real devices

Platform-Specific Troubleshooting

Slow Homepage

Causes:

• Too many sections enabled
• Large featured collection with many products
• Unoptimized slideshow images
• Heavy product recommendation sections
• Multiple app widgets loading

Fixes:

• Limit homepage sections (8-12 recommended)
• Reduce featured products shown (8-12 products)
• Optimize hero/slideshow images (compressed, appropriate size)
• Lazy load below-the-fold sections
• Remove or consolidate app widgets

Slow Collection Pages

Causes:

• Loading too many products per page
• Unoptimized product images
• Complex filtering and sorting
• Heavy product card designs

Fixes:

• Implement pagination (24-48 products per page)
• Use paginate tag for collections
• Optimize product card images
• Simplify product card design
• Lazy load product images

Optimized collection template:

{% paginate collection.products by 24 %}
  <div class="collection-grid">
    {% for product in collection.products %}
      <div class="product-card">
        <a href="{{ product.url }}">
          <img
            src="{{ product.featured_image | image_url: width: 400 }}"
            alt="{{ product.title }}"
            loading="lazy"
            width="400"
            height="400">
          <h3>{{ product.title }}</h3>
          <p>{{ product.price | money }}</p>
        </a>
      </div>
    {% endfor %}
  </div>
  {{ paginate | default_pagination }}
{% endpaginate %}

Slow Product Pages

Causes:

• Large product image galleries
• Many product variants
• Heavy product description content
• Reviews section loading synchronously
• Related products queries

Fixes:

• Optimize product image sizes
• Lazy load gallery images
• Simplify variant selector
• Load reviews asynchronously
• Cache related products
• Use product JSON for variant data

Cart Performance

Optimization tips:

• Use AJAX cart instead of full page reloads
• Minimize cart API calls
• Cache cart contents client-side
• Optimize cart drawer/popup design

AJAX cart example:

fetch('/cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    id: variantId,
    quantity: 1
  })
})
.then(response => response.json())
.then(data => {
  // Update cart UI
})
.catch(error => console.error('Error:', error));

Advanced Performance Techniques

Implement Resource Hints

Use resource hints for critical resources:

<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">

{% comment %} Preload critical assets {% endcomment %}
<link rel="preload" as="style" href="{{ 'theme.css' | asset_url }}">
<link rel="preload" as="script" href="{{ 'theme.js' | asset_url }}">

{% comment %} Preload hero image {% endcomment %}
{% if template == 'index' %}
  <link rel="preload" as="image" href="{{ section.settings.hero_image | image_url: width: 1200 }}">
{% endif %}

Critical CSS Implementation

Inline critical CSS for above-the-fold content:

{% comment %} In theme.liquid <head> {% endcomment %}
<style>
  /* Critical above-the-fold styles */
  .header { height: 60px; background: #fff; }
  .hero { min-height: 500px; }
  .nav { display: flex; }
</style>

{% comment %} Load full stylesheet asynchronously {% endcomment %}
<link rel="preload" as="style" href="{{ 'theme.css' | asset_url }}" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  <link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
</noscript>

Service Worker for PWA

Implement service worker for progressive web app features:

// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('shopify-v1').then((cache) => {
      return cache.addAll([
        '/collections/all',
        '/cart',
        // Add critical pages
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Optimize Shopify AJAX API Calls

Minimize API calls and batch when possible:

// Good: Batch cart updates
fetch('/cart/update.js', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    updates: {
      123456: 2,
      789012: 1
    }
  })
});

// Bad: Multiple individual updates
// Don't make separate API calls for each item

Performance Testing for Shopify

Diagnostic Tools

1. Google PageSpeed Insights - Core Web Vitals analysis
2. Chrome DevTools Performance Tab - Detailed waterfall analysis
3. Lighthouse - Comprehensive performance audit
4. Shopify Speed Score - Built-in performance metrics
5. WebPageTest - Advanced performance testing

Shopify-Specific Testing

Theme performance analysis:

1. Admin > Online Store > Themes > Customize
2. Use the Speed Analysis tool
3. Review app impact on performance
4. Test with different customer segments
5. Compare theme performance scores

Key Metrics for Shopify

Performance targets:

• Time to First Byte (TTFB): Under 200ms
• First Contentful Paint (FCP): Under 1.8s
• Largest Contentful Paint (LCP): Under 2.5s
• Time to Interactive (TTI): Under 3.8s
• Total page size: Under 3MB
• Shopify Speed Score: Above 70

Shopify Theme Optimization

Dawn Theme Performance

Dawn is Shopify's fastest default theme (Online Store 2.0):

• Built with performance in mind
• Native lazy loading
• Minimal JavaScript
• Optimized Liquid code
• Section-based architecture

Migrating to Dawn:

• Review Dawn's performance features
• Adopt section-based structure
• Simplify custom code
• Remove unnecessary apps

Online Store 2.0 Features

Performance improvements:

• Section-based customization
• Faster theme editing
• Better code organization
• Reduced theme.liquid complexity
• App blocks for better integration

Custom Theme Optimization

Best practices for custom themes:

• Base on Dawn or performance-optimized theme
• Follow Shopify's theme development best practices
• Minimize custom JavaScript
• Use Shopify's section and block architecture
• Test performance throughout development

Theme performance checklist:

• Optimize all images
• Minimize Liquid loops
• Defer non-critical JavaScript
• Remove unused CSS
• Implement lazy loading
• Use CDN for all assets
• Test on real devices
• Minimize app usage

Ongoing Maintenance

Regular Performance Audits

Monthly tasks:

1. Check Shopify Speed Score
2. Review installed apps (remove unused)
3. Run Lighthouse audits on key pages
4. Monitor Core Web Vitals in Search Console
5. Test checkout flow performance
6. Review customer feedback about site speed

Theme Updates

• Keep theme updated to latest version
• Review Shopify changelog for performance improvements
• Test updates in theme preview before publishing
• Monitor theme performance after updates

App Audits

Quarterly app reviews:

1. List all installed apps
2. Identify unused or redundant apps
3. Check app performance scores
4. Remove or replace heavy apps
5. Test site performance after removals

Monitor Shopify Status

• Subscribe to Shopify status updates
• Monitor for platform performance issues
• Check for scheduled maintenance
• Review Shopify blog for optimization tips

Shopify Plus Performance

Exclusive Performance Features

Shopify Plus benefits:

• Custom checkout.liquid (optimize checkout)
• Shopify Scripts (for cart/checkout logic)
• Launchpad (for high-traffic events)
• Dedicated infrastructure
• Priority support

Wholesale Channel Optimization

B2B performance:

• Optimize wholesale catalog display
• Use appropriate pagination
• Minimize variant complexity
• Cache wholesale pricing
• Optimize bulk order forms

Multi-Currency Performance

Optimization tips:

• Use Shopify Payments for native multi-currency
• Minimize JavaScript currency converters
• Cache currency conversion rates
• Optimize currency selector UI

General Fixes

For universal performance concepts, see the Global Performance Issues Hub.

Related Guides

• Shopify Troubleshooting Overview
• Tracking Issues