Over the years, I been involved in both building tens of Shopify sites and improving their websites speed greatly. We even had a service (no longer available) for offering speed optimization services.
In this guide, we would like to share the best tips which include both common tips and also advanced tips nobody online talks about. The video at the bottom of this article will provide a screenshare, visual look and even more details then the list below. Check it out!
Note: Speed optimization best benefit is in user experience. Many believe it's great for SEO but the majority of benefit is in better user experience.
Test and Identify Issues
The first thing you need to do is test your speed and identify the points you want to improve. It is very important to not only test your homepage but also your main pages.
To start with, you should always test your homepage, collection page, product page and a content page (at minimum).
In your tests, aside from the speed in seconds and google pagespeed scores, you want to look at:
- Poor performing assets and scripts
- External domains that load content on your site
- Suggestions from the tool
- Load timing and weight
We suggest to use the following tools:
- Google PageSpeed Insights (aka Lighthouse) - (OR) simple version via Shopify Web Performance Speed Report - (Analytics > Reports. Click Web Performance)
- Google Chrome Inspect Tools - Network Header Tab - right click on your page, select "inspect" and go to header tab
Optimize Themes & Features
When you customize your themes in the Shopify backend, (Sales Channels -> Online Store -> Themes -> Customize) you should look and adjust settings for the theme as well as per page for following:
- Remove elements and features you don't need (for example scroll to top button, cart drawers)
- Reduce elements on page (for example limit up to 3 banners on top of homepage instead of 7, remove the instagram feed on the bottom of your homepage)
- Replace your banners on checkout or collection pages with a smaller sized image
Make sure to check settings for the theme and also visit page by page template to see specific features.
Optimize Apps
Even though apps are not made by you or your partners, you can still optimize them and improve your page speed. First use the testing tools above and note 3rd party scripts and assets that load very slowly.
- Pinpoint poor performing apps and app features - consider changing settings in the app backend or removing features
- Find scripts and assets that load that are from old apps that you no longer have and manually remove them.
- Consider finding a better app to replace the slow one
- Contact app developer and tell them about slow code or loading (you will be surprised that some of them can fix the issue quickly)
Image Compression
This is a classic. Make sure to optimize your images before you upload them on your site for both your pages (homepage for example) and your product catalog.
- Imageoptim (for mac users)
- Compressor.io (web tool for all users)
Consider lossless compression for best results (but test lossy vs lossless quality differences)
Lazy Load
Make sure to tell the browser to load assets only when you scroll to that area (aka lazy load). You can lazyload both images and videos.
All you have to do is add loading="lazy" in your <img> and <iframe> tags. Iframe tags is the used for youtube embeds
Make sure to only lazyload elements that need to be scrolled to see them (aka below the fold)
404s
Sometimes you have an issue in the code that is loading an element that does not exist anymore. Check chrome browser inspect tools to find it and remove from code.
Fonts
There are 2 main ways to optimize your fonts for load speed:
- Either use a default font, replace with a smaller size font or use less styles
- Use display="swap" in your font loading to remove blocking of loading of your text.
Advanced Tips
- Features running in non relevant pages - sometimes a feature in your theme or app is relevant only to a specific page but loads in all pages. Make sure to load only on the needed pages.
- Preload assets - Make sure that the most important above the fold asset is loaded early.
- Order of scripts - The placement of your script matters for loading speed.
- Load scripts upon actions only - Especially for heavy scripts, you should consider loading only when needed. For example - at the bottom of your homepage, your youtube video can load the embed only when you scroll down. Or the live chat can load only when you click on the icon.
- Not only page load speed but also actions - make sure that you monitor and optimize add to carts, forms filled out and actions as well.
- Continuously test and optimize - over time your website will have new apps and services and will get slower and slower. Make sure to monitor and continuously optimize.
