It is a truth universally acknowledged that customers do not like to be kept waiting, and the world of e-commerce is no exception. As more stores than ever take to the digital high street, every second counts in giving your customers a high-quality retail experience. Faster websites mean lower bounce rates, more page views, and longer shopping sessions, all of which adds up to more sales, better SEO and even increased ad revenue. If you are one of the 1.75 million people currently using Shopify to run their online store then read on for the simple steps that will keep your website in the fast lane. Remember, before you make any changes to your store it’s always worth making a back-up. Simply click the “actions” button next to the theme you want to back up and select “duplicate”.
1. Optimise your images
Making your website image rich is an easy way to get the wow factor, but all that extra loading time could be slowing you down. Fortunately there are a multitude of free image optimisation services out there which means you don’t have to choose between visual impact and performance. We like TinyPNG, but there are plenty of options to choose from; simply upload your files and hit compress to reduce the size whilst maintaining the quality. Of course, there is a limit to how low you can go but in general, we recommend aiming for 150kb for your largest most important images, and 100kb or less for everything else.
Want to make your images even more performant? Consider “lazy loading” everything that isn’t immediately visible to your customers. This neat little trick simply means that your images don’t load until they’re actually about to be seen, meaning your customers get all the benefits of a faster shopping experience without you needing to compromise on the aesthetics.
2. Load what you need, when you need it
Imagine ordering a 3-course meal and then finding out that you had to wait for all 3 courses to be prepared before you could be served your starter. Wouldn’t it be better if you could eat your starter as soon as it was ready while the chef finishes the rest off behind the scenes? This is the basic idea behind what is often referred to as “inlining critical CSS”. By default your browser needs to download, read, and apply all the styling for your website before it can start building the rest of your page, but how much styling do you actually need up front? When a customer visits your website the first thing they see without needing to scroll down is the highest visual priority – this is the “critical” styling. “Inlining” this styling and deferring your non-critical styling simply means telling the browser to serve customers their visual starter even if it hasn’t finished processing their main course yet. Don’t worry, the whole process is so fast that the remaining styling will have been applied long before the customer starts to scroll on down the page.
3. Have a “less is more” mindset
The Shopify app store is like a sweet shop for merchants, with everything from analytics to upselling ready to install at a single click. It offers almost unlimited opportunities to customise your store with no tech skills required, and with more than 7000 apps to choose from it’s no surprise that the average store has 6 installed1. Whilst apps can extend store functionality or offer convenient, cost-effective solutions to common problems, overusing them is not without its risks. Not only can apps put a huge strain on your store’s loading time, they often do so in a way that is beyond your control. If you have an app that is loading in unoptimised content – huge images, bulky styling, outdated code – there is almost nothing you can do to mitigate it. Even the slimmest and most efficient apps on the market will eventually drag your page speed down if you have too many of them. Add in the vast number of widgets available to embed and your site will soon be feeling the strain of all that extra code.
4. Minify your code
Whilst writing code developers often add line breaks/spaces and leave comments explaining how things work. This is important for making the code readable to other developers, but all this extra formatting can increase the file size and slow down your browser’s processing time. Minification is the process of stripping out all those extra bits so that your code only contains the data it actually needs. Minifying the code needed for your website’s styling and logic is a common step for developers to take, but there are many resources available online to help store owners achieve this themselves. Tools like the Toptal CSS minifier lets you simply paste in your code and generate the minified output, and there’s one for your javascript as well.
5. Upgrade to Shopify 2.0
One of the quickest wins you can get in terms of making your store as light and fast as possible is to work from a theme that is fast and light from the start. Like renovating a house built on poor foundations, if your theme is sluggish and outdated then all the optimisation efforts in the world will only take you so far. Shopify 2.0 boasts an impressive selection of benefits for merchants, but chief amongst them may be that their new default theme “Dawn” is around 35% faster than the previous version “Debut”2. If you are just starting out with Shopify then this theme is a great choice, either as an “out of the box” store or as a base for further customisation. If you downloaded your theme before June 2021 then don’t worry, you can still take advantage of the upgraded new features by either downloading the latest version of your theme from the theme store and transferring your content across, or (if you are using a theme from outside the theme store or have a theme that was custom built for you) then your existing theme can be migrated instead. If you’re feeling confident there are plenty of tutorials online for how to do this, but if this is your first time editing code it’s probably worth hiring a Shopify developer to do it for you.
