Usually, we are taught that good things take time, that we shouldn’t be hasty and that we should be patient. And yes, when it comes to many situations in our lives, this would be very good advice to follow.
On the other hand, there are situations where speed and fast delivery are a must. In the e-commerce world, one of the main factors that determine success is fast page speed. Together with SEO and site performance, it pretty much represents a pillar for a successful and pleasant user experience. It goes without saying that if you are into e-commerce, providing ultimate user experience reduces the chance of bounce, less traffic, low(er) user engagement, which all subsequently lead to fewer sales. Your website needs to load quickly, especially nowadays when so many people access websites via their mobile phones. Did you know that the probability of bounce increases to a staggering 123% if your page load lasts 10s compared to 32% if it loads in 3 seconds? Mind-blowing!
That’s why we decided to dedicate this article to different ways to make your Shopify store faster.
Table of contents:
Factors that are out of your reach
Device, Network, and Location of Your Customers
In-built Shopify’s Speed Optimization Tools
Factors That Are Within Our Reach
Reduce the number of Shopify Apps and JavaScript files
Store All Your Tracking Code in One Place: Google Tag Manager
Accelerated Mobile Pages — or AMP
Too Many Redirects and Broken Links
Factors that are out of your reach
Before we dig deeper into the topic, it is worth mentioning that there are certain factors that are just out of your control. You can’t do much about them, but they can still affect the load speed both positively and negatively.
Device, Network, and Location of Your Customers
Since you are doing e-commerce it is implied that visitors to your site/ customers live all around the globe. Why is this important? Well, it means that depending on where they live they most probably have different devices and internet connections. In some areas, the internet connection isn’t strong, which means that the loading time might be much slower than it actually is.
If you get a customer complaining about the speed of your store, make sure that they first check if the problem is at their end: which browser version they use, if they cleared their cache, and how stable their internet is.
In-built Shopify’s Speed Optimization Tools
One of the nice features if you have your store on Shopify is that you get some speed optimization features already included:
- Caches
Your site internal resources are cached up to one year per file. These files could be image files, PDFs, JavaScript files, and CSS files. In less technical language this means that your resources won’t have to be downloaded again on your user’s browser when they want to look at the content again. This definitely speeds things up.
Your store caches, or saves, some elements on your customer’s local storage temporarily. The next time your customer visits your online store, the browser can load resources from the cache instead of sending another request to the server.
Shopify also caches pages on the server. The first a page loads, it might not be as fast, but later page loads become faster because users get a cached copy.
- Content Delivery Network
Content Delivery Network (CDN) enables you to have your site’s content stored on servers around the globe. Shopify uses Fastly CDN that ensures that your store loads quickly globally.
- Liquid Tag
A liquid tag is a connecting link between an HTML file and a Shopify store. It comes with various performance analytics tools, as well as some optional features. Loading this tag and its assets has an impact on your store’s speed.
Factors That Are Within Our Reach
Although it may seem as if we have digressed slightly from our main topic, the above-mentioned things were crucial to know. So, getting back on track, let’s see in more detail what are some of the factors that you can influence and that can make your Shopify store loads faster.
Choose Your Themes Wisely
The truth is that your store loading time primarily depends on ó on the site theme. Before you install a theme it might be good to check:
- If a theme is fast and responsive, i.e. lightweight
- If it is an up-to-date copy
- Use Google PageSpeed Insight app to see the ways you can make your page faster
Themes consist of Liquid, HTML, CSS, and JavaScript code. That means that any editing or customizing can affect your store speed. Make sure to disable theme features you don’t use. According to research , the following themes are the top-performing:
- Create Theme
- Toy Theme
- Warm Theme
- Light Theme
- Outdoors Theme
These are of course just suggestions and you need to see for yourself what might suit your store needs most.
Fonts
You might be wondering how on earth are fonts related to this topic? Well, if you choose a font that your customer isn’t using yet, or better said, that it isn’t yet on their computer, it means that the font needs to be downloaded first. Consequently, that impacts the loading time of your store.
The simplest way would be to use a system font. It is a font that is most common and already installed on most computers. The most common ones are mono, serif, or sans-serif font family. The font style doesn’t matter.
Image Resizing
It is common knowledge that the bigger the image, the slower the loading time. Yet, images are inevitable if we talk about e-commerce. The impact of the visual is unquestionable and for some products, a visual component is really necessary to highlight products’ features. Moreover, images are a great way of improving user experience, but sadly, if not used properly, they come with a (high) price.
The types of images you can download on Shopify are JPEG or JPG, Progressive JPEG, PNG
and GIF. Shopify does provide some safeguards to prevent your store from ‘exploding’ with images; for example, you can’t have more than 50 products on a collection page or 25 sections on your home page. Moreover, some themes delay loading images that aren’t on screen at that moment. Some themes also load a specific size of an image depending on the screen size it’s displayed on. However, these are only safeguards and they alone aren’t enough to protect you from “killing” your store speed with too many big images.
And it’s not the only size that matters- it is the number of images, too. Using too many images on a page can really slow down the process due to the time it takes for all those images to load. In addition to this, unoptimized images should also be avoided at any cost. These images take some time to download causing unnecessary performance problems.
Image Compression
Image compression goes hand in hand with image resizing. You need to compress larger images if you want your page to load faster. The smaller the image size, the faster the loading time. Unoptimized images cause the images to be larger than necessary. You should also pay attention to the quality of an image. Shopify has its own apps you can use to optimize your images, such as Crush.pics or Image Optimizer. The other apps you might find useful are tinypng.com or tinyjpg.com and Optimizilla. Out of these two, the former is free and is used for resizing and the latter is used for manual compression of the images before the upload.
Image compression tool to optimize load speed
Say Goodbye to GIFs
Yes, yes, it is true that GIFs are popular and funny and definitely trendy. We all love GIFs. And although they are great from a UX point of view, they are not great at all if we talk about speed optimization. GIFs are large, really large. Only one GIF already has 2.8 MB. Can you imagine what happens if you incorporate more of them? Replacing GIFs with static images will definitely improve Shopify speed optimization.
To conclude the story about the images: not too many nor too big.. Avoid GIFs and always optimize.
Reduce the number of Shopify Apps and JavaScript files
The majority of Shopify apps add JavaScript files to your store. On itself that isn’t a problem per se. These apps improve the functionality of websites and they improve your site abilities. However, if you aren’t using them, the files do run in the background and affect your site’s performance. You should also bear in mind the size of these files. Too many can slow down your store’s performance.
It is logical to assume that if you don’t use some app, or you just tried and forgot about it, you should delete them. And you’d be right. Still, you might be feeling insecure about which one to remove and if it will have any negative impact on your site’s performance. You should consult with your marketing and development team. Try brainstorming about these questions:
- How often is this feature used?
- Is it really essential?
- Is it worth using it although it diminishes performance?
- Is there an alternative that is lighter?
Once you get the answer to these or similar questions, you will get a much clearer picture of what to do and which features can you safely say goodbye to.
Store All Your Tracking Code in One Place: Google Tag Manager
Google Tag Manager is an all-in-one tool that helps you to store all the tags in one place. Usually, you would add all the separate tracking codes and you would most likely need a developer for that. With Google Tag Manager you don’t even need to edit the code. Another perk of this tool is that the code loaded through Google Tag Manager won’t affect the rendering of your site’s content. You might want to move tracking pixels such as Hotjar, Facebook, and other third-party codes to Google Tag Manager.
Google Pagespeed Insights
We’ve already mentioned Google Pagespeed Insights some lines ago when we talked about the themes. This tool tests the speed. When you enter the site’s name, the tool provides the site’s performance metrics, and in addition, it also provides recommendations to improve your site’s speed.
You would probably need some time to figure everything out because there is too much data, but you will get an insight into the things that work when it comes to speed optimization, as well as into the things that don’t. A great thing is that whenever you make some changes to your website, you can check it here and see if and how it affected speed optimization.
Accelerated Mobile Pages — or AMP
If we go to the very beginning of our article, we mentioned that most people use their mobile phones when they shop online. That is why it is so crucial to have a mobile-friendly page. When we say mobile-friendly, it doesn’t refer only to great user experience but also to the speed at which a page loads.
This leads us to AMP or Accelerated Mobile Pages. It is a framework that helps you create fast-loading web pages on mobile devices. When it comes to Shopify, the AMP pages can be quickly and efficiently created with FireAMP or RocketAmp Apps. These apps allow users to easily create optimized AMP product pages for all products on a store.
Too Many Redirects and Broken Links
Try avoiding unnecessary redirects and try fixing broken links, because both of these definitely create performance and speed issues. Unnecessary redirects cause speed problems because they affect the overall load time. One way to try to manage your redirects is by using Shopify’s function called URL redirect. Broken links are damaging to your site in many ways. Not only do they leave your customers with a bad user experience but they also increase HTTP requests that aren’t necessary. In order to find and fix broken links, you might opt for free tools like Broken Link Checker and Xenu.
Conclusion
Implementing these practical tips should result in higher performance of your site and instant improvement in page loading speed. Moreover, their implementation will provide the ultimate user experience for all your digital channels, and at the end of the day that is what any e-commerce business wants. Most of the time ultimate user experience turns visitors to your site into new customers.