Google Page Speed Insights (PSI)
Page Speed Insights (PSI) reports the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved. PSI 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.
Performance Score
A score of 90 or above is considered good. 50 to 90 is a score that needs improvement, and below 50 is considered poor.
Real-World Field Data
When PSI is given a URL, it will look it up in the Chrome User Experience Report (CrUX) dataset. If available, PSI reports the following metric data for the origin and potentially the specific page URL:
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Interaction to Next Paint (INP)
- Cumulative Layout Shift (CLS)
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| FCP | [0, 1000ms] | (1000ms, 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 |
Core Web Vitals
Core Web Vitals are a common set of signals critical to all web experiences. The Core Web Vitals metrics are INP, LCP, and CLS, with their respective thresholds. A page passes the Core Web Vitals assessment if the 75th percentiles of all three metrics are Good. Otherwise, the page does not pass the assessment.
First Contentful Paint (FCP)
The First Contentful Paint (FCP) measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. It marks the first point in the page load timeline where the user can see anything on the screen - a fast FCP helps reassure the user that something is happening.
To provide a good user experience, sites must have an FCP of 1.8 seconds or less.
Largest Contentful Paint (LCP)
The Largest Contentful Paint (LCP) measures the time of the largest image or text block visible within the viewport. Itt marks the point in the page load timeline when the page's main content has likely loaded - a fast LCP helps reassure the user that the page is useful.
To provide a good user experience, sites should strive to have LCP of 2.5 seconds or less.
Interaction to Next Paint (INP)
Good responsiveness means a page responds quickly to interactions. When a page responds to an interaction, the browser presents visual feedback in the next frame it renders to show that the interaction was successful.
A low INP means the page is consistently able to respond quickly to the vast majority of user interactions. An INP equal to or less than 200 milliseconds means your page has good responsiveness.
Cumulative Layout Shift (CLS)
CLS measures the total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. It helps quantify how often users experience unexpected layout shifts - a low CLS helps ensure that the page is delightful.
To provide a good user experience, a site must have a CLS score of 0.1 or less.
Lab data
PSI 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
Audits
Lighthouse separates its audits into three sections:
- Opportunities provide suggestions 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.
Eliminate render-blocking Resources
There are two types of render-blocking URLs: scripts and stylesheets.
A <script> tag in the <head> of the document should have a defer and an async attribute. The defer attribute specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.