TL;DR: Google’s PageSpeed Insights (PSI) is the most popular speed testing tool. It helps site owners analyze webpage speed for free. The test determines your web page’s performance on desktop and mobile. The speed and Core Web Vitals scores inside the PSI report help you pinpoint areas of improvement. Opportunities and Diagnostics offer more details on issues that affect how real-world users interact with your online business.
Your web traffic is dwindling, bounce rate is soaring, conversions are sub-par…
What gives?
One area you should definitely inspect is your site’s web performance!
With this guide, you’ll master the fastest (and easiest) way to test your website’s speed using the Google PageSpeed Insights tool, how to read your reports, and what steps to take next to fix any performance issues.
What is Google PageSpeed Insights (PSI)?
PageSpeed Insights is a site performance testing tool that analyzes load time, responsiveness, and visual stability for a specific webpage on mobile and desktop.
It is used for free speed audits (based on both lab and field data) that give you an estimated performance overview and suggestions for improvement.
New words alert
Lab data (also called synthetic data) shows how artificially predefined users may interact with your website. It is collected in a controlled environment, and it’s useful for debugging performance issues. Lab data is collected and analyzed using the open-source tool Lighthouse. Both are used in your webpage’s performance report.
In the last 10 years, PSI has become an invaluable diagnostic tool for non-developers who want to see how certain pages are performing. PSI report’s recommendations are a great starting point for anyone searching to improve site speed and performance.
Why should your business care about PageSpeed Insights
Slow-loading websites cost their owners $2.6 billion in losses each year.
On top of that, It takes an average of 10.5 seconds for a website to load.
That’s 8.5 seconds more than what a visitor is willing to wait for before abandoning a website.
In terms of web performance, this seemingly small gap is where a whopping 61% of sites globally are struggling the most.
A study by Portent shows how page speed can increase conversion rates drastically
There are many performance testing tools out there, but what sets Google PageSpeed apart is that it enables you to look for solutions and make data-driven decisions. Moreover, the PSI report follows the latest web performance best practices set by Google themselves.
Which brings us to the next important question:
Does the Google Page Speed score really matter?
In short, yes!
Your PageSpeed insights report shows you where your site’s excelling, and where it’s underperforming. If your loading speed is bad, you’re risking 6% revenue losses and 11% fewer pageviews per 1s wait time.
A low PSI score indicates technical issues with your website, and it’s best to use it for debugging purposes. But chasing the perfect 100/100 score is not worth your time.
Rather, work on better user experience, helpful quality content, and relevance.
After its recent update, Google PageSpeed now offers a more intuitive and modernized UI, better differentiation between lab and field data, and a clear Core Web Vitals (CWV) assessment.
It comes as no surprise the CWV panel occupies the top position in the PSI report (I’ll walk you through it in a bit). Google has verified time and time again CWV metrics are what really matter if you want your site visitors to stick around and convert.
How is Page Speed score measured?
If you run a PageSpeed today, you can flip through four different types of scores:
1. Performance
2. Accessibility
3. Best Practices
4. SEO
PSI gives the Performance score more priority, both visually and data-wise. It is an average of the following metric scores:
All the metric scores are based on lab data from Lighthouse. Their weight in your overall performance score is determined by the Lighthouse calculator (currently on version 10).
Important: The Performance score is based purely on Lab data! Although it’s tempting to focus on it, shifting your attention to the Core Web Vitals assessment panel is more beneficial for your business. It’s what helps your visitors experience your website in the best possible way.
Lighthouse Update: Google introduced Lighthouse v10. The two major changes include the removal of Time to Interactive, and its 10% score weight was shifted to Cumulative Layout Shift (CLS).
On a more technical note, we recommend you open our How PSI views your website post in a separate tab for later reading.
How to run a test in Google PageSpeed Insights?
Google has made it super easy to use the PSI performance testing tool.
Step 1: Visit the PageSpeed Insights website: https://pagespeed.web.dev/
Step 2: Copy/Paste the URL of the web page you want to test in the field
Step 3: Click the “Analyze” button
Kick back and let PageSpeed gather data from both the Chrome User Experience Report (CrUX) database and the Lighthouse API.
In rare cases, your PSI report might not load, and you will see an error message similar to this one:
If a simple page refresh doesn’t fix it, there are a few reasons why this is happening:
- Server failure with initial request URL
- Server doesn't offer HTTP
- HSTS
- about:blank
- No document request found
- Bad TLS/certificate interstitial
Explore possible solutions in the open GitHub thread. Keep in mind you might need extra help from a developer as these get technical.
How to read your Google PageSpeed Test results?
A tri-color scoring system will help you identify where your webpage is performing well and where it needs extra attention.
Green means good performance
Yellow shows you there’s room for improvement
Red indicates poor performance
Mobile and Desktop report versions
At the top of your PSI report, you can switch between mobile and desktop versions of your web page. By default, the test shows the mobile view first.
Note that a lower Mobile PageSpeed Insights score is completely normal.
Here are a few factors that contribute:
- Mobile devices work with slower processors;
- Mobile devices have device-specific CSS rules (i.e. image resizing, viewport size, etc.);
- PSI tests the mobile network at a slower speed.
Right, let’s move on to the Core Web Vitals panel – the key player in your online business success.
Core Web Vitals Assessment
Google prioritizes user experience explicitly and measures it via the performance metrics you see below.
Important: To improve your site performance (and your KPIs) you should focus on optimizing these metrics. In your PSI report, they are the only ones that are based on Field data, i.e. they represent how your real-world visitors are experiencing your website.
Notice there are two views you can switch between at the top right corner of the panel:
“This URL” shows Core Web Vitals results for the specific web page you’re testing in PageSpeed Insights. “Origin” provides results for the entire domain.
Your Core Web Vitals assessment can be either Passed or Failed. The way these metrics work is you have to pass them all, or you’ll keep getting the Failed status.
Use the Expand View option at the top right corner of the panel to see a threshold breakdown of each metric in %.
Note that this section shows data for the last 28 days, as seen in the strip at the bottom of the assessment. That’s the minimum required period of time before you can see changes in your Core Web Vitals after applying any type of speed and performance optimization.
If your site is relatively new or doesn’t attract a lot of visitors yet, this section might not be available for you. This happens when CrUX hasn’t crawled your website due to insufficient traffic. In such cases, we recommend you use Lighthouse to run a synthetic performance audit to estimate page speed.
Opportunities and Diagnostics
The next section is all about diagnosing performance issues based on lab data. We’ll go over the most common ones and their solutions in a bit.
Click on the scores to jump to their dedicated lists.
You can view the diagnostics list under your Performance score as it is or switch between audits relevant to FCP, TBT, CLS, or LCP.
All diagnostics are expandable, so you can inspect what particular warnings and suggestions refer to.
Note that there’s an explanation under the warning hinting at what improvements you can expect in your Core Web Vitals.
All other scores feature similar panels and include lists you can explore at your own pace.
The Accessibility score determines how available your content is to users regardless of impairments or operational diversity.
The Best Practices score in the PageSpeed report evaluates whether or not your website adheres to guidelines regarding trust and safety, JavaScript, images, source maps, etc.
The SEO score calculates how well your web page follows basic search engine optimization advice. However, keep in mind the checklist does not cover everything that might affect your Google ranking.
What does PageSpeed Insights really tell you?
While the PSI report has significantly improved the way it combines and presents your web page’s performance results, it shouldn’t be the only testing tool you use.
PageSpeed’s algorithm takes hundreds of factors into consideration, so it’s best to take your scores with a grain of salt.
Nonetheless, your speed insights are a handy trampoline to a beginner site speed improvement strategy. Use the reports for:
- Ideas for optimization opportunities
- Fast and free analysis of a project you own entirely
- The latest performance optimization guidelines by Google
Unfortunately, site owners tend to take lab data at face value and often misinterpret their PageSpeed Insights. To truly improve user experience you should focus on actionable long-term solutions and follow how you progress toward your performance goals.
In September, we held a joint webinar with Google where we covered the topic of Core Web Vitals in detail. Watch the recording to learn how you can improve your performance metrics for real-world results.
9 performance warnings in Google PSI to solve next
Now that you’ve learned how to use the PageInsights report, it’s time to roll up your sleeves and start working on fixing your site speed and performance.
It’s no easy task and you might need to consult with a developer. Use the list below to jumpstart your site performance improvements.
1. Minimize main-thread work
The Main Thread is where the browser does most of the work needed to display a page. If it’s blocked, it can’t perform its crucial tasks. This leads to slow load times, unresponsive pages, and a bad user experience. Minimizing Main Thread work lets the browser, paint pixels on the screen faster and be more responsive to the user.
2. Serve Images in Next-Gen Formats
Next-gen image formats like JPEG 2000, JPEG XR, and WebP are the result of people applying modern compression techniques on older image formats (.jpeg, .png, .bmp). From these formats, WebP is the closest to becoming the new default. Serving images in next-gen formats reduces file size significantly while keeping the same quality.
3. Eliminate Render-Blocking Resources
Some CSS and JavaScript files (like stylesheets, script tags) and images may be flagged as render-blocking resources. As the browser goes through a page's HTML, it might be intercepted by such resources. The browser must stop what it's doing, download, parse, and execute them. Eliminate render-blocking resources so crucial actions like visualizing (rendering) the page can be performed.
4. Minify resources
Reducing HTML, CSS, and JavaScript file size is a crucial part of speeding up your website. You can make code files lighter by minifying resources and compressing them. Both are low-effort, high-reward optimizations and it’s smart to get them in one go.
5. Defer offscreen images
Deferring offscreen images (aka Lazy loading images) refers to using a set of techniques to load only the images that visitors are currently looking at. Offscreen images become visible only when the user navigates to them. Deferring them ensures more critical resources are loaded first.
6. Serve static assets with an efficient cache policy
Of all the ways to improve website performance, caching is the most fundamental one. If you want to speed up your site’s performance, reduce your server’s load, and provide visitors with an exceptional experience, you should definitely have an efficient caching policy.
7. Ensure text remains visible during webfont load
Fonts are often large files that take a while to load. They can even block rendering of the text which is what your visitors need the most to navigate your website. That’s why ensuring text remains visible during webfont load is a critical piece of the overall performance strategy.
8. Image elements do not have explicit width and height
One of the main reasons why most websites fail their CLS score is because they don’t have enough space reserved for their image elements. That’s why having explicit width and height attributes can save you from CLS issues and prevent your visitors from experiencing unexpected shifts.
9. Reduce the impact of third-party code
Although it’s impossible to run a website without third-party scripts, there are a lot of optimization techniques you can apply to reduce the impact of third-party code. Doing that will allow you to still make use of useful functionalities without slowing down your site.
Bottom line
Google PageSpeed Insights is worth adding to your performance testing arsenal but don’t forget to use it smartly and focus on the data that matters:
- Scoring 100/100 is not your primary focus. Shift your attention to the Core Web Vitals assessment at the top of your PSI report instead;
- A low Performance score hints at technical site issues, use it for debugging purposes;
- Field data trumps Lab data if you want to reap the benefits of great user experience;
- Revisit the PageSpeed tool to stay in the loop of what Google prioritizes and track your CWV progress every 28 days.
A great website that ranks high attracts tons of traffic, and converts is not far behind!
