Google’s PageSpeed Insights (PSI) is the most popular speed testing tool out there for gauging web performance. Unfortunately, its results are easy to misinterpret, especially if you’re using it for the first time.
In this post, I’ll explain exactly how to interpret a PageSpeed Insights report from top to bottom.
Understanding your score can help you know where you need to make improvements so that your users have the best experience possible with your website.
Before we get into the details, let’s start with one vital question.
Where does Google PageSpeed Insights data come from?
This is the first thing you should ask yourself when working with any speed testing tool.
In PSI, the information comes from both lab tests and real user monitoring.
For the optimization score and the Lab Data section, PSI runs a test on a predetermined device and network settings. Based on this test, PSI computes the lab metrics, which in turn make up the optimization score.
On the other hand, the data for the Core Web Vitals assessment comes from real users. It’s collected by the Chrome User Experience Report (CrUX) and represents how real people experience your site. That’s why Google uses it as a ranking factor.
With that in mind, let’s dive a little into each section.
Google PSI: Optimization score and lab data audit
The optimization score is usually what people focus on in PSI.
The score simplifies performance by making things binary. Green is good, red and orange aren’t. It’s a useful heuristic, especially for newcomers.
However, as I said, the score doesn’t take into account real-user metrics. This is a problem, since a green score looks good, but that doesn’t necessarily mean a page is fast for visitors.
That said, the score is still valuable. You can only reach the coveted green result by implementing best practices like keeping the site’s code clean, caching, optimizing images, and removing render-blocking resources.
These techniques improve your lab metrics and tend to have a positive impact on the actual user experience.
That’s why you can use the score to somewhat gauge if a page’s performance is trending in the right direction.
Truth revealed: Opportunities and diagnostics
The Opportunities and Diagnostics sections in the Google PageSpeed Insights report are a goldmine of speed optimization tips, techniques and best practices.
Explaining all of them would take a few articles, but it’s worth mentioning the must-haves for any site:● Defer offscreen images
Image files are often huge compared to other resources. Also, most users don’t even look at every image on a page. That’s why serving all images to the browser at once is a waste of resources.
Deferring (lazy loading) offscreen images makes sure they’re loaded only when someone needs them. This technique can massively reduce initial page load time. Lazy loading also helps the browser prioritize the loading of critical images, like those above the fold.
● Serve images in next-gen formats
Another big win in terms of image optimization is to serve next-gen formats. These formats have great compression and quality characteristics. Put simply, they can be smaller in size while keeping a comparable quality with older formats like JPEG.
Popular modern formats are JPEG 2000, AVIF and WebP. Currently, only WebP has enough browser support to be viable for most website owners. However, note WebP is still not fully supported by Safari and Internet Explorer (at least as of mid-2021). If that’s an issue, you should keep a JPEG version and serve it as a backup to these browsers.
● Reduce the impact of third-party code
Third-party scripts can sometimes prevent your own scripts from executing on time. They also increase the amount of code that has to be executed, leading to increased resource consumption and slow load times.
Consider which scripts provide the most value to the user and prioritize them.
This is a common problem for WordPress and other CMS sites since they rely heavily on third-party plugins. Choose plugins carefully and monitor their effect on your site’s performance. Always keep in mind that each tool, plugin and library adds overhead to your server.
● Serve static assets with an efficient caching policy
Caching is perhaps the most important technique for improving web performance. Caching means storing a copy of your site’s resources in a separate location than your origin server. That could be directly on the user’s device (via browser caches) or on a server that’s closer to the user (via Content Delivery Networks).
A lot of resources can be cached for a long time. For example, logos, downloadable files, images and even fonts. Caching dynamic content is also possible, but it takes more effort. If you’re just starting out, consider getting a caching tool to automate most of the work for you. There are tons of caching solutions for popular platforms like WordPress.
Field data (Core Web Vitals) assessment
Saving the best for last: Your field data assessment is the most important part of the Google PageSpeed Insights report.
Again, the data here is collected from real users. It shows their experience on your site, which is the only thing that matters.
The four field metrics you can find here are:
- First Contentful Paint (FCP). FCP tracks when the first DOM element appears on screen. To be in the green zone, a page’s FCP should occur in less than 1.8 seconds for 75% or more of all recorded page loads. FCP optimization techniques: Optimizing images, removing render-blocking resources and reducing your site’s reliance on third-party plugins and libraries.
- Largest Contentful Paint (LCP). LCP measures when the largest above-the-fold content element appears on screen. To pass the LCP assessment, a page’s largest above the fold element should appear in less than 2.5 seconds for 75% or more of all recorded page loads. LCP optimization techniques: The techniques for optimizing FCP also help with LCP. One additional trick for pages where the largest element is an image is to preload that image.
- Cumulative Layout Shift (CLS). This metric tracks how much unexpected layout shifts affect the visual stability of a page. Unexpected shifts happen when content moves around without prior user input. CLS is a bit trickier to measure, so check out this article if you want more details on how Google computes this metric. CLS optimization techniques: Adding width and height attributes to images and videos, reserving enough space for dynamic content and optimizing font delivery.
- First Input Delay (FID). FID tracks the delay between a user’s first interaction and the browser’s ability to respond. That delay should be less than 100ms for 75% or more of all recorded page loads. FID optimization techniques: The main problem with FID is usually excessive JavaScript usage. If you have poor FID scores, you should get a developer to optimize the code you’re shipping. This requires more resources, but the speed gains can be huge. Even a single line of inefficient JavaScript code can make a page significantly slower.
You can find the percentage of page loads that met the criteria for each metric in the bar below its name.
Lastly, don’t worry if PSI doesn’t provide a field data report for a page. This is common for new pages or low-traffic sites.
Implement the tips from the Opportunities and Diagnostics sections as well as other best practices. As your site grows, PSI will eventually provide a Core Web Vitals report and you’ll see the true impact of these optimizations on the user experience.
Just remember that the goal of web performance is to improve page experience for real people. If your lab scores look good, but the field metrics are in the red, you still have work to do.
More page speed tips and best practices
A crucial thing to remember about web performance is that it’s not a “one and done” type of deal. It’s a process that takes time and continuous effort.
That’s why it’s essential to test important pages regularly. Doing so ensures you spot performance issues early and react accordingly.
Also, Google determines whether a page passes the Core Web Vitals evaluation for the previous 28-day period. You should use PSI at least once a month.
Another good way to keep track of your site’s field data is the new Core Web Vitals report in Google Search Console.
It provides information about collections of pages with common Core Web Vitals problems. It’s an easy way to find issues that affect large portions of your site.
Beyond Google PageSpeed Insights
While Google’s speed testing tools are definitely useful, they’re not the only game in town. Other, more advanced tools provide a broader view of your site’s performance.
For example, WebPageTest lets you test from various locations, devices and network connections. This can help you understand how different users could potentially experience your site.
Besides that, you can find tons of other useful information, like waterfall charts, processing breakdowns and others.
Again, this is only lab data, so take it with a grain of salt. Nothing can fully replace field metrics and you should continue optimizing your site until there’s a tangible improvement in the real-user metrics.
Finally, make sure to monitor your site’s performance after changing something in its code or adding third-party plugins, tools, or libraries. These changes often create speed issues, which can remain undetected for a long time.
Better.
Faster.
Amazing every time.
A CX that drives loyalty + bottom lines starts HERE.