Your web traffic is dwindling, bounce rate is soaring, conversions are sub-par…
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.
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
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.
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:
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.
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.
If you run a PageSpeed today, you can flip through four different types of scores:
3. Best Practices
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).
On a more technical note, we recommend you open our How PSI views your website post in a separate tab for later reading.
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:
Explore possible solutions in the open GitHub thread. Keep in mind you might need extra help from a developer as these get technical.
A tri-color scoring system will help you spot where your webpage is doing well and where it needs some extra attention.
Green means good performance
Yellow shows you there’s room for improvement
Red indicates poor performance
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:
Right, let’s move on to the Core Web Vitals panel – the key player in your online business success.
Google prioritizes user experience explicitly and measures it via the performance metrics you see below.
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. 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.
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 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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
A great website that ranks high, attracts tons of traffic, and converts is not far behind!
Lora has 7+ years of experience developing in-depth, specialized content for SaaS companies in the CEE region. She has sourced and collaborated with subject-matter experts on site speed optimization for WordPress, Core Web Vitals, and the future of web performance. "If you can't explain it to a 7-year-old, you've not researched it well enough" is Lora's guiding principle when publishing professional insight for complex technical topics.