Understanding Shopify Site Speed

First things first, what is site speed exactly?

The best way to get a sense for what Shopify site speed is, is by looking at the metrics used to calculate it. As you understand these metrics, you will learn why site speed is so complex and why compromise is necessary if you are set on scoring 100/100 on Google PageSpeed. 

Once we’ve covered the metrics, we’ll look at why site speed isn’t the be-all and end-all and what you need to be aware of as you pursue a speedy ecommerce site. 

Core Web Vitals is a series of metrics that Google developed to quantify site performance. By understanding these, you can better see how site speed is measured and, therefore, what key things you need to be thinking about during site development. We will look at how much control developers have over each of these metrics. 

1. TTFB: Time to First Byte

This is how long it takes for the browser sending a request to receive any kind of response. This is something that developers have very little control over because it depends on how fast Shopify’s servers respond. 

You can minimise this time slightly with less and/or more efficient use of Liquid code in the theme. But this measurement essentially comes down to the user’s proximity to a Shopify server. That being said, Shopify has an industry-leading global server architecture and is considered very fast; that’s why global enterprises with high-volume stores, choose Shopify Plus.

2. FCP: First Contentful Paint

This refers to the time it takes for a user to see any content on the screen. A browser will usually load a page from top to bottom, meaning header content will be seen first. This is the first real indication to a user that something is happening and that the site hasn’t crashed or isn’t just a white page.

Developers have some control here; they can defer content that isn’t required above the fold to be loaded later, or only when necessary, e.g. script, styles, images, resources, etc.

3. LCP: Largest Contentful Paint

This is the time taken for the largest image or text block in the viewport to finish rendering. This is often a hero image on a landing page, or a product image or description on a product page. By this point, the user has seen the majority of the page and gets an idea about whether they want to stay or not.

For this we also have some control; we can use optimised images and ensure things render as efficiently as possible. But if you want a flashy, JavaScript-based, media-rich, auto-scrolling carousel at the top of your landing page then the LCP score will definitely suffer, and there’s only so much we can do.

4. CLS: Cumulative Layout Shift

This is a measure of visual stability. What is visual stability? Well, if you’ve ever been reading an article on a news site and have scrolled through a few paragraphs and then suddenly lots of ads start loading in, you have experienced bad visual stability.

There are tools developers can use to tell the browser how much space to reserve for things that will load in later from other apps, e.g. images and videos. This allows us to ensure good visual stability and minimise CLS fairly well. It’s worth noting that most people aren’t generally concerned about this when they are talking about page speed.

5. FID: First Input Delay

The other metrics in this list are all very visual; FID is not about visuals, but is a measure of how quickly a page responds. This is how long it takes after a page loads for a user to actually be able to click on the navigation and move around to other pages, interact with a carousel, or click a CTA.

Here you are waiting for Javascript to execute everything in the queue before it can respond to a new user event. There might be a lot of apps that are running their initialisation scripts as soon as the page loads and so the user events can’t trigger until all of those have finished. To improve this measurement we can minimise unused apps and be as economical as possible with our use of Javascript.

What tools should I use to measure site speed?

These metrics give you a birds-eye view on how a site performs. To measure these you can run a Lighthouse Audit, or a Google PageSpeed test. But, these both give different results and that can be confusing¹.

Lighthouse is an open-source, automated tool that can be run in Chrome DevTools. However, it is widely considered to be unreliable; it’s suggested that for every time you run it you will get a different output. This is because it generates data by running simulations and so is not based on real user experience.

Google PageSpeed, on the other hand, does pull data from user experience. This means that it’s a slightly more reliable measurement than Lighthouse. However, PageSpeed is only available for sites that meet its minimum traffic threshold.

An alternative tool for measuring site speed is Treo. It uses Google PageSpeed to generate data, but creates a graph that shows how page speed has changed over time. This makes it easier to analyse whether a site is getting faster or slower. You can then compare these trends with your site’s conversion rates to identify any links and correlation, i.e. is a faster page actually increasing conversion rate on your ecommerce site? Or is there another factor to be considered?

Why is site speed important?

Anyone who has used a slow website knows how important site speed is. We have all waited for a website to load, only to swipe back to the search page because we didn’t find the information we needed fast enough. 

What you may not know is that the stats back up this experience². 

• Conversion rate drops by 4.42% with each second of load time.
• Bounce rate increases; 1 in 4 users give up on a page if the load time is over 4 seconds.
• Google ranks fast pages higher on SERPs (likely relying primarily on Core Web Vitals for this data).
• 46% of users don’t revisit slow websites.

Perhaps you’ve heard these stats and have high expectations. You rightly don’t want a slow site, but you might not yet know how to get there or what some of the compromises that this endeavour requires. 

What is “good” site speed?

Well, this depends. And it depends on two main factors.

Firstly, what’s on the page? If there’s lots of content, multiple apps and high complexity, the page will be slower. These types of assets all slow site speed and the more of them, the slower the site or page. 

Secondly, what device or network are you using? Accessing a page on mobile will be slower than accessing the same page on desktop. Using 3G/4G/5G will also be slower than WiFi (in most cases).

There are so many variants to consider that putting a number to what “good” page speed is, is impossible. As we’ll look at later, that number may not even be very important when it comes to conversion and sales.

Things to consider when evaluating Shopify site speed

It is clear that site speed is a complex and multi-layered topic. When it comes to improving site speed there are some helpful questions to ask before approaching the problem.

1. Is it a specific page that’s slow? Or is it a site-wide issue?

If there is one specific page that is slow then it gives you an idea of where to look for a potential problem. If it’s a site-wide issue, then there isn’t anything specific developers can look at. This type of problem would likely be caused by an app, or excessively large theme file and styles.

2. Is the concern about site speed based on real user data or feedback? Or is it based on a Lighthouse report that was run on slow WiFi?

If you’ve received user feedback about slow site speed, this should be looked into further. It may be that this cannot be improved – i.e. a user has poor network connection – but it may indicate a larger problem that deserves more attention.

If the concern is coming from the latter, then other data (i.e. user feedback or use of Treo) should be used to establish whether slow site speed is a genuine problem.

3. Are you making unrealistic comparisons?

Every website is different. This is a simple statement, but one that can often be overlooked when comparing site speeds.

It is because of this simple statement that you can’t easily compare site speeds. A Shopify store will never load as fast as a website using a front end framework. This is when you need to be aware of the strengths and limits of the Shopify platform.

4. Are you willing to make sacrifices in terms of content or functionality?

As we’ve mentioned above, there is only so much developers can do to increase site speed. And media rich sites will always load slower and have a higher LCP score. 

Google conducted a study in 2017 that found “as the number of elements on a page increases from 400 to 6000, the probability of conversion drops 95%”. For this reason, if you are determined to have an auto-scrolling carousel or a big, bold brand video, you should know that this will inevitably slow down page speed. 

How can developers increase site speed?

There are lots of things developers can do, but they can’t do everything.

Developers can:

• use optimised images;
• implement lazy loading (when appropriate);
• minimise CSS and JavaScript (to an extent); and
• avoid using complex Liquid.

Developers cannot:

• improve the user’s network speed;
• load large amounts of content in a short time;
• improve app loading speed (in most cases); and
• speed up Shopify’s server response time.

Additionally, you should be wary of services that claim to boost your site speed. There are some legitimate solutions and companies that will work with you to improve your site’s performance. However, there are also ways to ‘game’ a Lighthouse score. This improves a Lighthouse score, but fails to provide a better experience for users – which is what actually  counts.

This is a good example of how site speed can be misunderstood. User experience should always be your priority; the numbers on a Lighthouse report – or similar – should be secondary to this.

Managing expectations around Shopify site speed

One of the best things that can be done regarding site speed is to manage expectations. This responsibility doesn’t have to fall to developers; this is something that anyone building and/or growing a website can be aware of. You’ve got to be aware that if you want a dynamic, image-rich site, you’ll have to accept some load time.

By adopting this approach you ensure that everyone involved knows the compromises that come with certain decisions. This clarity can improve project communication and reduce tension points further down the line.

It’s not all about site speed, though

We’ve established by now that site speed is important. However, there are other factors that play a bigger role in conversion rate success than site speed. We’ve seen evidence of this at Swanky and in the wider Shopify Plus network. 

A previous client at Swanky scored just 4/100 on PageSpeed (largely caused by ecommerce testing on the site), but experienced phenomenal revenue growth in a matter of months – we’re talking seven figures! Less than a year after the first A/B test went live on their store, they saw a staggering 3902% ROI. This proves that site speed doesn’t always correlate with conversion and sales.

These kinds of results are common for Shopify Plus sites. Take global fitness apparel brand Gymshark for example. In 2020, they had a single-figure speed score, but were valued at $1.3 billion. Stats like these indicate that site speed isn’t the most important factor to consider when growing your ecommerce brand. 

There are other, more commercially valuable areas that are worth focusing your resources on. For example, at Swanky, we’ve seen time and again how a data-driven approach to conversion rate optimisation (CRO) can accelerate a brand’s growth. Take a look at our case studies on YuMOVE and Loop Earplugs to see for yourself why we stand by this method.

So rather than obsessing over site speed, spend your time and effort on a CRO strategy that is data-led. This will most likely give you a better understanding of user experience and interaction on your site, lead to improved conversion rates, lower customer acquisition costs, and numerous other benefits. 

Looking for a Shopify Plus development agency?

At Swanky, we have over a decade of experience creating cutting-edge ecommerce websites for D2C and B2B brands across the globe. Our Shopify Plus Experts have helped hundreds of brands to navigate the complexities of online retail, putting user experience at the heart of every build.

To find out how we can unlock your ecommerce potential, get in touch today.

For reference:

[1] https://medium.com/@OPTASY.com/google-pagespeed-vs-lighthouse-how-are-they-different-and-which-tool-should-you-use-3f03270c674 

[2] https://wpostats.com/