PageSpeed Insights – Get to Know the Report
Once you click “Analyze”, you will see a blue loading bar and slowly fill to 100% while PageSpeed Insights gets your report ready.
When your report finishes loading, you should notice that information is grouped under five subheadings: field data, lab data, opportunities, diagnostics, and passed audits.
As we go through the report, you will encounter specific data about page speed and performance along with recommendations for how page speed can be upgraded.
Google also performs audits of web page characteristics that affect page speed. You will be able to review any negative results of those audits in the diagnostics section of the report and any positive results in the “passed audits” section.
The first information you will receive in a PageSpeed Insights report is the field data for the web page URL you entered over the past 30 days. Field data is particularly important because it is collected from authentic user interactions with the web page.
Here’s how to read the example above:
PageSpeed Insights shows field data from the past 30 days for First Contentful Paint (FCP) and First Input Delay (FID).
FCP measures how long it takes between when the page-load is initialized and when the first piece of content is rendered on the page. In this example, the bar is divided into 35% green (fast), 44% orange (moderate) and 21% red (slow). PageSpeed Insights is telling us that:
- 35% of users experienced a fast loading time for this page of < 1 s
- 44% of users experienced a moderate loading time for this page of 1-3 s
- 21% of users experienced a poor loading time for this page of > 3 s
FID measures what happens when users interact with the web page. A longer delay means that the web page takes a long time to respond to user input, usually because the main thread is busy loading something else on the page. In this example, PageSpeed Insights is telling us that:
- 93% of loads for this page had a low FID of < 100 ms
- 4% of loads for this page had a moderate FID of 100-300 ms
- 3% of loads for this page had a high FID of > 300 ms
Unlike field data that is generated from user-collected data, Lab Data is generated by Google Lighthouse. Lighthouse simulates page loading on a mid-tier device using a mobile network to generate page speed measurements that are standardized for device type and network configuration.
- First Contentful Paint (FCP) – a measure of the time between when the user first accessed the page when the first piece of content was rendered on the page.
- First Meaningful Paint – a measure of the time between when the user first accessed the page and when the primary above-the-fold content became visible to the user.
- Speed Index – an indexed measure of how quickly content on the page is displayed during the time that the page is loading. The speed index is calculated by capturing a video of a page loading in the browser and computing the visual changes between each frame of the video.
- First CPU Idle – a measure of the length of time between page initiation and when the page becomes minimally interactive or able to receive user input.
- Time to Interactive – a measure of the length of time between page initiation and when the page becomes fully interactive.
- Max Potential First Input Delay (FID) – a measure of the maximum time between when a user interacts with the web page and when the browser responds to the interaction.
With these six measurements, webmasters gain end-to-end visibility of the loading process for an individual web page.
You will also notice that some of the measurements in the above example are color-coded: green for fast, orange for moderate, and red for slow. This makes you find problem areas more quickly.
In this case, a fast FCP measurement for the page indicates that it starts loading quickly; however, there could be opportunities to make this web page more responsive by introducing page speed optimizations that would decrease the First CPU Idle and Time to Interactive measures.
What do these numbers even mean?
To make things crystal clear, there is no absolute goal that you need to reach that will make you have perfect site speed. These numbers that PageSpeed Insights is providing are simply benchmarks for where they believe you should be to be considered good or great.
Any time that is colored green is considered great, and no changes need to be made. Even if the color is orange, you are most likely in a good spot and may want to tweak a few things on your website to improve load times.
Once you start bleeding into the red, that is when you should take action.
But how much do you need to improve? Any changes and improvements in load time will be helpful.
So the big thing is to try not to focus on the numbers themselves but focus on the opportunities to improve and execute them.
The third section of the PageSpeed Insights report lists the best available opportunities to make performance improvements to the target webpage.
The best feature of the opportunities report is that you’ll be able to see an estimate of how much each issue is impacting your overall page speed. This makes it easier to identify the best opportunities for improvement.
PageSpeed Insights usually highlights the three top opportunities for optimization that it identifies from the analysis. Some of the most common recommendations are:
- Eliminate Render-Blocking Resources – render-blocking resources include scripts, stylesheets, and HTML imports that the target web page is scripted to fetch and execute before it finishes loading the full page. Render-blocking resources should be deferred or marked with an async tag while critical JS/CSS scripts should be delivered inline.
- Reduce Server Response Time – Slow server response times directly lead to longer page load times.
- Remove Unused CSS – Any stylesheets with dead rules or unused plug-ins that load on the page can negatively impact page speed.
- Enable Text Compression – If a web page loads a text-based script or CSS with large file size, it should be served with compression to minimize network load.
- Enable Image Compression – If a web page loads large image files, it will load slowly. Compress images to minimize their size without sacrificing quality to an unacceptable level.
For each opportunity that PageSpeed identifies on a web page, it provides listings of specific scripts, stylesheets, files, or images that should be optimized. Click on the downward-facing arrow on the right side of the screen to get specific recommendations for each opportunity identified in your report.
PageSpeed Insights performs a whole battery of diagnostics tests and audits to assess various aspects of page performance. In the Diagnostics section, you’ll find more specific details about your page speed loading times and performance. You’ll also receive actionable information to start building your optimization activities.
The example report above offers critical insights into why the web page is loading slowly.
According to this diagnostic, there are 1795 elements loading on the page, and the server is spending too much time parsing, compiling, and executing JS (scripts).
To optimize the page, a web developer should review the elements and scripts that load on the page, remove unnecessary items, inline any essential scripts or CSS, and defer the retrieval of any files that are non-essential.
The report section on Passed Audits lists all the areas of the analysis where the web page performed well. You want as many items as possible to show up in here! This means that you are properly optimizing your website to perform from a site speed standpoint.