Shopify Speed Optimization: The only guide you’ll need to read

Shopify store speed has a huge impact on your online business performance. If your page loading speed is slow, you are likely frustrating potential customers and driving them away to your competitors. 

However, speeding up your site isn’t straightforward because it requires a careful balance between performance and quality. There are misconceptions and diminishing returns related to it as well.

In this guide, you’ll read all the do’s and don’ts of how to speed up your Shopify store. 

In this article:

• The five most common issues with Shopify store speed
  
  

• Shopify speed optimization best practices

• Understanding the impact of website speed on your business

• The Shopify ecosystem with regards to speed

• How to speed up your Shopify store step by step? 

• Tools you can use to measure your site speed

Slow mobile speed is one of the most common issues with websites overall.

This is because websites are traditionally built to be desktop-first.

However, this ignores that mobile devices have limited hardware capacities and might access your store differently.

That’s why mobile speed is almost always lower than desktop.

However, store owners need to take immediate action to improve their mobile load speed, as in recent years mobile traffic has surpassed desktop traffic.

Although exact numbers depend on your industry, customers who use mobile devices to make purchases are now a majority in most industries.

Excessive code from apps and third-party software can significantly delay page rendering.

While JavaScript is necessary for enabling advanced functionalities in your store, the code needs to be written in a lean way.

For example, many users rely on installing apps that clutter their store with hundreds of lines of code instead of writing a few lines of code directly in their theme that gets the job done.

Naturally, apps are an easier solution but they come with the drawback of slowing down your store.

Images cause problems when they are:

• Large size

• High-resolution

• The wrong file type

Unoptimized images consume a lot of bandwidth and slow down users every time they interact with your store.

This issue gets progressively worse the more images a store has and leads to a poor customer experience.

Videos can significantly slow down your store, due to their large file size. The impact of unoptimized videos becomes more pronounced as you add more content.

This is a crucial mistake on pages that are meant to load quickly to keep user engagement high.

Services like analytics, chatbots, and marketing tools can increase page load times, particularly if they're not optimized for efficiency.

A key issue is that many of these scripts load synchronously, blocking other page elements from loading quickly, which can degrade user experience.

• Convert Images to JPEG or JPG 

JPEG and JPG file formats are lighter than PNG. If you have a PNG image that doesn’t have a transparent background, you can convert it. You can do this with any conversion software such as Freeconvert and minimal technical skills. Moreover, Shopify has a built-in transformer that makes all the images in WebP format.

• Compress images 

Similar to reducing image sizes through conversion, you can take a step further and use free image compression tools to lower the size of your images while keeping an acceptable quality. We recommend using crush.pics for this. 

• Keep rendered image sizes low - Developer skills needed

Images have an intrinsic and a rendered size. For optimal performance keep the intrinsic size to be between 1.5x and 2x of the rendered image size, depending on the picture and the quality you need. 

For example a picture that is displayed on the site that is 400 pixels in width needs to be rendered at 600 to 800 pixels width so it does not lose quality but is not too heavy.

This is typically achieved by tweaking the code - some technical skill is expected for this.

• Lazy load Images - Developer skills needed

Instead of loading all images when the page is opened, load them as they’re about to enter the viewport. You can also have low-quality placeholder images that are replaced by a higher-quality version as they appear on screen. 

To implement lazy loading, you need to add an attribute to the image tag in your theme code or use a Shopify App to do it. 

• Add a responsive image snippet - Developer skills needed

Instead of having 2 separate images for mobile and desktop you can compile both versions using the <picture> tag and a few lines of code to tell the store which image to load depending on the client’s device. 

• Compress videos

A general rule of thumb is to compress all videos as much as possible without losing the video quality. You can use any free compression tool you want. We’re happy with the freeconvert video compressor. 

Ensure the quality of your video hasn’t gone down dramatically by opening it on full screen after compression.

• Make background videos shorter

Generally, any background video above 10 seconds is too long and will impact your website's speed and performance.

• Remove audio 

If you aren’t using the audio in the video, you can remove it from the file and this will save some size. 

• Lazy load videos - Developer skills needed

You can render videos only once the user needs them. For example once they click on the play button.

• Host your videos on a third-party platform

You can use Vimeo or YouTube to host your videos and this will improve your performance. However, you risk distracting the user with other recommended videos that might play automatically.

• Replace GIFs With Static Images 

Static images load significantly faster than GIFs. For example, if you have a GIF on your homepage banner, it’s likely slowing down your page load speed significantly. Unless motion is crucial, stick to static images.

• Implement tracking strategically

When tracking is concerned, you need to decide exactly what data you want to collect. Many store owners go overboard with adding various tracking apps and scripts that slow down their stores.

• Make a list of all of your tracking software

Make a list of all the scripts that are running on your page when you first open it and use a tool to note down how much each one is slowing your loading speed. Often, there are outdated scripts that you are no longer using but they are still slowing you down.

• Migrate Tracking Codes To Google Tag Manager 

If you are using various analytics and tracking scripts, you can migrate them to Google Tag Manager (GTM) for streamlined loading and increased performance. With GTM you manage all of your scripts centrally without complicating the code on individual pages.

• Load apps after LCP (Largest Contentful Paint) - Developer skills needed

Implement dynamic rendering of 3-rd party scripts to defer their loading until after the main content of the page has been fully loaded and rendered. 

Note that implementing dynamic rendering of scripts requires intimate knowledge of Shopify’s templating language and how scripts and LCP work. It’s advisable to seek professional help for such tasks.

• Conditionally load scripts - Developer skills needed

This technique involves loading scripts only when they are needed, rather than loading them on every page of your Shopify store. By doing so, you minimize the amount of code that needs to be processed and downloaded by the browser, leading to faster page load times. 

However, implementing conditional loading for scripts requires a sophisticated understanding of how scripts work and at least some basic coding knowledge of Shopify’s templating language - Liquid.

• Choose A Lightweight Shopify Theme 

Select a Shopify Theme that’s optimized for speed directly from the Shopify Theme Store. Some quick themes you can consider are Booster, Plak, or Loft. 

• Limit the use of Shopify Apps 

Audit the apps and third-party software you are using from your Shopify dashboard and see if there are any that you don’t actively use. We find disabling unused apps to often save a lot of loading speed.

• Minify your JS and CSS code - Developer skills needed

Minifying your JS and CSS code involves removing all unnecessary characters from the code without changing its functionality. The entire code gets compressed into a dense wall of text. 

To implement minifying you need to work directly with your store’s files and use a third-party software, app, or a specific library. This makes for smaller file sizes which means faster downloads, reduced bandwidth usage, and quicker execution of all commands.

• Preload pages when hovering over the link - Developer skills needed

Anticipate which page your users are most likely to open based on their hover action. When you use preloading based on link hovers, it pre-fetches the content and greatly reduces loading times. Employing this requires some coding but it is relatively straightforward. 

• Audit and Optimize Liquid Code 

Ensure your theme’s code is adhering to Shopify’s guidelines and best practices. This step is especially relevant to merchants that have added custom functionalities to their stores. 

This includes:

1. Lazy loading videos using JavaScript by inserting them only on click.
   
   

2. Keeping the amount of fetches to the server at minimum.
   
   

3. Moving excess code like CSS classes to snippets and reusing them.
   
   

4. Moving scripts to functions that can be reused.
   
   

5. Keeping nested loops with Liquid and JS to a maximum of 2-3 or avoiding them altogether. 
   
   

6. Avoiding adding the same loop multiple times on the same script or page but reuse it instead.
   
   

7. Making sure to load scripts only for the section that they are being used.
   
   

8. Keeping the CSS Class/ID naming simple and short.
   
   

9. Hosting JS libraries on CDN (this can cause issues if the CDN goes down)
   
   

10. Using Web Components whenever possible for performance.
    
    

• Miscellaneous tips
  

1. Load fonts from the Shopify Admin Assets, as custom fonts require more resources to render.
   

2. Make your scripts into files and use defer or async for them.
   

For optimal performance, you can check out Shopify’s Theme Inspector Tool. 

It evaluates your Shopify server performance and the speed with which your code executes.

To get access to the tool you need to be logged into your store and download the chrome extension. 

• Increased Conversions
  
  Customers complete their purchases quicker and have a seamless experience doing so. 
  

• Better User Experience
  
  Modern shoppers want your products to be immediately available on every device they use.
  
  When your store responds to their actions without delay, they are more likely to engage and buy from it. 
  
  

• Better SEO Visibility
  
  Faster page loading speed makes it easier for search engines like Google to understand what your content is about.
  
  As a result, they place your content higher in the search results, which drives traffic to your store.

Many experts opt to trick PageSpeed Insights by sending a modified version of your store to it or even an image of it.

This helps you pass the PageSpeed Insights but does nothing for the actual speed of your store or your user experience.

In essence, you lie to Google that your site is okay through malpractice.

While this can win you search rankings in the short term it’s likely to end up in a penalty from Google and a complete crash of your rankings.

When working with the Shopify platform in particular, there are a few caveats to keep in mind. First, there are multiple factors under your control that directly affect your loading speed. These include:

• Apps
  
  Each app adds more code-based functionalities that need to be read every time a page loads. Auditing your list of apps and removing unnecessary ones is always a best practice for speeding up your store.

• Themes
  
  Shopify’s themes vary significantly in the number of functionalities they have built in. This can lead to bloated code and slower performance.

Opt for lighter themes that are optimized for speed and mobile responsiveness instead.

If you need to introduce a specific functionality later, you can work with a developer to write it efficiently directly in your theme’s code.

• Complex or inefficient Liquid and JavaScript code Think strategically and include only the functionalities that will have a significant impact on your business performance.
  
  If you use efficient coding practices and limit the amount of code itself, your store’s speed will improve.
  
  

• Images and Videos
  
  While videos and high-quality images help you showcase your products better, they can drastically slow down your site if not optimized.
  
  Ensure you use compression tools to reduce file sizes without sacrificing quality.
  
  

• Fonts
  
  Custom fonts add personality to your store but when you use too many of them, especially if they aren’t web-optimized, your store speed will suffer.
  
  Consider using system fonts as a fallback to improve load times.
  
  

However, the Shopify platform also has built-in limitations when it comes to speed. These include:

• Shopify’s infrastructure
  
  As a service provider, Shopify provides you with built-in solutions to optimize your store speed.
  
  These include using a CDN, Local Browser and Server-side page caching, and other development assets.

• Enterprises can leverage Shopify’s platform and combine it with best-in-breed technologies to future-proof their store.
  
  This is known as headless development.
  

While Shopify’s built-in solutions work well for most stores, larger retailers might find these limiting and will require sophisticated workarounds to improve their performance.

One of the popular enterprise solutions is to build a headless store.

A headless build can significantly improve your store performance and give you the freedom to leverage any technology you want to achieve total creative freedom.

However, it is significantly more complicated and expensive to create.

Start by assessing your current website speed using tools like Google PageSpeed Insights, Pingdom, or Speedboostr.

These tools give you a baseline, provide valuable insights, and offer specific recommendations for improvement of your load speed.

Make a table with all of your pages and their loading speeds.

Then make a table for each page and note down all assets that slow down its loading speed, including all videos, images, third-party scripts, etc.

Note down the individual impact of each one on your loading speed.

This helps you identify unnecessary or heavy scripts and apps that could be slowing down your site.

Comprehensively auditing your store will likely leave you with an unnervingly long to-do list.

Thus, it’s important to prioritize assets depending on the impact they will have and how easy it would be to optimize each.

Start by focusing on your highest-traffic pages.

Likely, this will be your homepage, followed by collections and the product pages of your best-selling products.

Then, pick assets that are quick and easy to optimize but have a disproportionately big impact. This usually includes images, GIFs, and videos.

Afterwards, you can prioritize optimizing third-party apps and scripts and only after that move to the more technical optimizations that require you to edit your Liquid code directly or require help from a developer.

Keep in mind that editing your code is more difficult but still isn’t enough if you neglect more basic high-impact optimizations.

Even if you lack coding expertise, there are many things you can do to optimize your site’s speed performance.

Start by reducing the sizes of your images and videos and further compressing them, although this is usually a task for the developers. 

Use GIFs sparingly or better yet, replace them with static images.

Furthermore, you can manually remove scripts and apps that you aren’t using or choose a more lightweight theme. 

Once you’ve covered the basics, you can start considering more advanced techniques that involve editing your store’s code directly. 

This includes:

• Minifying JavaScript and CSS files

• Lazy loading images

• Conditionally loading scripts

• Manually editing your theme’s code. 

If you’ve implemented the above steps or are having trouble doing so, consider reaching out to a professional Shopify agency.

craftberry specializes in custom Shopify site development and Shopify speed optimizations in particular.

There are many tools that you can use to see your store’s speed. Our top picks are:

•  Google’s PageSpeed Insights - although it’s not specifically made for e-commerce sites, it’s one of the most popular and reliable speed-testing solutions online. 

It provides a core web vitals assessment which helps you rank better on Google when passed.

Moreover, it offers a comprehensive audit of all the third-party scripts that load on your site.

When it comes to scoring, Shopify stores usually have a tough time. It’s good to realistically aim for

• 50/100 score on mobile

• 90/100 on desktop

• Core web vitals should be passed on both mobile and desktop.

• Speedboostr lets you cross-check your site’s performance.
  
  It’s a dedicated e-commerce speed tester that understands Shopify’s structure and allows for more accurate assessments and targeted optimizations.

It’s great for showing you which assets are overweight and provides you with actionable insights and easy-to-understand reports.

However, it doesn’t support video assets. 

For scoring, anything under 50 is bad and everything over 80 (B) is really good and you should aim for it.

• Pingdom is great for offering you more technical insights about the quality of your code and it helps you prioritize performance blockers based on severity.
  
  Pingdom will give you insights about the JavaScript and Liquid code on your site. 

Optimizing your Shopify store for speed can involve dozens of tasks with varying complexity.

Understanding which tasks will have the biggest impact and prioritizing them is essential.

Moreover, ensuring that you have the right skill set when it comes to Shopify development is instrumental for making your Shopify store faster.