Pratikkumar P. Gaikwad | 10 min read | March 19, 2020

Complete guide on Shopify Performance Optimization

1. Quick read

Shopify is the go-to e-commerce platform because of the ease with which you can open your Shopify store. As you breeze through the process and open your Shopify store, everything looks and works perfectly in the beginning. Your pages load quickly, product pages look astonishing and everything works just fine. But as time passes by and you add more products, applications to enhance the functionality of your store, kt also results in higher loading time and the performance of your store starts dwindling down.
Now, you must be wondering why the performance of the store is so important. Back in 2009, an experiment was performed by Jake Brutlag at Google to see how customers responded to slow loading and overall performance of the website. The results were an eye-opener for everyone. A mere half a second delay contributed to a drop of 0.6% in user engagement. Thus you lose more and more potential customers with each passing second as your website loads. Not only does the number of customers who are willing to buy from you diminish, but also the probability they will return.
Furthermore, search engines take performance and load speed into account when rating them in their organic search results for Shopify website. So, this is yet another reason why a sluggish website gets much less targeted users, and therefore a lower conversion rate compared to faster online stores.
Now that you know why the performance of your Shopify store needs to be optimized, let us look at the ways to optimize the performance of your Shopify store.

2. Perform a comprehensive site health check-up

There are numerous benefits of performing a comprehensive site health check-up. You become aware of the issues that are bogging your site down. There are several tools available to perform a site health check on the market.
Few of them are:
  • Google Page Speed Insights
  • GTMetrix
  • Pingdom
  • Webpage Speed test

Google page speed insights –

Page speed insights tool is google’s brainchild. It allows us to monitor several key elements of the website. The tool provides the performance score for mobile and desktop view. At the very top of the page, you get performance scores. The scores are categorised into three parts
  • 90-100 indicates great performance speed
  • 50-90 indicates moderate speed and scope for improvement
  • 0-50 indicates very slow loading speed
Google PageSpeed gives tips about how your Shopify store can be configured and loaded more quickly. For example, Shopify Javascript can be optimized, images compressed, critical request depth minified, and more. This service typically performs an audit of over 16 parameters and reports on each problematic URL, resource, and feature. It informs you how to manage your mobile store, and provides specific details and suggestions.
Google itself offers advice first hand, which should be taken into account, particularly if you are interested in optimizing the search engine store.

GTMetrix

You just need to enter the website URL to use the GTmetrix, press the Start button and wait a few seconds. After that, you can see the score for Page Speed and YSlow Score (a separate service that analyzes 23 different parameters) and comprehensive feedback with suggestions for page optimization measures for Shopify.
The test results are shown in a table with suggestions, as well as in other related devices.
Thanks to its easy-to-understand interface and the wide variety of parameters evaluated, GTmetrix is useful. The data from the YSlow Score service is also easily integrated with GTmetrix. The service provides detailed information about the load time of each page item being checked (“Waterfall” tab). GTmetrix’s biggest downside is the restricted range of test server areas, which affect the results of the speed tests. To more accurately calculate the results, manually select the closet test server.

Pingdom

Pingdom should summarize the output of your website with these 4 metrics at the top.
  • Performance grade
  • Requests
  • Load time
  • Page size
The most critical of these indicators is loading time!
The rating is a general guide for improving the website, but it is not necessary to have a perfect score.
The number that matters is the speed at which the website loads. When Google visits your site, it doesn’t care or know about the performance score, only about the loading time.

Webpage test

WebPageTest is a service which is safe, simple and useful. To check the speed, you must: enter the website URL Select a region from the list or on the map Select a browser As a result of the check, you will get: the key indicators: Load Time, Time to First Byte, Start Render, First Interactive, Request Number, Completely Load Time.
Page load statistics in diagram format: breakdown by text, by domain, and a page screenshot.
In addition, WebPageTest offers an image processing method that works by compressing the files.
The principal benefit of WebPageTest is its simple and thorough breakdown by speed and queries of test results. As for the disadvantages, guidelines for optimisation are missing.
Fortunately, there are also other resources available to help evaluate and automate a Shopify website, such as Pingdom or Yellow Lab Software. You can select the one that has the interface and collection of services that you want the most.

3. Opt for a lightning-fast theme

You can review this separately in the PageSpeed Insights to find out if your new theme needs any improvements. To do this, run a preview page analysis of the layout, and you’ll see if any changes are needed to your current theme. If the review has detected some performance issues, the first thing you can do is try theme updates from its provider.
Make sure it’s responsive to the device when selecting a theme. At least half of consumers today are browsing and making online transactions from their smartphones and tablets, most of which have different screen sizes. Optimizing Shopify for mobile is important, and making sure your customers have the best experience when visiting your website.

4. Minimize the number of apps you use

Shopify provides you with the ability to completely customize and add functionality to your Shopify store. However, there will be a certain feature and functionalities that will not be readily available in the native platform. This is where Apps come in. Apps let you add extra feature and functionality to your Shopify store.
Most of the store owners will install the apps without proper planning and analysis. If you don’t plan you end up installing apps that you will either rarely use or not use at all. Even if you uninstall or disable apps, JS/CSS files will still be running in the background, using the resources and in turn lowering the performance of your score.
It is crucial to remember that every time you install an app on your Shopify store for an added feature or functionality, your site becomes heavier sending out more requests to the server and increasing the page load time. The best way is to make a list of all the apps you have installed on the store and sort them into three categories:-
  • Apps rarely used
  • Apps used more often
  • Apps used but heavy
Uninstall rarely used apps but be sure to go through all the instructions and support documentation provided by Shopify to make sure you do everything right. For apps that are used more often but are heavy and lowering the performance of your store, optimize them. Reach out to the creators of the app and ask them if they can optimize the app for you.

5. Optimize images

When you analyze the factors slowing down your website or lowering the performance of your store, images are among one of them. Since the quality of screens has improved, the quality of images to be displayed on the store also needs to be improved. However, having a high-quality image also means having a larger file size. These large file size images can significantly lower the performance of your store.
The following image formats can be added to your Shopify store:
  • JPEG or JPG
  • Progressive JPEG
  • PNG
  • GIF
There are three things that can be done to optimize images
  • Compress images
  • Scaling images
  • Implement lazy loading

Compress images

There are two ways of compressing images
  • Lossless compression
  • Lossy compression
Lossless compression can be used to compress images without affecting quality. Compressing each image can be a tedious task. Using applications on the Shopify market or websites like tinypng.com can be useful.

Scaling images

Another way of optimizing images is to serve scale images on the Shopify store. Scaling images implies optimizing the dimension of the images. Image size is dependent on two factors. Quality and dimension. Shopify recommends serving images with the dimension of 2048 x 2048 to ensure images don’t get compromised while using the image zoom feature. But images of such dimension can still have a significant weight attached to it. It is recommended to opt for 800 x 800 dimension unless you want a pixel perfect image.

Implementing lazy loading

Lazy loading images optimizes your Shopify store significantly. Instead of loading all the images at once, lazy loading loads only visible part of the page. Low-quality placeholder images are displayed at first but as you start scrolling down the page high-quality images replaces placeholder once it comes into view.
Note:- You will be needing a developer to implement lazy loading. Be sure to contact us for any technical queries such as lazy loading as we house some of the most prominent Shopify experts.

6. Making use of Google Tag Manager

Google tag manager helps you optimize the speed of your Shopify store. When you install apps or use different marketing or e-commerce tools you are adding lines of code in your file called ‘theme.liquid’. The more code you add into the file the heavier your site becomes and your site loads slower because it has to wait for one code to be executed before starting with another code.
Now what Google Tag Manager does is load specific code for specific products or product collection. For example, if you are using a marketing tool that gives you a line of code, you want that code to run for a specific product like colourful mugs. With Google Tag Manager it becomes easier to load only the specific code for specific products like colourful mugs.
It helps in reducing load time as your site doesn’t have to load all the code at once, instead only the specific code tagged to a specific product.
Note:- To implement Google Tag Manager is technical and requires a developer. If you do not have time or expertise to implement Google Tag Manager you can contact us and we’ll be happy to do it for you.

7. Reducing the HTTP Requests

When we click on the website it reaches out to server to receive various information such as product list, images, payment methods, other contents etc. the larger the information, the larger the number of requests. Hence it is absolutely necessary to optimize your store to reduce the number of HTTP requests.
Caching can help you optimize your store, as ion caching the server does not require to retrieve the information every time a customer visits the page. It improves the loading speed of your site by a huge amount. Apart from caching you should do the following to reduce the number of HTTP requests.
  • Implement CSS image sprites
  • Consolidate and inline all JavaScripts
  • Implement CSS minification and combine them
  • Theme and design to be mobile-friendly
  • Avoid unnecessary social buttons
  • Only install the apps you need

9. Using Hero Layouts

In order to make your Shopify store look attractive, you put in carousels on your homepage. These carousels contain high-quality images which increase the loading time of your site. No doubt it will attract user attention but at what cost, you need to evaluate it for yourself. Make sure that you don’t add more than three images in your carousels if you feel it adds value to your business.
The best practice is to use Hero Layout instead of carousels. So what exactly is a Hero Image or Hero Layout? A hero image or a hero layout is a large banner image with a prominent text on your homepage at the very top because it is meant to attract user attention. Hero layout doesn’t make your site heavy and hence the loading time is significantly better.
Statistics indicate fewer than 1 per cent of customers today are clicking on sliders. Others are either irritated by this feature or at least don’t mind watching every slide. Of course, choosing which option is for you is your decision, and if you decide that you do want to use a slider, just be sure to remember the previous argument.

10. Using AMP Pages

Shopify platform doesn’t provide AMP Pages. But having AMP pages greatly benefit your SEO. AMP is another Google project in which you can significantly increase the speed of page loading on mobile devices. AMP’s basic concept is to display the web pages in a common format that Google predefines to reduce page size and load time.
More than 50 per cent of shoppers purchase from mobile devices, so making sure your website is mobile-ready and easy to load is crucial. Therefore users of AMP (Mobile Accelerated Pages) technology can easily access your website on mobile devices. It is easy to get AMP pages with the help of an application on the Shopify market. RocketAMP and FireAMP are the two most popular apps which you can use to generate AMP pages.
The downside, however, is that once Google has indexed your AMP pages you rely on the apps completely. If you uninstall the apps your pages will start giving 404 errors. Another way is to manually create AMP pages for yourself but it is tedious and also requires technical expertise. Our AMP services can help you achieve this task. Makes sure to give us a call.

For Further Details or Additional Information

OR

If you want to know more about our Services