This week's blog was contributed by one of our talented Developers, Josiah Mory!
Page speed - everyone loves to talk about it, and we’re always looking for new ways to improve it. The ecommerce world loves to tell the story of how Amazon decreased its product page speed by four milliseconds and saw huge boosts to conversions. So you run speed tests on your site, see the numbers...but you aren’t quite sure what they mean or what you should do with them.
Wonder no more! We are going to break down how we recommend using speed tests, what categories to pay attention to, and how to respond to the numbers you get back.
Say hello to Lighthouse
Here at The Taproom, we use Lighthouse as our testing tool. It is built into the Chrome DevTools and is also what Google's PageSpeed Insights use under the hood. The two impressions we are most concerned about are 1) the customer's impression and 2) Google's impression. Google's opinion impacts the placement of your store in search results, so it makes sense to rely on the same tools Google uses.
Here's an example of running Lighthouse on Casper.com.
Not sure what's happening in this image? Well, then let’s start by translating all the technical jargon you’ll need to get to grips with:
First Contentful Paint (FCP) - This is the amount of time it takes for a browser to process everything it is going to show and put the first test or image on the page. This metric is a massive player in the perceived load time of a site and is the primary one we want to watch.
First Meaningful Paint (FMP) - The time it takes for a page's primary content to appear on the screen (the rest of the text and images).
It’s worth noting however that this metric can be a bit skewed, and is slated to be removed in future versions of the Lighthouse testing tool, but for now it’s included for completeness.
Speed Index (SI) - Measures how quickly content is visually displayed during page load. SI is the secondary metric we want to watch for, as it profoundly impacts how the user feels about a site's load time.
Time to Interactive (TTI) - The amount of time for a page to become fully interactive. In other words, the page is fully loaded, every bit of content is visible and ready for a user to engage with it.
This metric is a bit tricky because it can be affected by time-delayed pop-ups and other javascript related components that don't impact how a user feels about a site. Really, it should be called 'Time to Fully Loaded' as Lighthouse waits for your store's code to finish loading for 5 seconds before concluding that it's fully interactive. This includes running any javascript, and to stop making network requests to any external resources like Shopify CDN, any apps you have installed, Google Analytics etc.
In practice, this means if you have an email pop up that shows up after a specific number of seconds, the TTI will be pushed past the actual point of interactivity of your store because technically the store’s code isn’t finished loading even if everything else on the page has loaded. Something to watch out for, as it does affect the performance score of the page.
Now let’s look at the overall metric scores that are worth watching:
Performance - Scores based on several different metrics (including everything we just talked about).
Accessibility - As automated tools only go so far with providing results, the feedback from this score is a starting point to make sure your store continues to become more accessible as you implement new features.
Best Practices - This category is a bit fluid as it is a catch-all for what is deemed best practice at the time. One of the big items we see impacting this score is errors being thrown by erratic code from your theme or installed apps.
SEO - This score tracks items every store needs to be doing at minimum. Most of these are implemented on your behalf by Shopify and by getting a good theme. The one we recommend watching for is generic text in your links and buttons.
As we already mentioned, these numbers are guides, not gospel! Even running the test back to back will get slightly different results. Lighthouse themselves recommend running a test several times. After several runs of the test, you can confirm the impact that recent changes had on your store's speed.
Lighthouse Speeds
Now that you have an idea of the categories and what they mean, you run your first test and get results that indicate your store is running a lot slower than you expected. Suffice to say you are stunned! You know your store wasn't the fastest out there, but you weren't expecting it to be that slow. You even pull out your phone, open a stopwatch app, click the reload your store and confirm it is much faster than the Lighthouse numbers. What gives?
The simple answer is that Lighthouse simulates throttling your network speeds to give an idea of how your store will load on a slower network. This throttling means the numbers we see may or may not be what many of your customers are experiencing.
Using the Data to Improve Your Store
The test dashboard will show you what it believes is a good, average, and poor score for each metric, but we would recommend using them more as comparisons versus your scores over time, rather than trying to hit a specific goal.
Remember, you have an ecommerce site with lots of functionality, but Lighthouse is a speed test against every type of website out there. That includes even brochures and personal websites with few images. In writing this article, we went and tested several popular ecommerce brands stores. The average of their First Contactful Paint (FCP) was between 3-5 seconds, Speed Index (SI) between 10-15s, and the average Time To Interactive (TTI) was between 25-35s. So if you run tests and your store has say, an FCP of 6.1s and an SI of 8.6s, then you can see by comparison you’re really not doing too bad!
If you only have one takeaway from this article, let it be this: take your store's scores and look to improve on them over time, rather than trying to fit into a box comparing the entire web to others.
----
Lighthouse metrics are great tools in your belt for looking at your store's improvement over time. But while they map out some critical components of your users' experience, they are hardly exhaustive and do not take into account the entirety of the customer experience.
While we at The Taproom are advocates for utilizing data from Lighthouse to inform decisions and progress, it shouldn't be without considerations of the tradeoffs, like an image-rich store (shown to help conversions) or apps dynamically added to your store that provides valuable functionality. Instead, use Lighthouse Data as a metric of your changes to your store over time as you grow and improve.