If you're not already familiar, web performance metrics measure the user experience on your site by quantifying how quickly various elements load, speed of interaction, and the visual stability of content. There are two main reasons you should focus on optimizing these metrics.

1. First, by improving your user experience, your visitors are less likely to bounce and more likely to engage with your side - leading to better conversions.
2. Second, getting these metrics into "good" thresholds, as determined by Google, will provide a ranking benefit to your site, resulting in more organic traffic.

Now that you know why you should care about web performance, check out this video and walkthrough showing you how to analyze your metrics and optimize them for a better user experience and better conversions!

‍

‍

PageSpeed Insights

PageSpeed Insights is the most commonly used tool when people begin looking at their site speed and overall performance. It's very simple to use, but the information provided can be somewhat misleading, especially if you only focus on the lighthouse / lab data. They key is to focus on your real user data, which is presented at the top in four different view (if your site has enough data), including mobile and desktop versions of the URL you entered and your site as whole (origin data). Most people only analyze their home page and stop there, but you can actually put in any URL from your site that you want, and the information will vary, aside from the site-wide data.

Keep in mind that your real user metrics represent a much more accurate view of how your site is performing, where as the overall lighthouse score (which is often the only thing people look at) represents a semi-worst case user experience on your site as simulated by a visit from Google's servers. The lighthouse score can easily be manipulated to perfection, so don't get caught up comparing yourself to screenshots of other sites posted in forums, as these are often cheated, especially if the scores are really good. Lab data is helpful at predicting improvements or declines in actual performance, since it takes 28 days to collect real user data. Real user data should be your measure of success, since this is what Google looks at to determine ranking benefit, and real users will purchase something on your site, not a server somewhere running tests.

Search Console

Now that you understand why real user data is more important, you can jump into Search Console to see how your site is performing across each URL, assuming that you've connected it to your site already. If you haven't connected Search Console, you'll want to follow the onboarding steps to add your site and then allow a couple weeks for data to populate the account. Under "Experience" you'll find a section called "Core Web Vitals" where you can view the performance of your URLs based on LCP, FID, and CLS - which measure content load time, interactivity, and visual stability respectively.

URLs in the green are within the good thresholds for all three metrics and receiving the maximum possible ranking benefit from Google's latest web performance update. URLs in yellow or red have issues with one or more metrics and are the pages you should focus on improving. By opening the report for mobile and desktop, you can dive deeper to identify patterns of performance issues across various pages and see how far away you are from reaching better thresholds. This won't tell you how to the fix issues, but it will help you quickly assess the biggest possible wins across your site.

Chrome Dev Tools

Now that you've identified which pages to focus on, you can open up example URLs from Search Console reports to try and replicate the performance issues you've identified. On mac, simply type option+cmd+I to open, or go to to View > Developer > Developer Tools in your browser to open. From there, you can follow the steps in the example video in this article to adjust screen size, network speed, and overlay metrics for your investigation.

Once set up, you should play around with multiple pages, screen sizes, and network speeds to get a since for how elements are loading and what can be fixed. Be sure to scroll around on the page as it's loading as well, since most people will try to interact with pages before they're fully loaded. This will give you a more realistic user experience than just waiting for content above the fold to full load before scrolling. You'll often find there are certain pieces of content that should be loaded faster, 3rd parties that can be deferred, and layout changes that can be made to enhance performance by simply slowing things down and experimenting as if you're shopping your own site.

Next Steps

If you have the capability to do so, you can take what you've learned from these various tools and begin optimizing the code and content of your site accordingly. However, for most people, this is where web performance optimization gets challenging, even for some developers. So, if you'd like us to do this for you, check out our offer below. We have extensive experience optimizing sites, especially those on Shopify, and built Render Better to automatically solve the most common issues we've seen after working on hundreds of sites.