Shopify Speed Optimization & Fixing Slow Shopify Sites

Shopify Site Speed Optimization

Shopify Site Speed Optimization

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.

1. Speed Test Your Site To Get a Baseline Before Making Changes

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.

SpeedBoostr Shopify Analyzer

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.

Be Mindful of how you interpret speed test results!

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.

Remember, the speed of all pages matters!

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 & Reliability is at least as important as speed

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.

2. Remove Apps You Aren’t Using

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:

  • Go through all the specific Shopify apps you have installed on your site and audit them.
  • Make sure to remove or delete the ones you’re not actively using.
  • Look at all the third-party code that you’re using – which, granted, might not necessarily be an app, but it’s still something embedded in the website (marketing codes, AdWords codes, email marketing codes, those kinds of stuff).
  • Go through your theme or template and turn off any features that you’re not actively using. 

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.

3. Move Third-Party Code to Google Tag Manager

Google Tag Manager

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: 

  • Implement Google tag manager – move all your marketing codes, third-party tracking codes and everything else into tag manager.
  • Lazy load your livechat – move your live chat code or messenger code into the Google tag manager and add a 5 Second firing delay into it. **Make sure you test this as there are a handful of tools that this does not work for – Intercom is one tool this doesn’t work with as it expects to load with the initial pageload.

 4.   Make Sure Primary Domain is Set

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. 

5.   Use Cloudflare for DNS Hosting

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.

6. Lazy Loading

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. 

7. Image Compression and Optimization

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: 

  • ‘Lossless compression’, which means zero reduction in the quality of the image, as well as smaller file size.
  • ‘Lossy compression’, which means there is some reduction in the quality of the image, as well as even smaller file size.  

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.