PageSpeed Insights (PSI) Tool For Better Web Experience Evaluation

One reason why a site speed test using something like the PageSpeed Insights (PSI) Tool is important is that consumers increasingly rely on mobile to access digital content and services. And, if you look at your site analytics, you’ll probably see this story playing out in your own data. Consumers are also more demanding than they’ve ever been to find fast sites.

As a result, whenever they weigh the experience on your site, they aren’t just comparing you with your competitors, they’re rating you against the best-in-class services they use every day. When you’re building a modern web experience, it’s important to measure, optimize, and monitor your overall website performance — that’s if you’re ready to get fast and stay fast.

It’s no wonder that the entire web industry has grown around the ability to acquire #1 results in Google — or at least as close as we can get. To be #1, however, you need to have a fast site. And also, know what Google wants as well — give it what it wants better than anybody else. That’s a tricky proposition, though, because Google usually examines over 200+ factors.

More so, in order to consider sites using its ranking algorithm — it makes changes to that algorithm almost now and then. Mostly some of them are quite small to even notice, but some of them are quite large — so, it’s something worth considering. For this reason, that’s where one of its uttermost recommended PageSpeed Insights (PSI) Tool comes to the rescue.

What The PageSpeed Insights (PSI) Tool Is All About

Technically, the PageSpeed Insights (PSI) Tool reports on the overall performance of a page on both mobile and desktop devices. And then, it provides suggestions on how that page may be improved. The PSI Toolkit provides both lab and field data about a page. Lab data is useful for debugging performance issues, as it is collected in a controlled environment.

However, it may not capture real-world bottlenecks. Field data is useful for capturing true, real-world user experience – but has a more limited set of metrics. The PSI tool is available on both the web and as an API for all webmasters — discover what your real users are experiencing. Learn how your site has performed, based on data from your actual worldwide users.

Real-user experience data in PSI is powered by the Chrome User Experience Report (CrUX) dataset. PSI reports real users’ First Contentful Paint (FCP), First Input Delay (FID), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS) experiences over the previous 28-day collection period. PSI also reports experiences for experimental metrics.

Such as Interaction to Next Paint (INP) and Time to First Byte (TTFB) as well. However, in order to show user experience data for a given page, there must be sufficient data for it to be included in the CrUX dataset. A page might not have sufficient data if it has been recently published or has too few samples from real users.

Learn More: Core Web Vitals | 9 Key Tools For Overall Site Performance

When this happens, PSI will fall back to origin-level granularity, which encompasses all user experiences on all pages of the website. Sometimes the origin may also have insufficient data, in which case PSI will be unable to show any real-user experience data. PSI classifies the quality of user experiences into three buckets: Good, Needs Improvement, or Poor.

Notably, the PageSpeed Insights (PSI) Tool presents a distribution of these metrics so that developers can understand the range of experiences for that page or origin. This distribution is split into three categories. Whereby, these field metric values are classified as either good, needs improvement, or even poor — by applying the same thresholds as shown below.

Core Web Vitals	Good	Needs Improvement	Poor
FCP	[0, 1800ms]	(1800ms, 3000ms]	over 3000ms
FID	[0, 100ms]	(100ms, 300ms]	over 300ms
LCP	[0, 2500ms]	(2500ms, 4000ms]	over 4000ms
CLS	[0, 0.1]	(0.1, 0.25]	over 0.25
INP (experimental)	[0, 200ms]	(200ms, 500ms]	over 500ms
TTFB (experimental)	[0, 800ms]	(800ms, 1800ms]	over 1800ms

Each metric has a score and label icon:

Firstly, Good is indicated with a Green Circle
Secondly, Needs Improvement is indicated with an informational Amber Square
Thirdly, Poor is indicated with a warning Red Triangle

For example, seeing 11% within LCP’s amber bar indicates only one thing. That 11% of all observed LCP values fall between 2500ms and 4000ms. Above the distribution bars, PSI reports the 75th percentile for all metrics.

The 75th percentile is selected so that developers can understand the most frustrating user experiences on their site.

In short, performance plays a very significant role in the success of any online venture. After all, high-performing sites engage and retain users better than poorly performing ones. Sites should focus on optimizing for user-centric happiness metrics. There are a few reasons why a site speed test on its performance is important.

Why Speed Performance Is Important

There is a good reason why speed matters for site owners and webmasters alike. On one side, consumers increasingly rely on mobile to access digital content and services. And if you look at your site analytics, you’ll probably see this story playing out in your own data. On the other side, consumers are also more demanding than they’ve ever been in terms of speed.

And when they weigh the User Experience (UX) on your site, they aren’t just comparing you with your competitors! Otherwise, they’re rating you against the best-in-class services they use every day. Performance plays a major role in the success of any online venture. High-performing sites engage and retain users better than low-performing ones.

Learn More: How To Interpret Your Google PageSpeed Insights Scores

In other words, performance is a foundational aspect of good user experiences. When sites ship a lot of code, browsers must use megabytes of the user’s data plan in order to download the code. Mobile devices have limited CPU power and memory. They often get overwhelmed with what we might consider a small amount of unoptimized code.

As a result, this creates poor performance which leads to unresponsiveness. Knowing what we know about human behavior, users will only tolerate low-performing applications for so long before abandoning them. Poorly performing sites and applications can also pose real costs for the people who use them. There are a few reasons why speed performance matters.

Performance Is:

retaining users
User Experience (UX)
all about the web users
improving conversions

Poorly performing sites and applications can also pose a negative impact on business goals in terms of real costs. In reality, this means that performance is all about improving conversions. That’s why retaining users is crucial to improving conversions. Slow sites have a negative impact on revenue, and fast sites are shown to increase conversion rates.

In addition to saving your users money, fast and lightweight user experiences can also prove crucial for users in crisis. Public resources such as hospitals, clinics, and crisis centers have online resources that give users important and specific information that they need during a crisis. Suffice it to say, while web design is pivotal in presenting important information efficiently in stressful moments, the importance of delivering this information fast can’t be understated.

The Core Web Vitals Evaluation For Better Experiences

Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you’re a business owner, marketer, or developer, Web Vitals can help you quantify the site experience and identify ways to improve it.

Web Vitals is an initiative by Google — unified guidance for quality signals that are essential to delivering a great web user experience. Google has provided a number of tools over the years to measure and report on performance. Some developers are experts at using these tools, while others have found the abundance of both tools and metrics quite challenging.

The Main Performance Tools To Consider:

Lighthouse: Gives you personalized advice on how to improve your website across performance, accessibility, PWA, SEO, and other best practices.
WebPageTest: This allows you to compare the performance of one or more pages in a controlled lab environment, deep dive into performance stats, and test performance on a real device. You can also run Lighthouse on WebPageTest.
TestMySite: This allows you to diagnose webpage performance across devices and provides a list of fixes for improving the experience from Webpagetest and PageSpeed Insights.
PageSpeed Insights: Shows speed field data for your site, alongside suggestions for common optimizations to improve it.
Speed Scorecard: This allows you to compare your mobile site speed against your peers in over 10 countries. Mobile site speed is based on real-world data from the Chrome User Experience Report.
Impact Calculator: This allows you to estimate the potential revenue opportunity of improving your mobile site speed, based on benchmark data from Google Analytics.
Chrome Developer Tools: This allows you to profile the runtime of a page, as well as identify and debug performance bottlenecks.

Site owners should not have to be performance gurus in order to understand the quality of experience they are delivering to their users. The Core Web Vitals is an initiative that aims to simplify the landscape and help sites focus on the metrics that matter most to them as well as their web users — the Core Web Vitals.

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

How To Measure Speed Performance?

Real-world performance is highly variable due to differences in users’ devices, network connections, and other factors. For example, if you load your website using a cable network connection in your office and compare it against the load using WiFi in a coffee shop, the experiences are likely to be very different. There are many tools on the market today.

Tools that can help you collect lab or field data to assess page performance. As an example, you can consider the PageSpeed Insights Tool in this case. It provides both lab and field data about a page. It uses Lighthouse to collect and analyze lab data about the page, while real-world field data is based on the Chrome User Experience Report dataset.

Equally important, the Chrome Developer Tools are yet another great toolkits to consider. To enumerate, Chrome Developer Tools is a set of web developer tools built directly into the Google Chrome browser. It allows you to profile the runtime of a page, as well as identify and debug performance bottlenecks. You can also use Lab Data and Field Data toolkits.

Get Started: Website SEO Checker Extension: For Free Audit & Analysis

On one side, Lab Data is performance data collected within a controlled environment with a predefined device and network settings. While, on the other side, Field Data (also called Real User Monitoring or RUM) is performance data collected from real page loads — as experienced by your users in the wild. Each type has its own strengths and limitations.

Field Data helps capture the true real-world user experience and it enables correlation to business KPIs. But, it has a restricted set of metrics and limited debugging capabilities. Lab Data offers reproducible results and a debugging environment, but might not capture real-world bottlenecks and cannot correlate against real-world page KPIs.

With lab data, you need to understand your users’ typical devices and networks and appropriately mirror those conditions when you test performance. Have in mind that even in areas with 4G, users may still experience slower or intermittent connections when in elevators, while commuting, or incomparable environments. One great field data tool is Lighthouse.

Generally, Lighthouse takes a URL and runs a series of audits against the page, generating a report on how well the page did. There are multiple ways to run Lighthouse, including an option to easily audit a page from within Chrome DevTools. Chrome User Experience Report (CrUX) provides metrics for real-world Chrome web users’ experience of popular destinations.

Lighthouse separates its audits into three sections:

Opportunities: provide suggestions on how to improve the page’s performance metrics.
- Each suggestion in this section estimates how much faster the page will load if the improvement is implemented.
Diagnostics: provide additional information about how a page adheres to best practices for web development.
Passed Audits: indicates the audits that have been passed by the page.

As we mentioned earlier, the PageSpeed Insights (PSI) Tool uses Lighthouse to analyze the given URL, generating a performance score that estimates the page’s performance on different metrics. Including First Contentful Paint, Largest Contentful Paint, Speed Index, Cumulative Layout Shift, Time to Interactive, Total Blocking Time, and other metrics.

Important to realize, that at the top of the section, PSI provides a score that summarizes the page’s simulated performance. This score is determined by running Lighthouse to collect and analyze diagnostic information about the page. A score of 90 or above is considered good. 50 to 90 is a score that needs improvement, and below 50 is considered poor.

As aforementioned, PageSpeed Insights is a great tool that reports on the aggregate page-level and origin-level performance. In addition, it provides suggestions on how to improve performance. If you’re looking for a single action to take in order to get started with measuring and improving your site’s Web Vitals, we recommend using PSI to audit your site.

The PageSpeed Insights (PSI) Tool Techniques For Improving Speed

The first thing is to get started with improving your website speed. Read up on the Core Web Vitals to learn about the metrics that Google believes all websites should focus on. And then, check out fast load time materials for lots of tips and tricks related to getting fast and staying fast.

When you’re building a modern web experience, it’s important to measure, optimize, and monitor if you’re to get fast and stay fast. Performance plays a significant role in the success of any online venture, as high-performing sites engage and retain users better than poorly performing ones. Sites should focus on optimizing for user-centric happiness metrics.

At all costs, tools like Lighthouse (baked into the web dev!) highlight these metrics and help you take the right steps toward improving your performance. To “stay fast”, set and enforce performance budgets to help your teamwork within the constraints needed to continue loading fast and keeping users happy after your site has launched.

1. Set Performance Budgets:

Performance budgets 101
Your first performance budget
Incorporate performance budgets into your build process
Use Lighthouse for performance budgets
Using bundlesize with Travis CI
Using Lighthouse Bot to set a performance budget
Performance monitoring with Lighthouse CI

2. Optimize Image Files:

Choose the right image format
Choose the correct level of compression
Use Imagemin to compress images
Replace Animated GIFs with video for faster page loads
Serve responsive images
Serve images with correct dimensions
Use WebP images
Use image CDNs to optimize images

3. Lazy-Load Media Files:

Use lazy loading to improve the loading speed
Lazy-loading images
Lazy-loading video
Browser-level image lazy-loading for the web
Use lazy sizes to lazy-load images

4. Optimize The JavaScript:

Apply instant loading with the PRPL pattern
Reduce JavaScript payloads with code splitting
Remove unused code
Minify and compress network payloads
Serve modern code to modern browsers for faster page loads
Publish, ship, and install modern JavaScript for faster applications
How CommonJS is making your bundles larger

5. Optimize Delivery Resources:

Content delivery networks (CDNs)
Prioritize resources
Preload critical assets to improve the loading speed
Establish network connections early to improve perceived page speed
Prefetch resources to speed up future navigations
Fast playback with audio and video preload

6. Optimize Basic CSS:

Defer non-critical CSS
Minify CSS
Extract critical CSS
Optimize CSS background images with media queries

7. Optimize Third-Party Resources:

Third-party JavaScript performance
Identify slow third-party JavaScript
Efficiently load third-party JavaScript
Network quality adaptive serving

8. Optimize Site WebFonts:

Avoid invisible text during font loading
Optimize WebFont loading and rendering
Reduce WebFont Size

9. Measure Field Performance:

Chrome UX Report on PageSpeed Insights
Chrome UX Report to look at performance in the field
CrUX Dashboard on Data Studio
Chrome UX Report on BigQuery
Chrome UX Report API

10. Build A Performance Culture:

The value of speed
How can performance improve conversion?
What should you measure to improve performance?
How to report metrics and build a performance culture
Fixing website speed cross-functionally
Relating site speed and business metrics

In addition to the above PageSpeed Insights (PSI) Tool user tips, you should also consider adaptive serving based on network quality in your strategy. Bearing in mind, that loading a website can be a very different experience depending on the network conditions. Everything is usually smooth when you are on a fast network. But, not when you’re on the go with less.

Such as a limited data plan and spotty connection or you are even stuck with a laptop on slow coffee-shop Wi-Fi — it’s a different story. By all means, Core Web Vitals are a common set of performance signals critical to all web experiences. Not forgetting, that the Core Web Vitals metrics may easily be aggregated at either the page or origin level.

Learn More: Evaluating Page Experience For A Better Web Guideline

Eventually, for aggregations with sufficient data in all three metrics, the aggregation passes the Core Web Vitals assessment if the 75th percentiles of all three metrics are Good. Otherwise, the aggregation does not pass the assessment. If it has insufficient data for FID, then it will pass the assessment if both the 75th percentiles of LCP and CLS are Good.

On the contrary, if either LCP or CLS has insufficient data, the page or origin-level aggregation cannot be assessed. That said, you can also learn the difference between the field data in PSI versus the CrUX dataset on BigQuery in detail.

Takeaway Notes:

Realistically, the ultimate dream of every website owner is to have a fast site. Users’ demands have risen, but their tolerance has dwindled. So, do not take risks with your website optimization. To receive a lot of traffic to your site then be sure it won’t slow down when they arrive and optimize your site accordingly. Every website owner desires a huge number of visitors.

In addition to the above metrics, you should also try and create 10X product or service solutions. When your product or service is recognized as the best in its class, your job as SEO becomes much, much easier. You should also try and make sure that your customer service support is always in place and on the check. To avoid any customer/user journey errors.

Of course, no one who’s watched the United Airlines meltdown needs to be sold on the value of customer service as an effective asset for off-site SEO. The brand will be paying for that epic disaster for years as millions of folks continue to share the video and images of the event. Likewise, to optimize WordPress website speed, focus on searchers’ intent.

To Fine-Tune Site For Performance:

To Fine-Tune Site For Speed:

As a rule of the thumb, it turns out the old cliche that “you attract more flies with honey than vinegar” is very relevant to SEO. Typically, most people on the World Wide Web (WWW) are more willing to buy and use your products and services if they can first find them, and quickly. This process may be as simple as fixing broken links.

Or rather, making sure that all of your page titles are properly formatted — or it could involve some heavy lifting like rewriting content or restructuring code. Either way, the important thing is that every change you make has been made with the end goal of improving your site’s ranking with Google and other search engines.

PageSpeed Insights (PSI) Tool For Better Web Experience Evaluation