Brendan Tully0 Comments
May 30, 2022
Years ago we published a blog post about Fixing Slow Wordpress Sites and Optimizing WordPress Site Speed and ultimately created a whole business out of it specializing in WP Site Speed Optimization. Today we’ve now optimized well over 3000 sites at WPSpeedFix.com.
We regularly get asked about Shopify Site Speed, Fixing Slow Shopify Sites and Optimizing Shopify Site Speed so thought it was time we created a post on it. While WordPress and Shopify are very different, the same site speed optimization principles apply and the approach we use for optimizing WordPress and can applied to achieve similar results with Shopify.
In this article, we’re going to talk about optimizing Shopify websites for speed, breaking down some key principles, share our speed optimization process and give you some of the advanced site speed optimizations we’ve developed that apply across all sites, regardless of which CMS you use – many of which you won’t find anywhere else on the web.
Sidenote: while we still only do WordPress speed work, the team at www.SpeedBoostr.com specialize in Shopify speed. If you’re just looking for someone to take care of your Shopify speed work, head over to their site and drop them a line about your site speed.
Contents
Before doing anything its probably wise to do some speed testing and get a baseline measure of your site speed as it stands today. There’s many tools out there that’ll measure site speed, these are the few that we use on an ongoing basis.
SiteSpeedBot.com
There are several good speed testing tools that you can find online, but we weren’t entirely happy with them, which is why we decided to build our own. You can check out our own speed testing tool here: SiteSpeedBot.com. We built this tool to probe for the most important site speed optimization elements that other tools don’t – optimizations like HTTP2 protocol support, HTTP2 push support, lazy loading and nextgen image optimization. The tool was also designed to give you practical and detailed recommendations that are easy to understand and implement. We also keep a 12 month history of any speed tests you run which you can access at https://app.wpspeedfix.com/domain/YOURDOMAIN.com (switch out your domain), for example https://app.wpspeedfix.com/domain/treetribe.com
Google Pagespeed Insights
Google Pagespeed Insights is another speed testing tool that you can use for your Shopify site but please keep in mind that Pagespeed Insights focuses more on the site render speed and heavily marks down sites that rely heavily on Javascript (as most Shopify sites do). **ALSO, you’ll probably see a much lower mobile score vs desktop score – this is because the mobile test is emulating a CPU limited mobile device on a very slow 1.6mb/second internet connection.
Pagespeed is still a useful tool, though it’s important to keep in mind that it only partially measures speed. A large chunk of its score comes from comparing your site against a technical checklist which in many cases doesn’t take into account the practical limitations of the site’s code and design. Also, its speed test component completely ignores the geographic location of the site’s hosting, which means scores can vary wildly depending on the location where they’re being tested, where your hosting is geographically located and how busy the internet is at the time of testing.
Just like us, the guys at SpeedBoostr created their own speed test tool to specifically analyze Shopify Site Speed – you can check that out here.
It’s important to review site speed tool results with the context of your site in mind – you may see warnings that might be irrelevant to your site or have zero meaningful impact on speed in the real world. Also, some tools like GTMetrix and Pingdom include a speed grade as well as some recommendations such as “remove query strings from static resources” that are completely irrelevant on the modern web and some cases will actually break your site. On most tools, unless your site has been built from the ground up to achieve a high score on that tool you can’t realistically attain a 100 score or A+ grade without breaking your site or partially breaking your site. Almost daily we see sites where someone has been obsessed with Pagespeed score and eneded up with a broken render or what’s called a “flash of unformatted content” where your site appears broken for 1-3 seconds while the elements are loaded – they achieved a higher speed grade but in the process broken their site. In any case, we don’t care about grades, what we actually care about is the raw load time in seconds and we want that as low as possible. It’s possible to have a high grade or high score in many of these tools and actually still have a slow site. Ultimately we really don’t even care about speed, what actually matters is conversion rate, which brings us to the next point.
When you’re testing your site remember, the speed of all pages matters! We so often see people obsessed with achieving a particular Pagespeed score or load time who completely miss the fact that the speed of all yours pages matters!
Depending on the site of your site is may not be practical to test every individual page on the site but at a minimum we suggest testing at least the top 10 pages of your site as that is where speed improvements will have the biggest impact.
Uptime and reliability is at least as important as speed, after all, downtime is zero speed!. While Shopify sites tend to not have many outages they do happen and other elements like domain name registration and DNS hosting (we’ll explain that further below) can also impact uptime and reliability.
Whenever we talk about speed with customers we always recommend using uptime monitoring – Uptimerobot.com have a free plan that tests at 5 minutes so there’s no excuse for not getting this in place – we use the paid plan which tests at 1 minute intervals.
A really simple optimization is to remove any apps that you’re not using. A lot of the time the reason behind the slow speed performance of Shopify sites, particularly older ones, has to do with apps.
Every app you install is essentially adding code to the website. They usually add some JavaScript and CSS files to drive whatever the functionality is the app provides. Each one of those files has to be loaded by a visitor to the site and then processed by the web browser as well.
So, a simple first step that will only take 5 or 10 minutes is to run through the site and just do an audit on all the apps you have installed. Anything you’re not using actively, remove it!
Look At Theme & Template Settings Too
It’s also worth going your theme settings and disabling any of the special features you’re not using. Many features will add JavaScript files and more weight to the theme or the template whenever it loads.
Third Party Tracking Codes & Marketing Tools Should Be Reviewed
Technically not apps but third party tools and tracking codes essentially have the same impact on speed – you should also look at all the third-party marketing tools and code that you have embedded in the website. Those can be things like Hotjar, Lucky Orange, Crazyegg and similar marketing, livechat and analytics tools.
What we typically find is that a lot of the time people add all these things to their website use them for a while and cancel accounts but leave the code still embedded in the website. In some cases it might also be worth redoing embed codes as quite often vendors will release new versions of embed codes that are faster and lighter.
So, that would be pretty much it for the first step of Shopify optimization. But before we cross over to the second one, let’s recap:
Okay, so that’s pretty straightforward – it’s going to take you five or ten minutes and, depending on how old your site is, it may have a meaningful impact on its speed.
Now, let’s move on.
The next step is to move any of the third-party code that you’re using into Google Tag manager. As your site develops and matures over time, different marketing codes or analytics codes, and tracking codes get added to the site. This, in turn, can make it a bit messy and you end up with code all over the place.
This second step kind of goes hand-in-hand with the last one. Using tag manager makes all this third party code easier to manage AND you can also conditionally load it, that is load it only on the pages where you need that code. This makes it a bit easier to manage. Also, as time goes on, it becomes easier to see what code is in there, as well as what code you are using or not using.
Lazy Loading or Deferring the Livechat Loading
Most sites use some sort of live chat app or the Facebook Messenger app and that’s basically an application loading inside the website. This means that there’s a lot to load and that it’s definitely going to slow down the page a bit. Pretty much all live chat apps are slow and heavy as they load a lot of files.
What we typically do with our WordPress customers at WP Speed Fix is take that live chat code and move it into Google tag manager and we add a 5-7 second delay into the trigger. What happens then is that the page can load without the live chat, nice and fast, and once the user has been on that page for 5 seconds, the Google tag manager will fetch that code for the live chat and it will then fire it. This it doesn’t have any meaningful impact on how the live chat functions from a visitor perspective because most people aren’t hitting a web page and firing up the live chat straight away but it does impact load speed substantially.
This is particularly true for e-commerce sites where people are clicking through pages quickly. Removing that live chat, which is very heavy, will make their experience much faster, and the pages will be much lighter. Some live chat apps are up to half a megabyte in size and have 10 to 15 files that they need to load, particularly the free live chat apps and Facebook Messenger widgets.
So, two steps here:
Okay, this is a very simple one: make sure all the domains are redirecting to the primary domains under the domain settings inside Shopify.
You’d be surprised at how often people miss this step – it’s one of those that things happen when the site goes from development to live and the settings are never turned on. But it’s actually a very simple step – and super-important for both SEO and speed. There’s a screenshot below that highlights where to do this.
Okay, here’s a more complicated step that a lot of people actually miss when it comes to site speed optimization: use good quality DNS hosting!
For our site, we use Cloudflare for DNS hosting and we suggest you use Cloudflare for your site as well. If you go to DNSperf.com, you can see how all the top DNS hosting providers out there rank – from fastest to slowest. Cloudflare is pretty much always the number 1 fastest DNS provider.
What is DNS Hosting?
DNS stands for Domain Name System. The DNS server turns a web address into an IP address. So, when someone types in your domain name into their web browser, the first thing that happens is that the web browser does a DNS lookup against your DNS hosting. If you’re using the DNS host that came with your domain name (which is very common – that might be Bluehost or Namecheap or HostGator or GoDaddy), chances are that it’s adding a delay, meaning you have some speed issues right there. If you’re using a poor quality DNS host it might actually be a couple of hundred milliseconds for that DNS to resolve and respond so that’s 0.1 or 0.2 of a second speed difference simply because your DNS hosting is performing poorly. It’s even worse if you’re targeting international traffic – it’s not unusual for us to see the DNS hosting take half a second or 1 second to resolve where the DNS hosting provider is international to the visitor.
For example, we’re based in Australia and quite often DNS hosting providers that are based in the US will take half a second to respond. Cloudflare is a global provider and doesn’t have this problem as they have more than 150 locations worldwide. The free Cloudflare plan is all you need for the DNS hosting – you can run Cloudflare in DNS only mode which turns off the CDN and security features which Shopify mostly has covered as part of their platform.
Another way to optimize your Shopify site is to use lazy loading.
Lazy loading is a technique whereby anything that is outside the initial viewable area on a web page (typically called ‘above the fold’ or “viewport”) is not loaded until the user scrolls further down the page. So anything below the fold (or any images below the fold specifically) are not going to be loaded initially.
Lazy loading is a particularly powerful speed optimization for image heavy pages like catgeory or collection pages as well as pages with video.
Using lazy loading for a YouTube video slims it down to about a hundred kilobytes (from roughly 0.5mb) and the rest of that player only loads if someone clicks on the play button, so, Lazy loading for images and YouTube videos can significantly speed up the site and slim down pages.
Using lazy loading can significantly reduce the number of files that are initially loading on a page, as well as the size of the page. Many modern themes or templates have this functionality already built in so it’s worth digging through the template settings and if the option is available, turn it on. The guys at Speedboostr have an article that digs into Shopify Lazy Loading in more detail.
A note here – in Pagespeed Insights lazy loading is called ‘deferred image loading’, but it’s the same thing as lazy loading.
Alrighty, so let’s talk a little bit about image compression and optimization. There are a few steps that are important here, but let’s talk about compression first.
What do we mean by image compression? Image compression is basically taking the image in its original size and then reducing its file size without impacting its quality. Now, there are two levels of compression:
When we optimize images we never use lossy image compression – if you’ve spent any time looking at speed articles around the web many of them will recommend lossy compression – this is a mistake, DON’T DO IT! We always use lossless compression because we never want to sacrifice the quality of the images on our site for a marginally better reduction in file size – ultimately we optimize site speed to make our marketing perform better and improve our conversion rate. Good quality product photography is really one of those key things that sets websites apart and can be a real conversion booster and while the quality difference between lossy and lossless might not be evident at a quick glance, there will be a reduction in the image vibrancy, colors and quality if you use lossy compression.
Bottom line – you never want to sacrifice the image quality for a small reduction in file size. There is an app called Crush.pics designed specifically for Shopify that will compress the images for you – it will run them through a compression algorithm, making the images smaller.
Size your images appropriately
Another thing you need to pay attention to when you upload images to your site is to make sure that they’re the size required for the page. This is a very common issue we encounter – images sized incorrectly.
So for example, the space for a image on a page might be something like, let’s say, 400 pixels wide by 400 pixels high. We’ll often see people upload images that are 2,000 pixels wide, which is huge – just too big for the space required. You want to make sure that before you upload images, they are sized correctly or approximately around the size where they’re going to be on the website.
Use JPG as the default image (if you don’t need image transparency)
There are two main file formats for images that people use on the web right now: JPEG and PNG. PNG files can be “transparent” which means they have no background and are quite often a lot larger than JPEG files, because the JPEG has a different compression algorithm.
When you’re saving images for your site, we want to use JPEG as our file format if we don’t need transparency. JPG files will usually be smaller than the equivalent quality PNG file.
Compress images BEFORE uploading them!
When you’re preparing images to upload to your site it’s worth running them through an optimizer on your PC – generally we use a free application called Imageoptim (https://imageoptim.com/). You just run the images through it and they compress very quickly. Afterward, we’ll use the Crush.pics compression application inside Shopify which might squeeze a bit more out of them.
NextGen Image File Formats
There’s also something called next-gen image file formats.
You might have seen this on Google Pagespeed Insights. There are several next-gen image file formats – right now .webp is the most popular. Webp files can be 25 to 50 percent smaller than the file size they originally had, so that’s another fairly significant image size reduction.
The problem right now webp image files is that not all browsers support them, which means you can’t just change all images on your site to .webp, they have to be served up in a particular way. In July, Shopify Plus stores started automatically supporting webp image files. It’s likely that Shopify will soon start rolling this out for all Shopify stores.
While .webp or Nextgen image optimization is a huge speed optimization it’s really important to do these other initial optimization steps first because that will make the webp files even smaller.
Alrighty, let’s talk about your Shopify theme or template now.
It’s probably unrealistic to consider swapping out the theme or template for an existing store or a well-established store. It’s a big deal to swap the template and while it certainly does have an impact on speed and loading time the amount of work to swap over to a faster template or theme for an established site is probably not worth it.
Now, if you build a site from scratch, it’s probably worth building on one of the faster themes. Out of the Sandbox provides you with some of the fastest Shopify themes currently on the market.
When we’re talking about themes and templates, there are really two different ways through which the theme speed is really being affected:
Those are the two ways themes affect speed. How clean the code is, how many JavaScript files are getting downloaded, and the reliance on JavaScript for generating what’s on the screen, as well as the features that the theme has and the associated JavaScript files that download the drive of those features. Then there’s also the all-around effect of all this, generally how efficient it is, how clean the CSS code is – all those things affect the render of the page itself.
To remind you again, Out of the Sandbox offers you a selection of some of the fastest themes currently on the market. You’re more than welcome to check them out and pick one that’s most suitable for your site and your business. We wouldn’t suggest swapping themes if your site is already established. If you’re setting one up from scratch, however, or rebuilding the site, it’s definitely worth considering building on some of the faster themes on the market.
NOTE: These are developer-level optimizations so quite a bit more technical. You will need to have solid knowledge in website development to implement them since they’re not really your easy-peasy DIY stuff.
JavaScript errors are going to slow things down and can break the render of the side or break the site in weird ways.
This is a fairly simple issue – it’s not unusual for JavaScript files to be out of date or not loading properly. There are some errors in the code which are actually relatively easy to fix.
We talked about this in the tag manager section, but just to reiterate, we’re going to go over it here one more time as well.
Moving the live chat code into tag manager and adding a delay to it – a five-second delay – will make the pages much faster (it’s actually very easy to do that), and it doesn’t really affect how live chat works. So, that’s definitely something worth considering, particularly when it comes to an e-commerce environment where people are clicking through category pages and looking up a lot of products. Making each page much lighter initially can make a big difference to the user experience. This makes lazy loading the live chat tag manager an important step to cover, which can have a huge impact across all speed testing tools, as well as the user experience of speed on the site.
Conditional loading basically means that you’ll only be loading the files needed for a particular page.
This is a fairly advanced feature and it differs largely on a site by site basis. This can be a powerful optimization, particularly if your site has a lot of heavy marketing and analytics code. An easy way to conditionally load third party scripts is using tag manager but conditional loading can also be implemented inside Liquid files.
Adding pre-loading commands or lines into the HTML to load stuff and connect to servers before those resources are required can also make things faster. Particularly if you’re loading from a lot of third parties using pre-loading directives in the head of the site can speed things up and really eliminate some of the lag for those third-party resources.
Just-in-time pre-loading: there are a lot of libraries out there now that will preload HTML files on the site, as a user clicks over the link. So, before they actually click on the link, the browser goes and fetches that page in the background, and it caches it. The experience from a user perspective is that those pages load much faster and much snappier. The pre-loading library we prefer is the library from Instant.Page
Speeding up redirects from http to https and non-www to WWW URLs can improve the users perception of initial site load time greatly. What we often do is use Cloudflare in front of a site and use the page rules inside Cloudflare, do things like faster redirects from non HTTP URLs to HTTPs.
We also use Cloudflare to filter a lot of garbage traffic. Often we’ll show captcha messages to countries or to visitors from countries where spam typically comes from and we’ll often block SEO crawlers from Semrush and Ahrefs which also hammer sites.
Additionally, allowing those crawlers to crawl the site can give competitors data about the site that they wouldn’t otherwise be able to get. So blocking those crawlers also blocks some of the functionality and those SEO tools.
Let’s talk a little bit about things that probably don’t really matter in terms of speed. Minifying CSS and JavaScript won’t make much of a difference to speed, generally speaking.
In fact, you’re very likely to see a lot of speed tools recommending you to minify CSS and JavaScript. In the real world, however, that won’t make much of a difference, because the files that are coming out of the hosting are compressed anyway by gzip.
Then we also have removing query strings from static resources, an old speed recommendation that doesn’t really matter on the modern web and can actually break Version Control for some Content Delivery Networks.
Those are two things you’ll see in some speed test tools, particularly older ones that actually don’t really make a difference anymore. This also means that they can probably be safely ignored in most cases.
So, thanks for pushing through this, it’s been a long one! Nevertheless, we hoped we helped you go through some of the speed issues you’ve been having with your Shopify site and again, check out the guys at www.SpeedBoostr.com as there’s some great content there that digs into Shopify site speed even further.
The Fastest Shopify Themes
The Fastest WordPress Themes
The Best Themes for Woocommerce
Fastest & Best Woocommerce Hosting
* Denotes Required Field