Skip to content
SCALEUP GURUS
Back to all posts
Shopify
12 min read

Shopify Performance Optimization: Speed Up Your Store for Better Conversions

Learn proven techniques to optimize your Shopify store's performance, reduce loading times, and improve conversion rates with our comprehensive guide.

Paweł Cybulski

Paweł Cybulski

Shopify Engineer, ScaleUp Gurus

Shopify Performance Optimization: Speed Up Your Store for Better Conversions

Table of Contents

  • Introduction
  • Why Performance Matters for Shopify Stores
  • Measuring Your Store's Performance
  • Image Optimization Techniques
  • JavaScript Optimization
  • CSS Optimization
  • Third-Party Script Management
  • Shopify-Specific Optimizations
  • Advanced Performance Techniques
  • Conclusion

Introduction

In the competitive world of e-commerce, every millisecond counts. Research shows that a 1-second delay in page load time can reduce conversions by up to 7%. For Shopify merchants, optimizing store performance isn't just about technical excellence—it's directly tied to your bottom line.

This comprehensive guide will walk you through proven strategies to dramatically improve your Shopify store's performance, enhance user experience, and ultimately drive more sales.

Why Performance Matters for Shopify Stores

Before diving into optimization techniques, let's understand why performance is critical:

  • Conversion Rates: Faster sites convert better. Amazon found that every 100ms of latency cost them 1% in sales.
  • SEO Rankings: Google uses page speed as a ranking factor, particularly for mobile searches.
  • User Experience: 53% of mobile users abandon sites that take longer than 3 seconds to load.
  • Bounce Rates: Slow sites see significantly higher bounce rates, meaning potential customers leave before engaging with your content.

Measuring Your Store's Performance

Before making optimizations, establish a baseline using these tools:

  • Google PageSpeed Insights: Provides performance scores and specific recommendations for both mobile and desktop.
  • Lighthouse: Built into Chrome DevTools, offering detailed performance audits.
  • WebPageTest: Allows testing from different locations and connection speeds.
  • Shopify Analytics: Check your online store speed score in the Shopify admin.

Record your baseline metrics, including:

  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Time to Interactive (TTI)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)

Image Optimization Techniques

Images typically account for the largest portion of page weight. Here's how to optimize them:

1. Proper Image Sizing

{% comment %} Using Shopify's built-in image resizing {% endcomment %}
{{ product.featured_image | img_url: '800x800', scale: 2, crop: 'center' }}

Always serve appropriately sized images. Don't use a 2000px wide image for a 400px container.

2. Next-Gen Formats

Convert images to WebP format, which provides superior compression:

{% comment %} Using WebP format with fallback {% endcomment %}
<picture>
  <source srcset="{{ '{{' }} product.featured_image | img_url: '800x800', format: 'webp' {{ '}}' }}" type="image/webp">
  <source srcset="{{ '{{' }} product.featured_image | img_url: '800x800' {{ '}}' }}" type="image/jpeg"> 
  <img src="{{ '{{' }} product.featured_image | img_url: '800x800' {{ '}}' }}" alt="{{ '{{' }} product.featured_image.alt | escape {{ '}}' }}">
</picture>

3. Lazy Loading

Implement lazy loading for images below the fold:

<img 
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  data-src="{{ '{{' }} product.featured_image | img_url: '800x800' {{ '}}' }}"
  class="lazyload"
  alt="{{ '{{' }} product.featured_image.alt | escape {{ '}}' }}"
>

JavaScript Optimization

JavaScript can significantly impact performance if not properly optimized:

1. Code Splitting

Split your JavaScript into smaller chunks that load only when needed:

// main.js
document.addEventListener('DOMContentLoaded', () => {
  // Load product page JS only when needed
  if (document.querySelector('.template-product')) {
    import('./product-page.js').then(module => {
      module.initProductPage();
    });
  }
  
  // Load cart drawer only when the cart button is clicked
  document.querySelector('.cart-toggle').addEventListener('click', () => {
    import('./cart-drawer.js').then(module => {
      module.openCartDrawer();
    });
  });
});

2. Defer Non-Critical JavaScript

<!-- In theme.liquid -->
<script src="{{ '{{' }} 'vendor.js' | asset_url {{ '}}' }}" defer></script>
<script src="{{ '{{' }} 'theme.js' | asset_url {{ '}}' }}" defer></script>

3. Remove Unused JavaScript

Audit your theme for unused JavaScript libraries and remove them. Common culprits include:

  • jQuery plugins that aren't being used
  • Multiple slider libraries
  • Unused animation libraries

CSS Optimization

Optimize your CSS for faster rendering:

1. Critical CSS

Inline critical CSS and defer non-critical styles:

<!-- In theme.liquid -->
<style>
  /* Critical CSS for above-the-fold content */
  .header { /* styles */ }
  .hero { /* styles */ }
  /* etc. */
</style>

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

2. Minify CSS

Ensure your CSS is minified to reduce file size. Most Shopify themes do this automatically, but custom CSS may need manual minification.

Third-Party Script Management

Third-party scripts like analytics, marketing pixels, and widgets can severely impact performance:

1. Audit Third-Party Scripts

Use the Network tab in Chrome DevTools to identify slow-loading scripts.

2. Defer Non-Critical Scripts

<!-- Instead of this -->
<script src="https://example.com/heavy-script.js"></script>

<!-- Do this -->
<script>
  window.addEventListener('load', function() {
    var script = document.createElement('script');
    script.src = 'https://example.com/heavy-script.js';
    document.body.appendChild(script);
  });
</script>

3. Use Tag Manager

Consolidate marketing tags through Google Tag Manager to reduce individual HTTP requests.

Shopify-Specific Optimizations

Take advantage of Shopify's built-in performance features:

1. Leverage Shopify CDN

Ensure all assets are served through Shopify's CDN by using the asset_url filter:

{{ '{{' }} 'custom-script.js' | asset_url {{ '}}' }}

2. Optimize Collection Filtering

Large collections with many filters can slow down pages. Implement AJAX filtering to avoid full page reloads:

// collection-filtering.js
document.querySelectorAll('.filter-option').forEach(filter => {
  filter.addEventListener('click', async (e) => {
    e.preventDefault();
    
    const url = new URL(filter.href);
    const response = await fetch(url + '?section_id=collection-products');
    const html = await response.text();
    
    // Parse the HTML and update just the products grid
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const productsGrid = doc.querySelector('.products-grid');
    
    document.querySelector('.products-grid').innerHTML = productsGrid.innerHTML;
    
    // Update URL without page reload
    history.pushState({}, '', url);
  });
});

3. Implement Predictive Search

Use Shopify's Predictive Search API for faster search results:

// predictive-search.js
const searchInput = document.querySelector('.search-input');
const resultsContainer = document.querySelector('.search-results');

searchInput.addEventListener('input', async () => {
  const searchQuery = searchInput.value;
  
  if (searchQuery.length < 3) {
    resultsContainer.innerHTML = '';
    return;
  }
  
  try {
    const response = await fetch('/search/suggest.json?q=' + searchQuery + '&resources[type]=product');
    const data = await response.json();

    // Render results
    let resultsHTML = '';
    data.resources.results.products.forEach(product => {
      resultsHTML += '<a href="' + product.url + '" class="search-result">';
      resultsHTML += '<img src="' + product.image + '" alt="' + product.title + '">';
      resultsHTML += '<div><h4>' + product.title + '</h4>';
      resultsHTML += '<p>' + product.price + '</p></div></a>';
    });
    
    resultsContainer.innerHTML = resultsHTML;
  } catch (error) {
    console.error('Search error:', error);
  }
});

Advanced Performance Techniques

For stores requiring maximum performance:

1. Implement a Service Worker

Service workers can cache assets and enable offline functionality:

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-cache-v1').then((cache) => {
      return cache.addAll([
        '/',
        '/cart',
        '/collections/all',
        '/assets/theme.css',
        '/assets/theme.js'
      ]);
    })
  );
});

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

2. Use Resource Hints

<!-- In theme.liquid -->
<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="preload" href="{{ '{{' }} 'critical-font.woff2' | asset_url {{ '}}' }}" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/collections/all">

Conclusion

Optimizing your Shopify store's performance is an ongoing process that requires regular monitoring and refinement. By implementing the techniques in this guide, you can significantly improve your store's speed, user experience, and ultimately, your conversion rates.

Remember that performance optimization is not a one-time task but a continuous process. As you add new features and content to your store, regularly test performance and make adjustments as needed.

At ScaleUp Gurus, we specialize in optimizing Shopify Plus stores for maximum performance and conversion. Contact us to learn how we can help take your store's performance to the next level.