Google Search Console's speed report
Starting from early November 2019, the Google Search Console added a speed report to the existing enhancements tools that helps webmasters discover potential user experience problems such as mobile usability.
There is one speed report per device type: mobile and desktop. The data for these reports comes from the Chrome User Experience (CrUX) report. The CrUX report gathers anonymized metrics about performance times from actual users visiting your URL.
The speed report is still in an experimental phase, but it can already be used by site owners to optimize their website by:
- Grouping the urls of their site by speed status: Slow, Moderate, Fast
- Displaying the metrics that can be optimized: first input delay (FID), first contentful paint (FCP).
A website url is considered Fast if both the FID and FCP are Fast. If any of the FID or FCP is Slow, the url is considered Slow. Else, the url is considered Moderate.
The FID or FCP speed status is determined as follows:
After implementing your optimizations to fix speed issues, at most 28 days will be required to validate your fix.
Tools to help you investigate your speed issues
PageSpeed Insights is an online tool that helps you analyse any website's speed performance and provide multiple audits and suggestions to help the site owner optimize the page's performance and load it faster. Separate mobile and desktop reports are generated when using this tool.
2 datasets are used in the resulting analysis report:
- Field Data: these metrics are collected from real users as they have visited this site (CrUX report data)
- Lab Data: these are data generated using the Lighthouse tool. Different metrics are collected including:
- First Contentful Paint
- First Meaningful Paint
- Speed Index
- First CPU Idle
- Time to Interactive
- Estimated Input Latency
The performance score is calculated using the lab data. The page is considered fast if this score is above 90 and slow if below 50.
The Opportunities section provides performance optimization suggestions along with the potential page load gain if their are implemented.
The Diagnostics section provide additional information about how a page adheres to best practices for web development.
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. They can be opened by pressing Control+Shift+C (Windows, Linux, Chrome OS) or Command+Option+C (Mac).
2 tools are particularly helpful to investigate speed issues:
- The Audits panel can be used to display performance metrics for the current page using the Lighthouse tool. You can choose the device type, the type of audits to generate and whether CPU and network throttling should be applied. In our case, the Performance audit type should be checked.
- The Performance panel can be used to analyze a web page's load and runtime performance. To get started analyzing your webpage's speed:
- Navigate to the web page
- Open the Performance panel
- CPU and network throttling can be applied to analyze further performance bottlenecks.
- Click on the refresh icon inside the Performance panel to start profiling and reload the page
- All the main tasks (scripting, rendering, ...) will be displayed along with their sub-tasks. You can zoom on the sub-tasks, click on them to display more details (source script for example) and view network and timing events such as First Contentful Paint (FCP). The longest task after the FCP corresponds to the max potential First Input Delay.
Fix your First Input Delay and First Contentful Paint issues
Before applying the following recommendations, you should run a performance Audit using either PageSpeed Insights or the Chrome DevTools's Audits panel. Try to apply all the suggestions when applicable.
First Input Delay
The first input delay (FID) is defined as the time from when a user first interacts with your page (link click for example) to the time when the browser responds to that interaction.
The typical error message displayed on the Google Search Console speed report relating to the FID is:
FID issue: longer than 300ms (mobile / desktop).
To minimize it, you should reduce the scripting and rendering tasks' time of your page so that each one doesn't block the main thread for too long after the FCP.
- Open the Chrome DevTools Performance panel
- Apply a 4x CPU slowdown to simulate slower devices
- Start profiling and reload the page
- Identify all the sub-tasks that take the longest time.
To reduce the execution time of these sub-tasks:
- Depending on your stack, you can try code splitting
- Try to delay some page initialization to a later time using setTimeout API (analytics, alerts, etc.)
- Use the Idle Until Urgent strategy
- Lazy load page content: images, videos, paging, on scroll loading
- Defer script loading
First Contentful Paint
The first contentful paint (FCP) is the time from when the user requests the URL until the browser renders the first visible element in the URL.
The usual error message displayed on the Google Search Console speed report relating to the FCP is:
FCP issue: longer than 3s (mobile / desktop).
In addition to the optimization suggestions provided in the First Input Delay section, you can try the following tips to reduce the FCP:
- Minify your assets to reduce their size
- Use a Content Delivery Network (CDN) to reduce your page's resources download time
- Benefit from HTTP Caching by adding Cache Headers
- Initialize your page's header area before the other parts (such as the footer and the lower sections)
- Minimize the number of render-blocking external stylesheets