Just how important is Shopify speed optimization?
You can do all the conversion optimizations in the world to your website.
You can send as much traffic as you want. But on a slow site? It’s like trying to hold water with a bucket full of holes.
Your customers are like a crew on a ship jumping overboard any way they can to get away from this horrible experience of using your site to buy what they want(ed).
So how long does it take before someone ‘bounces’ (leaving your site without visiting any other page)?
Pingdom ran the numbers. It’s not very forgiving.
At 3 seconds, the bounce rate starts to climb. At 5 seconds, it’s at a massive 38%. What does this mean?
It means if you want to be fighting a fair fight and making your ad dollars and marketing efforts worth the while, you have to be measuring your Shopify speed optimization from the very start.
The Financial Impact of Making Your Shopify Store Load Faster
The financial and resource impact of this can’t be minimized. It’s no secret that slow-loading pages mean you’re missing out on hundreds of sales.
In fact, research carried out by KISSmetrics, reports that for every one-second delay in page load speed, your conversions will drop 7%. So for an average store generating $50k per month, that could mean $42k in lost revenue per year.
But the bigger the store, the bigger the potential losses, just add another zero to those numbers and the losses look scary.
Even as far back as 2006, Amazon reported that for every 100-milliseconds they sped up their website, they saw a 1% increase in revenue. But since 2006, the average attention span of a web visitor has plummeted to just 8-seconds, so if your page loads in over 4-seconds, you have just 4-seconds left to impress them enough to stay and buy. So what if you could slash 2-seconds off your load times?
That would mean a potential 20% increase in revenue, based on Amazon’s findings. Or you could see results similar to a more recent case study, that found pages that load just 1-second faster, experience a 27% increase in conversions.
So what can you do? Doesn’t Shopify have everything ‘under the hood’ on lockdown? Yes and no.
There are still quite a few things you can do to speed up your site tremendously. Let’s dive into Shopify speed optimization.
Shopify Speed Optimization Secret #1 – Analysis
You can’t fix what you don’t know is broken. The first and most obvious step is to find out what’s slowing your Shopify store down. How do we do that exactly? There’s a couple of ways. I’m going to start with the easiest way first.
Pingdom offers a free service that uses Google’s PageSpeed implementation with a few extras. Google’s PageSpeed algorithm pretty much spells out for you what your site is doing right and more importantly: what it’s doing wrong.
Google is all about the internet. They want to make it faster. The faster the internet, the more content people can get to, the more ads that get seen. The world goes ‘round. What does this mean for SEO? It means Google is starting to rank sites that load faster higher in search results.
As of July 2018, Google considers page speed when ranking sites for mobile devices. I picked a random Shopify store and wanted to see what kind of rating Pingdom would give:
There are a few areas we want to pay attention to: This “C” grade of 75 is Pingdom’s performance grade based on the speed insights from Google. Pingdom also tells us the time it takes to load, the page size, and the number of “requests” the page makes.
Load Time. This is the time it takes your site to load 100%.
Total Page Size. The size of your page that was analyzed. This may not seem important when we put it in terms of downloading a file like an ebook, or a song, or an application. However, this is a web page we’re talking about.
Requests. Requests are basically your website asking another website for something like an image, a resource, a piece of code. The more of these requests, the slower your site loads.
So how do we break this down? If you aren’t the tech type, don’t worry. We are going to go into some basics of how to fix most of these issues automagically. Your results may look different from this, but you may also see some of the same issues as our example.
UPDATE 11-24-2019: There’s finally an awesome new Shopify specific speed test analysis. It’s provided by SpeedBoostr.
Shopify Speed Optimization Secret #2 – The Theme You Use
Remember our analogy of your site is a bucket with holes in it? Your customers are the water leaking out at a rapid rate. What if we didn’t have holes in the bucket to start with?
That’s essentially the starting point we should be looking at when working with a store, new or existing. If the theme you use isn’t well optimized out-of-the-box, then you’re building your castle on sand.
A good way to test this is to compare the Pingdom results of the theme demo pages. That’s what the Shoptimized™ Theme was built for. The theme is made out-of-the-box for conversions AND speed.
But we understand that sometimes it’s hard to just uproot your existing site. That’s why we also built SpeedBoost Ninja. SpeedBoost Ninja is the simplest, easiest way to immediately and dramatically improve your page-load speeds. Simply install the app, click a button and the effect is instant.
Remember how we said that Shopify has a lot of ‘behind the scenes’ settings on lockdown?
When you have ‘app access’ to a store, you get the VIP treatment to the inner workings of a Shopify store. This allows SpeedBoost Ninja to optimize your site in ways that you couldn’t by simply tweaking the store settings.
But more on that later. First, let’s go over some of the heavy hitters of Shopify speed optimization.
Shopify Speed Optimization Secret #3 – Using Compressed Images
Shopify has a great guide on the highlights behind image compression.
However, let’s go over a few things here just to give you a basic understanding of what’s important to remember. As you will find, most Shopify speed optimization can be handled by apps.
Serving scaled images. Does your image really need to be 1920 x 1080? Is most of your traffic mobile? Can you afford to have smaller images? The biggest culprit of this is when you really just need an image for a scaled-down use of the image.
However, most of the time, the HUGE file is being used instead.
So say your source image is 367×367 but you are displaying it at 20×20. It is inefficient because the browser has to download the larger image and then resize it. A huge waste of resources all around, costing you money.
As a side note, this is a continual process. We find that uncompressed, non-JPEG product photos are the main culprits for speed issues.
Make sure your product photos always get put through the gauntlet of optimization before uploading them. Check out Toolur, which has a free tool to make your photos compressed and resized to smaller sizes which equal lightning-fast load times.
File type. One of the main things is making sure you save your images in JPEG or JPG format. This is a long-running standard for images and continues to be the leader in the balance between compression and quality.
Compression. Image compression is done by making a file size smaller while sacrificing some quality, usually unnoticeable.
Uniformity. Often times you will want all your product images to fit a square 1:1 ratio. This decreases the overall amount of pixels it may take up otherwise. Now, as we said, it would take you tons of time to do these optimizations for each image on your site. Not only that, sometimes the image elements within a theme aren’t always optimized to their full potential.
webspeedtest.cloudinary.com is a great site that will analyze all the images of a URL and produce images that you should use instead.
As well as SpeedBoost Ninja, there are a few apps that do a great job like Bulk Image Edit by Hextom. They make it painlessly simple to downsize on the monster image bandwidth hogs hiding within your website. Speaking of browsing apps to help your site. There’s a big caveat to that.
Shopify Speed Optimization Secret #4 – Installing and Uninstalling Multiple Apps
When you install an app to your Shopify store, it’s like having a tenant in a rented house.
You really want to do your research and make sure they aren’t going to trash the place.
The basic goal is to get a good tenant (a good app) to pay their rent (help your site make money) and to not completely destroy your rental property (not modify important parts or cause issues or slowness).
You are handing the app developers the ‘keys’ to your store to hopefully help your site and not to create conflicts and slow it down.
Another big problem is when it comes time for you and your app to part ways. Just like you hope a tenant would leave the place as they found it. You can hope for Shopify app developers to do the same. However, this isn’t always the case.
When an app is installed, it writes code to your Shopify store. That’s totally expected and in fact, it can’t work otherwise.
The bad stuff
The problem is when an app is uninstalled, there’s no guarantee that it won’t leave behind the code and create problems. Perhaps worse, it can leave behind assets that slow down your overall store.
An app is supposed to remove itself upon uninstall. But there’s no Shopify app police maintaining law and order around this expectation. Oh, and if you have the app installed and aren’t using it, it’s still using resources to load on your site. So what can you do?
Only install apps that give you a positive return. What do I mean?
A lot of Shopify store owners install apps without even considering whether the app truly provides an ROI(return on investment).
There’s a difference between the idea of what the app can do versus how much ROI the app actually nets your store. If the app doesn’t prove to be making your sales then consider removing it and the legacy code.
Shopify Speed Optimization Secret #5 – Using Google Tag Manager for Code Snippets
Google realized that site owner were probably tired of feeling like they were trying to disarm a bomb every time they wanted to add a piece of code to their site. Whether it’s an ad tracking code, a Google Analytics snippet, or a Facebook pixel…it can be a little scary.
It’s all things that are necessary to add to your site to integrate powerful software services. But there are other times where you simply don’t know what you’re doing and you need an expert to step in.
That’s why Google made Google Tag Manager. Not only does it help you keep track of what tags you have on your site in one easy place, but it speeds things up as well.
Not only does this reduce the number of required outside calls, but it also makes this request asynchronously (in the background, letting the rest of your website load independently of the response outcome).”
In short, it’s like a dishwasher machine washing all the dishes at the same time versus you washing them by hand one dish at a time.
Shopify has a pretty good guide to getting Google Tag Manager up and going. Although it’s for Shopify Plus, the process is the same except that one tag can’t be applied in the regular version of Shopify checkout. However, this video will show you exactly how to get around that. Want an easier way to increase your store speed?
SpeedBoost Ninja Makes Shopify speed optimization easy…
- Instantly boost your conversion rate with page-load times under 2-seconds.
- Up to 4x faster page-load speeds let you leapfrog your competition with an improved Google PageSpeed Insights score and better search rankings.
- Lower CPM’s and cost-per-click on your paid ads through better quality scores.
Unsatisfied with your Shopify store theme? It’s best to switch a high and best converting Shopify theme like The Shoptimized™ Theme. We can also do the installation and setup for you so it’s a seamless transition.
You want to make your site a lean-mean-converting machine. But it can be difficult. To make all the changes and have everything look good.
Plus, by the time you’ve added all the apps. Made changes. Tweaked it. All the things that could help your site… your site’s speed takes a hit. Such a hit that it won’t matter how convincing it is.
Because no one will be patient enough for your site to load. That’s why we created The Shoptimized™ Theme.
To help you save up to $2,011 per year on costly and slow-loading apps. We’ve packed years of trial and error and real-world testing into our theme. We eliminate all the conversion killers most stores suffer from. From the CTA button text to the placement of each element. Every detail has been tested and proven to increase conversions.