Did you know that even a 1-second improvement in your Shopify store’s load time can boost mobile conversions by up to 27%? Slow websites drive away 79% of shoppers, and if your site takes over 3 seconds to load, more than half of mobile users will leave.

Here are 7 simple ways to make your Shopify store faster:

Optimise Images: Use formats like WebP for smaller file sizes and enable lazy loading.
Reduce HTTP Requests: Remove unused apps, clean up leftover code, and combine CSS/JavaScript files.
Manage Cache: Use browser caching, asset versioning, and Shopify’s built-in CDN.
Set Up a CDN: Shopify’s global CDN ensures faster loading for customers worldwide.
Improve Theme Performance: Use lightweight themes, compress code, and avoid unnecessary features.
Optimise Server Response Time: Audit apps, defer non-critical scripts, and monitor server metrics.
Use AMP for Mobile: Accelerated Mobile Pages (AMP) can load in under 1 second, improving mobile conversions by 20%.

Quick Comparison:

Method	Key Benefit	Example Impact
Image Optimisation	Smaller file sizes	60% faster image loading
HTTP Request Reduction	Fewer server requests	PageSpeed score improvement
Cache Management	Faster repeat visits	Reduced server load
CDN Setup	Global content delivery	Faster international load times
Theme Performance	Cleaner, faster code	Better Core Web Vitals scores
Server Response Time	Faster initial page load	32% lower bounce rates
AMP Implementation	Faster mobile pages	20% higher mobile conversions

Why speed matters: Faster stores lead to better conversions, lower bounce rates, and higher search rankings. Start with these steps today to see immediate improvements in your Shopify store’s performance.

Ultra-Fast Shopify Tutorial: Speed Optimization Tips That Work

1. Image Optimisation Techniques

Optimising images is key for improving your Shopify store’s performance. Images can account for up to 38% of a webpage’s total weight on mobile devices, making them a critical factor in page speed. Here’s how you can optimise your images effectively without compromising quality.

Choosing the Right Image Format

Picking the correct image format can make a big difference. Here’s a breakdown of popular formats:

Format	Best For	Size Reduction	Quality
WebP	General product images	Up to 34% smaller than JPEG/PNG	Comparable quality
JPEG	Photos and blog images	Standard baseline	Great for photos
PNG	Logos and transparent icons	Larger than JPEG	Maintains lossless quality
AVIF	Complex visuals	Highest compression	Minimal quality loss

WebP stands out by offering file sizes up to 34% smaller than JPEG or PNG while maintaining similar quality. For logos or icons requiring transparency, WebP also supports it with only a slight size increase of 22%.

Image Size Guidelines

Once you’ve selected the right format, follow these size recommendations:

Maximum dimensions: 5,000 x 5,000 pixels
Ideal square image size: 2,048 x 2,048 pixels
Target file size: 70KB or smaller

For sharper visuals on high-resolution screens, use images that are at least twice the display size. This ensures clarity without slowing down load times.

"Image optimisation means ensuring your images look flawless on desktop and mobile and don’t hinder web performance. It involves modifying the image format, dimension, and resolution for a device while maintaining quality." – Mark Hayes, Shopify

Implementing Lazy Loading

Beyond format and size, controlling when images load can further improve performance. Lazy loading delays the loading of images until they’re needed, reducing initial page load time. Shopify’s Liquid image tag makes this easy:

{%- liquid
  if section.index > 2
    assign loading = "lazy"
  else
    assign loading = "eager"
  endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}

Here’s an example of lazy loading in action: In March 2024, a Speedboostr client reduced their Total Blocking Time from 3.8 seconds to just 552ms. By implementing lazy loading and resource hints, they cut their page weight by over 2MB, significantly improving rendering speed.

2. Reducing HTTP Requests

Every time your store loads, it makes HTTP requests for images, scripts, and stylesheets, which can slow things down.

Remove Unused Apps

Adding apps to your store can significantly impact load times. For instance, installing six customer-facing apps can increase load times from 2.195 seconds to 7.257 seconds and drop PageSpeed scores from 88 to 36.

To keep your store running smoothly:

Review Installed Apps: Go through your apps and identify ones you don’t need.
Evaluate App Impact: Weigh the benefits of each app against its effect on performance.
Clean Residual Code: Use tools like the Shopify Analyzer to remove leftover code from uninstalled apps.

Once you’ve tackled unnecessary apps, the next step is to optimise your code files.

Code File Optimisation

After removing unused apps, focus on combining and compressing your code files. Here’s how different file types can affect performance and what you can do about it:

File Type	Performance Issue	Fix	Benefit
CSS Files	Too many files increase HTTP requests	Merge into one `application.scss.liquid`	Less render blocking
JavaScript	Multiple files add load time	Combine into one `application.js.liquid`	Faster page loading
Theme Assets	Large, unoptimised files slow pages	Minify assets with tools like MinifyMe	Smaller file sizes

How to Optimise:

Combine Stylesheets
Create a single application.scss.liquid file and include it in your theme layout:
```
{{ 'application.scss.css' | asset_url | stylesheet_tag }}
```
Merge JavaScript Files
Combine all JavaScript files and place the final script near the closing body tag:
```
<script src="{{ 'application.js' | asset_url }}" async defer></script>
```

"Faster stores convert more customers. Faster stores rank higher on search engines".

3. Cache Management

Managing cache is a key factor in ensuring your Shopify store runs smoothly. Just like optimising images or cutting down on HTTP requests, effective cache management can significantly improve your store’s speed and responsiveness. Shopify uses CDN technology to handle much of this process automatically.

Browser Cache Settings

Browser caching helps returning visitors by storing static content locally on their devices. Shopify includes several built-in caching features to streamline this process:

Cache Feature	Function	Benefit
Asset Versioning	Adds version numbers to asset URLs	Ensures visitors always see updated content
File Compression	Applies Brotli and gzip compression	Reduces file sizes for faster loading
Protocol Optimisation	Uses HTTP/3 and TLS 1.3	Improves request efficiency

To reference assets in your store, Shopify filters can be used:

{{ 'custom-image.jpg' | asset_url }}

For CSS background images:

background-image: url("{{ 'background.jpg' | asset_url }}");

These features work together to enhance browser-level caching, making your store more efficient.

Shopify Cache Features

Shopify’s advanced caching system offers additional tools to boost performance:

1. Server-Side Rendering (SSR)
This improves store performance during cache misses by rendering content on the server.

2. Automatic Minification
Shopify automatically reduces the size of CSS and JavaScript files, speeding up load times.

3. Global CDN Distribution
Shopify uses a global CDN to ensure your store loads quickly no matter where your customers are located.

"Using a CDN means that your online store will load quickly around the globe." – Shopify.dev

The CDN offers several advantages:

Unlimited bandwidth
Automatic file compression (Brotli and gzip)
Servers distributed worldwide

To make the most of Shopify’s caching capabilities:

Use the latest Online Store 2.0 theme
Regularly check and clean up third-party code
Remove unused tag managers
Keep app installations to a minimum

These steps will help ensure your store performs at its best.

sbb-itb-19747f8

4. CDN Setup

Content Delivery Networks (CDNs) are essential for improving your Shopify store’s speed and performance worldwide. Shopify’s built-in CDN, powered by Cloudflare, handles an impressive 25 million requests per minute across over 5.3 million active stores.

Shopify CDN Basics

Shopify’s CDN automatically distributes your store’s static content (like images and scripts) to a global network of servers. This ensures visitors access files from the server closest to them, which speeds up loading times – especially for customers in other countries.

Here’s what Shopify’s built-in CDN offers:

Feature	Description
Automatic File Optimisation	Shrinks file sizes for quicker delivery
Protocol Enhancement	Improves connection speeds
Dynamic Image Editing	Delivers images in the best size and format
Global Distribution	Hosts over 20 billion files worldwide

CDN Performance Settings

To get the most out of Shopify’s CDN, follow these steps:

Upload Assets Properly
Add images via Content > Files in your Shopify admin panel. For code files, navigate to Sales Channels > Online Store > Themes > Edit code > Assets.
Confirm CDN Integration
Check your store’s source code for references like cdn.shopify.com or cdn/shop to ensure the CDN is active.
Streamline CDN Usage
- Stick to Shopify’s built-in CDN to avoid extra connection overhead.
- Take advantage of dynamic image editing tools for better image delivery.
- Enable Cloudflare’s O2O feature to boost performance.

"Shopify CDN is a powerful tool that improves page load times by making files smaller, changing their format, and improving how they load on your website."

Indraneil Khedekar, Founder of Ecommerce Launcher and Content Scribers

Shopify’s CDN is included in all plans and handles most optimisation tasks automatically, giving you fast performance without any complicated setup.

Next, we’ll look at how to fine-tune your theme for even better loading speeds.

5. Theme Performance

The code behind your Shopify theme plays a big role in your store’s loading speed. A well-optimised theme can make a huge difference in user experience and even boost conversion rates by cutting down load times.

Fast-Loading Themes

To ensure your theme loads quickly, it needs to meet Core Web Vitals benchmarks. Here’s a quick breakdown of key metrics:

Metric	Target	What It Measures
Largest Contentful Paint (LCP)	Under 2.5 seconds	Speed of loading main content
Interaction to Next Paint (INP)	Under 200ms	Responsiveness to user actions
Cumulative Layout Shift (CLS)	Below 0.1	Visual stability during load

To check how your theme is performing:

Use Shopify’s Web Performance dashboard to track these metrics.
Run tests with Google’s PageSpeed Insights for deeper analysis.
Identify issues using the Shopify Analyzer tool.

"Looking just at the speed is wrong. The fastest theme may not have the right features for a specific business and therefore they will make it slower later by installing apps and editing the theme code." – Salvatore Di Salvo, Shopify Senior Theme Support Specialist

If your theme isn’t hitting these targets, optimising its files can help improve load times.

Theme File Compression

Just like compressing images and reducing HTTP requests can speed up your site, cleaning up your theme’s code is equally important. Here’s how you can fine-tune your theme files:

JavaScript Optimisation

Keep JavaScript bundles under 16 KB; Shopify automatically minifies these.
Use defer or async for non-critical scripts to prevent blocking.
Replace JavaScript animations with CSS alternatives when possible.
Wrap JavaScript in function scopes to avoid conflicts.

CSS Management

Split stylesheets by template to avoid loading unnecessary code.
Use responsive image handling to optimise visuals.
Stick to CSS-based animations for smoother performance.

Code Efficiency

Simplify Liquid code by handling complex tasks outside of loops.
Remove outdated theme elements that slow things down.
Host assets on Shopify’s CDN for faster delivery.

"We try to write clean code, use CSS instead of JS for animations, use custom frameworks or libraries only if they are really necessary, implement features such as lazy loading of images, preloading assets, deferring scripts, etc." – Ruben Bristian, Co-founder @ KrownThemes

When customising your theme, be cautious with features that can drag down performance. For example, quick view pop-ups that preload product data or overusing jQuery can significantly slow your site. Regularly monitor your store’s performance using Shopify’s tools to keep things running smoothly.

6. Server Response Time

Server response time plays a big role in user experience. For instance, increasing page load time from one to three seconds can lead to a 32% rise in visitor drop-offs.

App Performance Check

Apps can heavily influence server response time. Here’s how to fine-tune their performance:

Monitor Key Metrics

Track these benchmarks to ensure optimal performance:

Metric	Target	Current Shopify Average
Time to First Byte (TTFB)	Under 800ms	510ms
First Contentful Paint (FCP)	Under 1.8s	–
Total Page Weight	Under 1.2MB	–
Total HTTP Requests	Under 80	–

These metrics help identify and address delays caused by apps.

Spot App-Related Issues

Speed Boostr found that many stores carry unused app code, quietly slowing down their load times. To tackle this:

Use WebPagetest.org to review your store’s waterfall chart
Check for slow Liquid code using the Theme Inspector
Analyse server response during high-traffic periods

Improve App Performance

Daniel Graupensperger from Ruggable shared: "The site is so much faster for our customers, leading to conversion and SEO boosts. Google sees our website as being much faster now and is sending a lot more traffic to us, which is fantastic".

Here are some practical steps:

Audit and remove unnecessary app code
Use conditional loading for app-specific features
Defer scripts that aren’t essential for initial load
Hard-code simple widget functions where possible

"Apps are great but also they’re the most significant factor affecting the load speed of most Shopify stores" – Speed Boostr

Advanced Optimisation Tips

For stores aiming for peak performance:

Simplify your HTML structure and reduce DOM size
Test preload settings before applying them
Enable advanced caching options

Remember, the goal isn’t just to get perfect speed scores – it’s to sell products effectively. Removing apps just for faster load times might hurt functionality.

Apply these strategies to improve server response time while maintaining a seamless shopping experience.

7. Mobile Speed with AMP

Mobile page speed is crucial – 53% of visitors leave if a page takes too long to load. Accelerated Mobile Pages (AMP) are a way to improve mobile performance significantly.

AMP Setup Guide

To get the most out of AMP, you’ll need to focus on a few key steps: setting up canonical URLs, limiting JavaScript use, simplifying HTML, and leveraging Google AMP Cache.

Here’s how to set up AMP:

Install a verified AMP app from the Shopify App Store.
Customise your AMP page designs using the app’s editor.
Publish AMP pages with proper canonical URL settings to maintain SEO.
Wait for Google to index your AMP content.

AMP Performance Testing

To measure how well AMP is working for your store, keep an eye on these metrics:

Metric	Target	Impact on Store
Load Time	Under 1 second	20% boost in conversions
Time on Page	35% longer	Higher engagement
Mobile Traffic	10% increase	Greater visibility

For optimal AMP performance:

Check Core Web Vitals specifically for AMP pages.
Test AMP pages on various mobile devices.
Monitor keyword rankings for AMP content.
Ensure your AMP pages pass validation regularly.

"Ensuring that you’re taking measures to increase page speed or reduce lag can be the difference between failure and success".

Real-World Benefits

AMP can bring real improvements to your store:

Visitors could spend twice as much time on your pages.
Website traffic might increase by about 10%.
Sales conversions could rise by 20%.

"Companies that can deliver lightning-fast user experiences will see a first-mover advantage – better Quality Scores, higher ad rank, and more leads and sales", says Ryan Engley, VP of product marketing at Unbounce.

These benefits highlight how AMP can elevate your store’s speed and conversion rates.

Summary

Here’s a quick recap of the seven techniques to improve your Shopify store’s speed and performance. Even a one-second improvement in speed can increase mobile conversions by up to 27%.

Each method plays a role in speeding up load times and enhancing the user experience:

Method	Impact	Key Benefit
Image Optimisation	60% smaller image sizes	Faster page loads, especially on mobile
HTTP Request Reduction	Less strain on servers	Faster server response
Cache Management	Lower server workload	Better experience for returning visitors
CDN Setup	Content delivered globally	Quicker load times for international users
Theme Performance	Cleaner code	Improved site speed overall
Server Response Time	Fewer delays in processing	Faster initial page load
AMP Implementation	Mobile pages load in under a second	Higher mobile conversion rates

Speed matters – 79% of shoppers abandon slow websites. Maria Harutyunyan, cofounder of Loopex Digital, highlights the impact of image optimisation: "One of our clients had a slow-loading site, so we started by optimising the images. We made them smaller and compressed them, which made a huge difference in how fast the pages load. In fact, the images now take up 60% less space and load much faster".

These changes not only improve performance immediately but also set the stage for continued ecommerce growth. With Google holding 92.47% of the search engine market share, meeting their performance standards is crucial for visibility.

"Quick speed hacks will not build the foundation for long-term performance – only real improvements will, and that starts with optimising your underlying theme architecture." – Nirav Sheth, CEO and founder of Anatta

7 Ways to Boost Shopify Store Loading Speed