Login
Sign Up
A Complete Guide on PageSpeed Insights Reports
It's time to understand the magic behind those numbers
A Complete Guide on PageSpeed Insights Reports

A Complete Guide on PageSpeed Insights Reports

Undoubtedly, we are all trying to get to the almighty 90+ green scores on Google’s PageSpeed Insights. That’s why we thought it would be a great idea to drill down into how PageSpeed Insights reports are calculated and how to fully leverage the information they provide.

 

 

PageSpeed Insights: The Origin Story

 

 

PageSpeed Insights was introduced by Google back in 2010 as part of the PageSpeed family of tools, specifically created to propel website performance optimisations. (Curiously, in the same year Google also launched the algorithm update that made website speed a direct ranking factor for Desktop searches). Since late 2018 PageSpeed Insights is powered by Lighthouse, which means that it generates data based on the Lighthouse API. 

 

 

In short, PageSpeed Insights (PSI) simple purpose is to analyze the performance of your website’s pages on both mobile and desktop devices and provide (actionable) suggestions on how to make them faster. 

 

 

The reports that you get from Page speed insights will feature two types of data about the pages you test: Lab and Field data

 

 

So what’s the difference between these two? Well, the names are actually pretty telling. 

 

 

Field data (also known as RUM or Real User Monitoring) is using actual page loads data and as such is super effective in capturing real-world bottlenecks in user experience. However, due to the limited set of metrics, its debugging potential is significantly diminished. 

 

 

Lab data, on the other hand, is collected in a controlled environment (consisting of predefined devices and network settings). This naturally makes it effective for debugging and test reproduction but also increases the likelihood of missing any real-life UX issues.

 

 

What you get: The Report Structure Explained

 

 

With all the background info cleared up, we are ready to dive right into what you are actually here to read about - understanding what the reports are really telling us. 

 

 

Below we have the full report on our website - nitropack.io, broken down in meaningful sections to consider. 

 

 

So let’s start from the top - The Performance score

NitroPack's Performance Score

 

 

The performance score is determined by Lighthouse collection and analysis of Lab data on the tested page and essentially constitutes a weighted average of the metrics in the section. 

 

 

The performance score for any page is a number between 0 and 100. Obviously 0 is the worst possible score and according to Google, having it usually indicates an error in Lighthouse. The best possible result is a 100 (which places your page in the 98th performance percentile). 

Keep reading and you will get more details on just how the performance score is calculated in the section The formula behind the Performance Score below.

 

 

Real-World Field Data

 

NitroPack's report - Field data

 

 

The Field data stats are based on the last 30 days real-life Chrome users experience (derived by cross-referencing the tested URL with the Chrome User Experience Report dataset). The two metrics reported in this section are the First Contentful Paint (FCP) and First Input Delay (FID) and based on their values, an overall label is calculated from the field data.

 

 

PageSpeed Insights classifies the Field data received in 3 buckets - fast, medium and slow (marked with green, orange and red, respectively) based on the thresholds below:

 

 

 

 

The color coded representation of the FCP and FIP in the PageSpeed report shows the percentage distribution of the different speeds of real-life experiences. The idea is to allow developers to understand the ranging speed values for the tested URL. The numbers, featured above the distribution bars, are specifically selected to point out to developers the MOST disappointing real-life user experience*.

 

*Google explains their motivation to prominently report the numbers of the 75th percentile for First Contentful Paint (in seconds) and the 95th percentile for First Input Delay (in milliseconds) as to stimulate webmasters/marketers to meet minimum performance standards even under the harshest device and network conditions.

 

 

Lab Data

 

NitroPack's Report - Lab Data

 

 

PageSpeed Insights uses Lighthouse to analyse performance on a simulated mobile network and device (we got more details on this in the section The formula behind the Performance Score or you can check out Google’s documentation). 

 

 

In the next sections, we will focus on PageSpeed Insights Audits which Lighthouse separates in three sections. 

 

 

Opportunities

 

 

 

The Opportunities Audit features specific recommendations on metrics to improve that will lead to direct improvement in the page loading time. PageSpeed Insights also provides an estimated enhancement in speed if each optimisation suggestion is successfully implemented.

 

 

Diagnostics

 

NitroPack's Report - Diagnostics

 

The Diagnostics audit gives developers extra information about how well the  page complies with Google’s best practices in web development. These suggestions do not impact the performance score directly but can point out to valuable code optimisations.

 

 

Passed Audits

 

NitroPack's Report - Passed Audits

 

 

The section Passed Audits simply lists all the successfully fulfilled performance checks of your website - and hurray! -  these do not require any further optimisations (at least for now). 

 

 

Report Structure: The Verdict

 

 

PageSpeed Insights popularity could be easily explained after the careful review of the report data and structure. Arguably, much like Google’s other tools and platforms, PSI offers comprehensive, simple to understand and actionable data that leads to quick prioritisation for immediate improvements. 

 

 

For example, PSI’s most prominent metric - the performance score (0 - 100), is a very easy to grasp indicator of your website speed. Also, you do not need to be familiar with the reference values for each metric mentioned in the report to determine if you are doing well in this respect, since the green / orange / red color coding allows you to understand at a glance what are the metrics that should get priority in optimisation efforts. Further, the audit section details specific recommendations (with expected improvement values!) and actionable feedback on what you need to work on to enhance your website’s performance. 

 

 

The formula behind the Performance Score

 

 

I said it before, I will say it again: the PageSpeed Insights report is powered by Lighthouse (in other words the results you see are generated by Lighthouse API). 

 

 

Naturally, the performance score makes no exception - it is actually based on the Lighthouse’s analysis of simulated load (lab data) in the very specific environment of a mid-tier mobile device and (fast 3G / slow 4G) mobile network.

 

 

Google’s Lighthouse Scoring Guide provides an in-depth description of how exactly the score is calculated. What Google emphasises again and again, is that only the items under the Lab Data section contribute to the score. 

 

 

And yes, you guessed it, this specifically means that the suggestions under Diagnostic and Opportunities do not affect your final score.

 

 

The items under the Lab Data section are:

(Btw, if you do not know what some or any of these mean, do not worry, we are soon to publish a detailed Glossary of the web speed optimisation terms):

 

  • First Contentful Paint
  • First Meaningful Paint
  • Speed Index
  • First CPU Idle
  • Time to Interactive
  • Max Potential First Input Delay

 

 

Lighthouse audits your page for each metric and maps the performance against real-world data to determine how your website compares to the benchmarks for this indicator. To give an example, if your website’s First Meaningful Paint (FMP) is 1,200ms (which is what the best performing sites measure), Lighthouse will give you a score of 99 for this specific metric.

 

 

Furthermore, the metrics that contribute to your performance are not equally important to Google, hence they are not given equal weight in the calculation of the final score. You can check out Google’s score weighting spreadsheet for details of how each item impacts the bottom line.

  

 

As with every other metric reported by PageSpeed insights, Google made sure that the green / orange / red color coding is in place:

 

  • 0 to 49 (slow): Red
  • 50 to 89 (average): Orange
  • 90 to 100 (fast): Green

 

PageSpeed Insights Performance Score and SEO

 

 

As we saw above, the performance score for your website is based on thorough analysis of metrics that Google determined as important for speed and UX, therefore the better your score, the better shape your website is in. 

 

 

We went over the approach Lighthouse employs to score websites, and it is clear that the system rewards websites that exhibit solid performance, meaning that if your site offers great UX and speed, your PageSpeed Score is going to reflect that. 

 

 

In other words, if you are getting green (these are the high) scores, Google definitely thinks of your page as a top performer. 

 

 

What Google loves is speed and if your website has it, you are very likely to feel that love (expressed in a better SEO grade and respectively higher SERP position).

 

 

Hence, your PageSpeed score is a great way to get a feeling of how you are doing in the eyes of Google but remember that the relationship is indirect.

 

 

Soo… How to Get a Green Performance Score?

 

 

We know that everyone wants to score 90+/100 - the euphoria of the achievement is just too good to resist. 

 

 

After reading this blog and (hopefully) understanding how the performance score is calculated, it may be easier to get why the perfect score is quite challenging to achieve. And depending on your website technology, it may even be unrealistic :(.

 

 

To do the optimisations yourself means endless hours researching, coding and debugging which for most of us is simply unattainable - after all running the business requires efforts and time on its own without adding the extra task of development. Agencies and dev teams are (often!) putting quite a strain on the budget and require management time and effort. 

 

 

That’s where NitroPack comes in. Our service is simple - you don't need any technical knowledge to use it, and is super powerful. There are no complicated configurations or settings to fine tune. And if something comes up and you got one of our premium plans (does not matter which one), just shoot us a message and we will do it for you.

 

 

Get the best performance scores you have seen for your website - Download NitroPack NOW. 

 

 

And if there are still questions about PageSpeed Insights reports - just drop them in a comment below and we will enlighten you asap :)

 

 

 

 

 

 

 

Stay tuned

Subscribe to our newsletter and stay updated!