Shopify Page Load Speed: 10 tips to increase web performance
Are you looking to increase the conversion rate on your Shopify site?
Do you want to increase your Shopify page load speed?
Do you want an SEO boost by improving the page speed?
We will go through 10 performance improvements that you can make today to your Shopify store.
These improvements are:
Before we talk about improvements we must talk about monitoring.
Monitor
The worst thing you can do is to start making changes without tracking the site performance.
I would recommend that you focus your efforts on a few key pages.
For a Shopify store, I would suggest starting with three pages:
- Homepage
- Product list page
- Product details page
Once you have chosen a page for each of these we need to set up daily monitoring.
I wrote a recent article demonstrating how you can benchmark websites. The article shows you how you can use a Google Sheet to track the performance of your sites every day.
It uses the Google PageSpeed Insights API and will track the Lighthouse performance.
Once you have set this up you can start to make incremental changes. Watching the performance improve.
Next, let’s discuss mobile.
Mobile
I would suggest that you only track mobile performance.
There are two reasons for this.
- Mobile web traffic is increasing and this trend shows no sign of slowing down.
- These devices tend to have slower network connections.
The slow connection the slower your store will load.
If you can get your pages to load quickly on a mobile device then it will also be fast on desktop.
Adopt a mobile-first mindset and desktop will also benefit from the improvements.
The Google sheet that I mentioned above is already setup to track your mobile sites.
Now, let’s look at improving your Shopify theme.
Theme
Themes can be the difference between a fast site and a slow one.
The theme is the number one factor for making your site fast on Shopify.
If you are using a poorly built theme no amount of optimization is going to help.
These are my recommended themes for Shopify, built with speed in mind.
If you are looking for a free option then the best theme for site speed is Brooklyn.
I benchmarked the performance of each of the demo sites using a Lighthouse audit in Chrome, here are the results:
- Fastest - 62
- Shella - 59
- Brooklyn - 47
So you can see the paid for themes are faster.
Once you have installed a fast theme, make sure to keep it up-to-date. Often developers will release speed improvements so it's wise to upgrade.
Apps
The Shopify app store is fantastic.
If you need something for your store, chances are there is an app that will help.
Need live chat? There is an app for that.
Need to publish your products on social media? They have an app for that too.
Be warned!
These apps often will slow down your site.
They often inject Javascript or CSS into your page, if this is not optimized it will make your site slower.
Make sure to measure your site performance before and after you install an app to your site.
If you find that the app has slowed your site down, remove it and try another.
Liquid
Liquid is the server template language that runs behind the scenes on your Shopify store.
{% if user.name == 'elvis' %}
Hey Elvis
{% endif %}When you access a page, the Liquid code will run on the Shopify server and create the HTML file.
Shopify will then cache the HTML file to make it faster a second time.
This means that the first time you access the site the page will be slow.
The second time it loads the cached version of the page which is much faster.
To measure whether the liquid code is slow, we need to measure the page before the caching happens.
To do this we can then use Google Chrome Developer tools and look at the Time To First Byte (TTFB).
- Open Chrome, right-click on the background and choose “Inspect”.
- This will open Developer Tools.
- Then click on the “Network” tab.
- In your Shopify dashboard, make a change to your
theme.liquidfile such as adding a comment:
{% comment %}version 1.0{% endcomment %}- Then switch back to the tab with Developer Tools and visit your Shopify store.
- Click on the HTML file and view the “Timings” tab. Here you will see the TTFB time.
- If you then refresh the page again you will see that the TTFB is much smaller the second time.
If you notice that the first TTFB is slower than 1.3 seconds, then you should work on optimizing the Liquid code.
Some common improvements to look out for:
- The code is pulling a lot of data but only displaying a small amount
- There are many loops in the code to list out categories or products
- Is there is text-based searching
If you have any of the above in your liquid code then you should work on optimizing it.
Image Optimization
The number one optimization to focus on is your images.
You need to make sure you use image compression so the image file is small but without losing quality.
An excellent tool for image compression is Squoosh.
This tool allows you to upload an image and see a before and after of the image.
When choosing the correct compression here are my recommendations:
- If the image is a photo and has no transparency then use a compressed JPEG
- If the image is a logo or graphic then use an SVG
- If the image is a photo and there is transparency then optimize with PNG but also have a WEBP image
Lazy load Images
Another technique for improving page load speed is to use Lazy Loading.
When you visit a site the browser will download all the images on the page, even the ones that are not visible to the user.
Lazy loading means that the image is only loaded when the image becomes visible to the user.
This can speed up the initial page load.
The simplest way to implement this is to use the new loading attribute on an img tag.
<img src="cat.jpg" loading="lazy" alt="Awesome Cat!">This is a very new attribute which in 2019 is only supported by Chrome.
There are also paid services that will optimize the images and lazy load them for you. One such service is from SpeedBoostr.
Javascript
With Javascript optimization, we need to minify all scripts that get loaded by the page.
The reason we minify the files is to make them smaller and quicker to download over the internet.
Use Chrome Developer Tools to check for minified scripts.
Click on the “Network” tab and then filter by “JS”.
This will show the scripts, click on them one-by-one and look at the response tab.
If the scripts have comments, new lines and spaces then the file is not minified.
To minify the script you can use an online tool such as UglifyJS.
Once you have a minified file you can add it back to Shopify.
I recommend that you do not overwrite the original file. Instead, add a “.min.js” extension and then reference this in the liquid code.
Do not lose the original file. It is impossible to make changes to the minified version. So make sure to add both files to Shopify even if you only use the “.min.js” version.
CSS
We can also minify your CSS.
Using the same method we can look at the “Network” tab in Chrome Developer Tools.
This time we will filter using “CSS”.
We can look through each one and see if there are comments and new-lines.
If there are, we can use a tool like CSSNano to remove these characters and minify the CSS file.
Once we have the minified file, add it back to the Shopify store.
Like we did with the Javascript, make sure to save with a “.min.css” file extension.
Fonts
Fonts can block the loading of your page.
If the font has not downloaded in time then the page will wait until the font is ready before showing the text.
We can change this by using the font-display CSS rule.
Here we are telling the browser to render the text, even if we do not have the Font file.
Once the font file has downloaded we can swap it over.
The fastest way to do this is by using a Google Font.
Using this link tag we can
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">This will load the font from Google and swap the font once it has downloaded.
Shopify Page Load Speed, Final Thoughts
We have looked at 10 actionable improvements that you can start making to your Shopify page.
Make sure to measure the improvements as you go and don’t change too much at once. This will make it difficult to know what is working.
Choose a theme built with performance in mind.
Then look at working through the improvements.
If you can’t change the theme then you can still gain small improvements by following these tasks.