How to optimize the loading speed of the Shopify Store

Shopify Development
loading speed of the Shopify Store

Learn all about loading speed + analysis and rating tools on Shopify

Our team has optimized over 100 Shopify stores and is constantly researching and posting information and case studies on Shopify optimization.

This article provides you with the following:

  • An overview and understanding of performance (load speed) related to Shopify sites.
  • An explanation of standard performance tools and how to use them
  • Links to additional resources for further discussion

DIVISIONS

  • What is loading speed, and what affects it?
  • Tools to measure Shopify store performance
  • Shopify Site Optimization Tips and Warnings
  • Our tips for optimizing Shopify performance

WHAT IS CHARGING SPEED, AND WHAT AFFECTS IT?

Modern websites are complex mixes of files, images and scripts from source Persians to produce what you see in the browser.

Load speed is the time it takes for a web page to load these resources from the hosted servers.

The main factors that affect the loading speed are:

  • The weight of the page
  • The number of loaded resources
  • Where these resources are loaded (on your server or third-party servers like apps)
  • The speed and current load of the server where these resources are loaded
  • Location of the user relative to the location of the servers that host the content.
  • User internet connection speed

The simple explanation for improving loading speed : Reduce page weight, load fewer files, reduce reliance on third-party resources.

Loading speed and Shopify

For Shopify stores, 3 main factors affect loading speed:

  • Images
  • Theme code
  • apps

Images are heavy and need to be compressed when serving on the webpage. You can install a Shopify image optimization app like Crush Pics or manually compress images that apps can’t reach using a tool like TinyPNG.com.

Lazy-loading is a technique that loads images only when the user scrolls down the page. It is an essential optimization technique to prevent heavy images from loading all at once during page load. 

You should also ensure that you upload images of appropriate size for the user’s device. For example, if you post a 4000px wide image while the user accessing your store is using a 420px wide mobile phone, you are loading extra weight of the file for no reason. To control image size per device, use the srcset HTML attribute.

The theme code is accessible from your theme editor.

There are several optimization techniques you can apply to your theme, for example, using preloading tactics, lazy-loading images and videos, delaying videos, so they only load when the user clicks “play”, the reduction of CSS and JavaScript, the conditional loading of applications and scripts only on the pages that need them (instead of each page).

To check your Shopify site for a common theme and image optimization issues, run it through the website analyzer.

Generally, there isn’t a big difference in loading speed between two separate themes unless your theme is bloated with excess wasted code or old application code is no longer in use. We, therefore, advise you to change the theme when you are ready for a new design. Otherwise, we will start by optimizing your current themes and applications (unless you have a large budget and want to create a custom theme from scratch).

Contact us if you are looking for a new theme and want to know our recommendations.

One thing that most Shopify themes don’t do well is separate stylesheets and scripts, so they only load on the templates they need. It is why you see the Minimize new JavaScript/CSS warning in Google PSI on most Shopify sites.

Most themes load one big CSS file and one big JS file for design and functionality. It was OK to load a single large file in the past, but with modern browsers, this is unnecessary and can be slower.

Our recommendation for Shopify theme developers: Create a global CSS and JS file for common styles and features. Then create a CSS and JS file for each main template (Home, Product, Collection, Article, etc.) and only load this file when the user is on this page template.

Apps are third-party plugins that run code on the front of your store.

Apps, generally, don’t contribute much to perceived loading speed because if coded well, they’ll load after the site’s content has loaded (assuming the app isn’t needed to render the content to the above the fold), but you’ll often see yourself deducted points in general analysis tools for using them.

We do not recommend removing apps for the sole purpose of improving a score with any tool. E-commerce sites rely on attractive store features to increase sales. In the case of e-commerce sites, creating the best customer experience is more important than getting the highest score on a performance tool.

TOOLS TO MEASURE SHOPIFY STORE PERFORMANCE

We mainly use 2 tools to measure and optimize Shopify stores: WebPageTest.org to measure page load speed, page weight, and the number of server requests, and a website analyzer like GTmetrix.com to identify webpage issues. Optimization that can and should be fixed.

Here is a list of the most well-known tools with their pros and cons.

Google PageSpeed ​​Insights / Google Lighthouse

Summary: Google PageSpeed ​​Insights (aka Google PSI) uses the Lighthouse engine for performance analysis. It’s a popular tool because it’s Google. It is a good analytics tool for websites or apps to help identify ideas for optimization but keep in mind that most engaging e-commerce sites score low according to their measurements (including Amazon).

Advantages:

  • Lots of data points to analyze
  • Detailed documentation on optimization warnings + how to fix them

Disadvantages:

  • Clearing some warnings results in a poorer user experience and noticeably slower loading time.
  • The rating system is inconsistent, and the score does not correlate with actual loading speed (making a site faster can lower the score).
  • It is unsuitable for e-commerce sites, which can lead store owners to make bad decisions, like removing features just to increase their score.
  • Lab data and estimated savings are not accurate and may be misleading.

How to use it:

This tool is ideal for optimizing your code for web applications and websites where you have complete control of the code and loaded resources. For stores on e-commerce platforms like Shopify, this isn’t a good measure of site health. Still, you can use it to identify app bottlenecks and slow-loading resources. It is beneficial for identifying loading resources that you no longer use (old application code).

Shopify Speed ​​Score

Summary: This tool appears in the themes section of Shopify. It uses the same engine as Google PSI, and the same information applies.

Advantages:

  • Measurement tracking over time
  • Comparison with other Shopify stores
  • Easily accessible in your Shopify dashboard

Disadvantages:

  • Uses the same scoring engine/system as Google PSI which penalizes attractive e-commerce features.
  • It causes frustration for Shopify store owners, who think they need to score 100 (which is impossible).
  • Lack of a warning that the score is not equal to the speed and that you should not delete apps to get a better score.

How to use it:

In its current state, this tool only extracts data from Google PSI. So we don’t have a specific recommendation yet, but we think the idea of ​​showing performance metrics and tracking over time is good and that this tool has potential.

WebPageTest

Summary: This is the best tool we’ve come across for measuring loading speed. We use it for benchmarking (before/after optimization) and to compare page weight, loaded resources, and loading speed.

Advantages:

  • Great tool for measuring actual loading speed and differences resulting from changes to your site.
  • Displays a cascading list of each server request + request details.
  • An excellent indicator of loading speed on mobile devices

Disadvantages:

  • The scoring system could be improved (we like stat reports, but scorecards aren’t very helpful).

How to use it:

Use WebPageTest to measure your store’s performance before and after optimization work or the installation of new apps to see how your loading speed is affected. You can also use the waterfall view to identify anomalies and understand how each server request affects your site.

Pingdom

Summary: Pingdom provides a general and detailed overview of how different resources affect your site speed.

Advantages:

  • Easy-to-read breakdown of page content by type, domain, and size.
  • Beautiful graphics and user-friendly waterfall view
  • Good charging speed estimate for desktop users with a fast wifi connection.

Disadvantages:

  • Loading speed is not consistent from run to run (not good for benchmarking)
  • Optimization warnings do not provide actionable recommendations.

How to use it:

Pingdom is an excellent tool for getting an overview of the apps and resources contributing to your page weight and the number of requests. It also offers an excellent waterfall view to analyze how each resource affects your page speed.

TIPS AND TRICKS FOR OPTIMIZING SHOPLIFTING WEBSITES

Whether you’re doing in-house optimization, working with us, or with another Shopify optimization agency, it’s good to know these data-driven facts before you start an optimization project.

Google PSI / Google Lighthouse

We don’t use this tool in Shopify optimization projects, but we understand that it is well known and people want to get good results from this tool, but there are a few key points to be wary of:

  • This is a general tool, not designed specifically for e-commerce sites where KPIs are sales-based (conversion rates, revenue) and storefront features are commonly used.
  • The score can change from round to round within the same day without changing your website.
  • Removing warnings does not always increase the score.
  • Fixing some warnings may have a negative effect (slower perceived or actual loading time, degraded user experience, lower conversion rate).
  • Google PSI score does not equal speed
  • Not all warnings can be fixed on a Shopify site.
  • Most e-commerce sites score low with this tool (even Amazon).
  • See additional resources under Google PSI in the Tools section above for case studies that confirm these points.

Shopify Speed ​​Score

  • Shopify imports results from Google PSI / Google Lighthouse, a general performance analysis tool unsuitable for e-commerce sites.
  • Speeding up your site speed does not imply improving your Shopify Speed ​​Score, as the Google PSI score is unpredictable and does not correspond to actual loading speed.
  • After tracking and analyzing the data, we’ve found that a good balance between speed and functionality for Shopify sites with great features is a score between 20 and 35.
  • Don’t panic and think you’re doing something wrong if you don’t get an “A”. It’s rare to get a high score with this tool, mainly if you use third-party apps.

OUR TIPS FOR OPTIMIZING THE PERFORMANCE OF A SHOPIFY STORE

We focus on what’s best for eCommerce stores. So we won’t tell you to try for the fastest site on the web or recommend services that increase scores in Google PSI without improving actual loading speed. Instead, we advise you to optimize your site as much as possible without sacrificing functionality.

In our opinion (after optimizing 100+ Shopify sites, doing case studies, and having many internal discussions), the top 3 tools for optimizing Shopify sites are:

1. WebPageTest.org to measure actual speed, page weight, and requests before and after making changes to your site.

2. GTmetrix.com for a quick overview of key optimization points and a rating system tailored to Shopify sites.

3. A human reviewing your code to make sure you don’t have old application code or unnecessary scripts being loaded, or edge cases where hundreds or thousands of extra resources are loaded

If you would like a free analysis of your Shopify site, contact us at Arham Technosoft.

Final tip from our team: Focus on improving loading speed and providing the best possible experience for your customers.