In our last article Site Speed Matters But You’re Tracking It Wrong, we explained the power of tracking and optimizing speed based on data from real users. Speed matters, and as we demonstrated, the more accurately you can optimize it, the more likely you’ll see an improvement to business revenue, reduction to bounce rates, and increase in search engine rankings.
As we demonstrated in our own recent case study, an improvement to these metrics resulted in a 28% lift to revenue per session for one of our customers!
Tracking site speed for real users shouldn’t be hard or require expensive tools, but historically it has been. We’re about to change that! In this guide, we’ll show you how to add a single line of code to your site to start tracking site speed metrics such as Core Web Vitals right in Google Analytics.
A quick aside: What’s the difference between site speed and Core Web Vitals? There are many different site speed metrics and the Core Web Vitals are just a subset of them. We recommend focusing on the Core Web Vital “Largest Contentful Paint” (LCP) first before trying to address others, as we explain here.
Site speed optimization should be accessible to all sites (that’s Render Better’s mission). So we’ve created a simple script that will add site speed metrics from real users right into your Google Analytics with a single line of code.
Here’s the single line of code that will start tracking Core Web Vitals and other site speed metrics in Google Analytics:
Add this line of code in your site’s HTML roughly above the closing </body> tag. And that’s it! Now you’re collecting the site speed metrics for real visitors. You’re on your way to understanding your website’s performance like a pro.
If you’re wondering what the script is doing at a technical level: On every page loaded by your visitors, the script looks for Shopify’s Google Analytics integration code and then uses it to send the visitor’s performance metrics into Google Analytics. You can learn more about the script on its Github repository.
Now that you’re collecting Core Web Vitals in Google Analytics, it’s time to use the data to optimize your site.
With Core Web Vitals being pushed in Google Analytics, you can dig deeper into how your site is performing for real visitors. As mentioned in our previous article, we think the Core Web Vital “Largest Contentful Paint” (LCP) is the most important to look at to get an idea of your site’s speed - so let’s focus on that one for the sake of simplicity.
Note, we’ve written this guide focused on the Universal Analytics version of Google Analytics, not Google Analytics 4. We’ll be following up with a Google Analytics 4 guide soon.
We recommend following this process to optimize your site using the collected LCP data in Google Analytics:
Start by digging into the data you’re now collecting. In Google Analytics navigate to Behavior > Events > Pages. This report provides a breakdown of event data being collected. Although the script we created reports other performance metrics, the data we care about is the Largest Contentful Paint for the sake of this article.
Filter the report to display only LCP by clicking on the Secondary dimension drop down, selecting Event Action, clicking on advanced and filter Event Action by LCP.
The table should now show LCP by page. The metric to pay attention to is Avg. Value, which gives you an idea of the average LCP time.
Nice! Now view your average LCP at the page- and sitewide-level. With this data you will be able to analyze which pages need attention so you can optimize them until they’re performing well.
Once you understand which pages have the worst speed measured by LCP, it’s time to start optimizing!
There are many reasons for slow site speeds, specifically LCP, such as loading too many render-blocking scripts and stylesheets (typically caused by apps and third parties), using JavaScript to load your images like carousel scripts, or lazy-loading above-the-fold content.
There are a lot of good resources for optimizing a Shopify website such as Shopify’s dedicated performance blog, our own technical guides, and of course, Render Better automatically optimizes Shopify sites too, so we won’t go into much detail here.
We recommend making your optimization changes in a preview theme and then repetitively testing with a tool such as WebPageTest, PageSpeed Insights, or Lighthouse before proceeding on to the next step. We have a guide on how to use the scientific method for site speed optimization with these tools that will help you approach this problem systematically. These tools don’t tell you how your site performs for real users, so they’re not as accurate, but they’ll give you a good idea if you’re going in the right direction.
Alright then, once you’ve made your changes and optimized things a bit, it’s time to launch those changes in your live theme and test it out with real users...
What’s so awesome about Real User Monitoring is that you can discover the impact of your optimizations pretty much immediately after they’re live! And unlike testing with WebPageTest, Page Speed Insights, or Lighthouse, you’ll know how they impact real visitors.
Using the same instructions in step 1 above, dig into the performance of each type of page and repeat the process of optimizing and then measuring. Your goal should be to get the average LCP for each page type into a good range (under 2.5 seconds) or better.
Now, one last awesome thing you can do since this is all in Google Analytics: correlate performance changes with business metrics such as conversion rate and revenue!
This is probably the most interesting part of this guide! We can finally see how all this work is paying off by tracking when site speed optimizations were made and then checking revenue lift. To do this, go under Behavior > Events > Top Events in Google Analytics, navigate under Web Performance in the table, and look for Web Performance: LCP in the table and click on it.
In the graph, look for the area that has a drop down with the text vs. next to it that look like this:
And change them so they’re Avg. Value vs. Revenue:
Voila! Now you’re plotting a line of average LCP of your site to revenue. Feel free to change this to any one of your business metrics, such as conversion rate. You can use this to spot trends, finding the real impact of site speed on your business when you launch new optimizations. Time really is money!
Whenever we talk about site speed, eyes start to glaze over. There’s so much confusing information around tracking performance and improving site speed. Many Shopify merchants don’t have the time or resources to determine why their site is slow and how to optimize it, which is why we built Render Better.
Shopify sites using Render Better receive best-in-class web performance optimizations automatically. You can learn all about Render Better’s automatic optimizations here.
But we have an exciting new addition to our product to announce: Coming in the next few months, Render Better will track the site speed metrics for real users automatically and report these through easy to use dashboards as well as in Google Analytics. No need to do anything to get RUM reports, it’s all done for you. Typical RUM products can be pricey but we’re offering this for our customers at no additional cost!
If you’re interested in learning about how Render Better can make your site faster automatically in minutes, hit the big blue button below to get in touch with us!