Shopify Plus and Shopify Backend Performance Optimization (Part 1)
There are numerous articles about optimizing Shopify’s performance, but they all deal with the frontend performance primarily and completely omit any discussion of backend optimizations. In this article, we’re going to dive deep into what backend performance is and how you can drastically improve it on your Shopify store.
What Is Backend Performance?
The frontend performance is the time it takes your browser to make the site visible to a customer after you’ve downloaded the initial HTML page. But the backend performance is how long it takes to download that original HTML. It’s the time it takes before the frontend performance can even get to the starting line! In SEO terms, it’s the old “Time to First Byte” or in Google Analytics “Avg. Server Response Time”.
But backend performance with Shopify is a bit confusing. Many people will claim that you can’t even optimize your backend performance because Shopify is a SaaS platform and you don’t control the hosting. That’s true on one level, but even without control of the actual hosting, there a lot of things that you do control that have a direct impact on the average server response time. These things will determine whether your pages be able to get a sub 0.5s average response time or 3s+.
Why It’s So Important
So why should you even care? Backend performance is extremely important for 2 reasons:
- oogle heavily penalizes sites’ SEO ranking that have poor backend performance because it results in a bad customer experience.
- Having poor backend performance will result in a subpar customer experience and will have a direct effect on your revenue, conversion rate, and bounce rate. The reason being that most people will only tolerate a TTFB of about 1 second or they’ll get frustrated or distracted. (I know some people might say that’s sad and a reflection of our always on the go, fast food culture, but it’s just the reality right now!)
Full Page Caching
Another confusing thing is the averages you see in Google Analytics might not reflect what you see when you visit the actual pages. And they might not even show up in something like Google Page Speed Test or Web Page Speed Test. When testing the pages might load instantaneously for you, and when you run a google page speed test it might report a very fast server response time. But this is a sleight of the hand because Shopify employs a performance feature that they never talk about in any of their documentation: Full Page Caching.
(I’ve reached out to multiple people at Shopify to try and get some official documentation on their full page caching and they haven’t provide any information. So everything I say about FPC is based on a lot of tests and observations. Shopify, if any of these observations/conclusions are wrong, please let me know and, I’d love to update this post with official information!)
If you don’t know what Full Page Caching is here’s a simple explanation way to observe full page caching working:
You might have noticed that sometimes you go to the exact same Shopify page and the first time it loads it takes 5+ seconds and then you immediately refresh and it loads almost immediately. You felt like it was slow, but you might have chalked this up to some sort of random connection or server problem. But in reality, you’re likely experiencing the “true” performance of that page on the first page load. You’re experiencing the time it takes for Shopify’s servers to do all the computation, connect to the database, pull the product information, and serve it to you in HTML. This is the un-cached performance of a page. On some bad collections pages, the un-cached performance can even be as bad as 50+ seconds if you try to go to /products and it tries to list a lot of products.
p.s. Don’t confuse full page caching with browser caching though. That’s a frontend optimization. And for the sake of making this not even more confusing for everyone, we won’t talk about that yet.
If you want to simulate this un-cached performance, pick an obscure page on your site that no one is likely to go to, go in the Shopify admin and edit any product’s inventory. You should see the difference between the first time you go to that page and the second time you refresh it. Another way you can simulate it is to edit any page or a file in your theme and then immediately refresh the page.
So What Can You Do to Improve it?
In Part 2, we’ll discuss how you can take your newfound knowledge of Shopify’s backend performance and how you can apply that to optimize your site. As a sneak peek, this is a chart from Google Analytics of the Average server response time before/after optimization.
To be continued!
Originally published at Netalico Commerce.
