If I say that ‘a better user experience starts with a fast-loading website,’ most of you, if not all of you, would agree. In this day and age, who would want to browse a site that takes forever to load?
Studies show that people are abandoning websites if they take too long to load. Instant gratification of the web has made us all more impatient. That means each second matters a lot.
Google Pagespeed Insights (PSI) is one of the tools we use to see the performance of our websites in terms of loading speed.
What has changed and why is it good?
PSI now uses Lighthouse as its analyses engine. This change has occurred in order to streamline all Google’s tools that are used to measure the performance of websites.
In addition to that, PSI now shows real-world performance data provided by Chrome User Experience Report (CrUX). It is called ‘field data’ in PSI.
All these changes have ensured that what we see as the score and suggestions are based on the actual performance data. Previously, the scores were given by merely looking at the source code of the page and comparing it with a set of best practices.
Also, with field data we get a real picture of what is happening under real-life network conditions.
Let’s take a look at a PSI report in detail.
Field Data
This shows the average load time of the page we check, and the origin based on the aggregated data in CrUX.
Following are the two values shown:
- First Contentful Paint (FCP) – Time it takes the user to see any visual content (text, image, etc.) appearing on the screen
- First Input Delay (FID) – Time taken by the browser to respond when the user first interacts with your site (tap on a button, click on a link, etc.)
It says that “the 90th percentile of FCP and the 95th percentile of FID” values are shown. What does that actually mean?
If the FCP value is 3s, that means 90% of the loads had an FCP value of 3s or less. In the same way, if the FID value is 170ms, then 95% of the loads had an FID value of 170ms or less.
An explanation is given by Google on why the different percentiles were chosen in the FAQ section of PSI.
“Our goal is to make sure that pages work well for the majority of users. By focusing on 90th and 95th percentile values for our metrics, this ensures that pages meet a minimum standard of performance under the most difficult device and network conditions.”
PSI rates whether the page we test is slow, average, or fast, based on those values. The thresholds for classification are as below:
Overall field data categorization is performed under following conditions,
- Fast: If both FCP and FID are Fast
- Slow: If any either FCP or FID is Slow
- Average: All other cases
Worth noting is that the field data may not be available for all the sites.
Field data will most probably be different from what you will see as the lab data. The data points are recorded under different network conditions and devices, and what you see is an averaged value.
Lab Data
Lab data is collected by analyzing the page using Lighthouse. Moto G4, which is considered a mid-tier device, is used on a mobile network as the simulation environment.
You can see the following six metrics. These can sound little bit technical, but try to get a basic understanding of them.
- First Contentful Paint – Already described above.
- Speed Index – How soon we can see the content of a page is being populated. The lower the time, the better.
- Time to Interactive (TTI) – How quickly a page becomes fully interactive to the user. Follow this link to see under which conditions the interactivity is defined.
- First Meaningful Paint – Time it takes an important (meaningful) element of the site to become visible to the user. What is meaningful can vary from one site to another. As a general rule, hero elements are considered the most important section of a webpage.
- First CPU Idle – Time taken by a page to become minimally interactive (most of the UI elements are interactive and the page responds to user inputs within a reasonable amount of time). This differs from TTI.
- Estimated Input Latency – How long your app or page takes to respond to a user input during the loading time, measured in milliseconds. A good explanation about what is happening under the hood is provided in the following page; read the estimated input latency section. Users expect things to happen quickly. Otherwise, they feel that the app or page is lagging. Best practice is to keep latency under 50ms.
Under these metrics you can see a sequence of images that show how your page loads in the browser.
According to Google, a score above 90 is considered to be good.
Opportunities
You can see a list of opportunities to exploit to further improve your site’s performance. It shows the estimated savings in load time, followed by a brief description about the opportunity. A resource link is provided after the description, which helps you to get a detailed explanation and action steps to follow.
Diagnostics & Passed Audits
A list of diagnostics shows the best practices in web development and to what level the page adheres to them. Passed audits are the areas where we have done well.
What if my score is 90+?
So you’ve scored 90+ for your site. Now you can sit back and relax because your site is doing great … isn’t it?
Do not get too obsessed with the high score you get. Always think of ways you can further enhance your site’s speed.
Factors like using a premium hosting service and a content delivery network will hugely improve the loading speed of your site.
Final Thoughts
There is a lot of technical mumbo-jumbo that come across when trying to understand a PSI report. Just do not go overboard with the terms. Try to get an overall picture of what is happening with your site according to PSI.
Some of the suggestions you see in a report like this may be really hard to achieve by an average person because they are too technical.
If you are using WordPress, then some of these tasks can be fulfilled by using plugins. Make sure you only use plugins that are recommended by the WordPress community.
Let us know your thoughts in the comments below.
Leave a Reply