Google has recently added the experimental Speed report to its Search Console, which was announced at the beginning of 2019. At WP Rocket, we have seen interest rising among our customers towards the core metrics of this new report: First Contentful Paint (FCP) and First Input Delay (FID).
Despite Google saying the new speed report is currently “experimental,” because it still needs to be revised and improved, the new Search Console section appeared on everyone’s accounts: no surprises, then, that many people are getting a bit overwhelmed by it.
In this post, we’ll see how this Speed report for the Search Console works, and we’ll dive deep into First Contentful Paint and First Input Delay. The goal is to make you familiar with their meaning and have the tools to better interpret Google’s advice.
The Speed Report in Google Search Console
If you’ve been using Google’s performance testing tools like PageSpeed Insights and Lighthouse, you’d likely feel at ease with the Search Console’s Speed report.
Its goal is to show performance by speed status (yes, the green-yellow-red legend we have come to know so well!), metric type, and similar URL type.
The URLs of your website are grouped and labeled as slow, moderate, or fast on specific device types (desktop and mobile).
The source of information for this data is the Chrome User Experience Report (CrUX), which collects user experience metrics by real-world Chrome users.
It’s important to remember that the Chrome User Experience Report collects anonymized performance data from real Chrome users only, who visited the page from different devices and network conditions.
This means that, if a URL doesn’t reach the threshold of data for the metrics analyzed by Google, it won’t be included in the report.
The Metrics in Google Search Console Speed Report
The Search Console Speed report relies on two metrics: First Contentful Paint (FCP) and First Input Delay (FID), which are not new indicators.
If you’re familiar with PageSpeed Insights and Chrome Lighthouse, you should have seen them before in the Performance audits.
Making a Good First Impression
To give you a general idea of what FCP and FID are all about, think about the importance of making a good first impression when you meet someone new, especially on a professional level. From that first impression, you could gain new projects, expand your network and your business.
It works the same for your website: it has to make a good first impression so that users who land on your pages will feel at ease and will want to keep reading (or buying, or interacting with you).
If, in real life, the first impression comes from things we can’t always control (facial traits, body language, general behavior, etc.), our website is luckier.
There are several factors we can monitor to make sure our website will make a good first impression, and we also have the tools to measure the final result.
First Contentful Paint (FCP) and First Input Delay (FID) are two of the performance metrics we can use.
They help us answer questions like “How long our users wait before seeing the content of my website?” and “How long do they wait before interacting with elements on the page?”
So let’s see what these metrics mean and how you can make the most of them.
What Does First Contentful Paint (FCP) Mean?
First Contentful Paint, or FCP, measures the lapse of time from moment navigation starts to when the browser paints the first content on the screen.
“FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn’t included.“
In the frame of user-centric performance metrics, FCP, along with First Paint, stands at the first step measuring the “Is it happening”-phase: Did the navigation start successfully? Has the server responded?
How to Improve First Contentful Paint on Your WordPress Site?
There is no secret to improve FCP, and you have two (compatible) choices:
– Speed up the download time of resources;
– Avoid the blocks the browser encounters when rendering DOM content.
Using a caching plugin will help you to give the first boost to FCP for your WordPress site.
With WP Rocket, for example, your website will benefit from page caching, which will immediately speed up loading time for the static elements (HTML, images, CSS, and JS files) in your pages.
Thanks to its file optimization options, you’ll also be able to:
- Handle advanced performance optimizations with asynchronous/deferred CSS and critical path CSS;
- Minimize the number of render-blocking Javascript files;
- Minify and compress Javascript and CSS files;
- Create a local cache version of Google Analytics, Google Tag Manager files, and Facebook tracking scripts to improve browser caching for them.
What Does First Input Delay (FID) Mean?
Now that you understood what FCP means, we can pass to the next metric: First Input Delay, or FID. This metric marks the interaction moment between the user and the browser.
There are only specific cases when a site has no First Input Delay: this happens, for example, when users need to interact with the site by scrolling or zooming (actions that are not covered by FID).
“First Input Delay (FID) measures the time from when a user first interacts with your site (i.e., when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.“
User experience defines this moment with the “Is it usable?” question.
Can users interact with the page, or is it still busy loading?
Generally speaking, we have input delay (or input latency) when the browser’s main thread is busy doing something else: it can’t respond to the user right away. This often happens because of JavaScript.
Once downloaded, JS has to be read (parsed and compiled) by the browser; only after this phase, the browser executes it. The more and larger JavaScript files are loaded on your pages, the longer it will take for the browser to parse, compile and execute them.
If we had to locate FID within the RAIL, the user-centric performance model, we would find it at the first step: R (responsiveness).
When you run a test with PageSpeed Insights, you’ll find FID defined as Max Potential First Input Delay: that is the duration, in milliseconds, of the longest task after First Contentful Paint your users could experience.
How to Improve FID on Your WordPress Site?
To optimize your Max Potential FID score, you need to reduce the duration of your longest tasks. Generally speaking, you can improve this metric by looking for opportunities to optimize your JavaScript.
If you use WP Rocket, for example, you can enable JS minification and take advantage of the Google Tracking and Facebook Pixel Add-Ons. With these two last features, you can locally host Google Analytics’ and Facebook Pixel tracking JS files, and WP Rocket can apply browser caching to them.
These WP Rocket options won’t have a direct impact on FID, but you can consider that, the faster the page renders, the quicker the browser’s main thread will be available for the user to interact with the page.
All the other techniques to optimize your JavaScript require custom development skills or the use of a third-party specific plugin.
For example, you can try to reduce JS execution time by removing all JavaScript, which is not needed on the page; you can do so by disabling specific JS files from your plugins or theme.
WP Rocket can’t help you with that, but a few other plugins may come in handy: Plugin Organizer, Asset CleanUp: Page Speed Booster, or the Gonzales plugin.
Remember always to handle them with care, and consult a developer, if you don’t know where to start.
If you’re a developer, on the other hand, we suggest you refer to the Idle Until Urgent strategy described by Philip Walton, an engineer at Google.
Wrapping Up
First Contentful Paint (FCP) and First Input Delay (FID) are the two metrics at the core of the new Google Search Console Speed report.
Since it’s important to make yourself familiar with their meaning and have the tools to better interpret Google’s advice, in this post, you learned what they measure:
- First Contentful Paint, or FCP, measures the lapse of time between the moment a user starts the navigation on your site, and when the browser starts to paint content on the screen.
- First Input Delay, or FID, measures the time from when a user first interacts with your site (by clicking a link, tapping on a button, or using any custom JavaScript-powered control) to the time when the browser starts to respond to that interaction.
Throughout this post, you learned how to understand these metrics and improve them. Sometimes you can optimize their results thanks to a plugin like WP Rocket, whose features can reduce JavaScript bundles in long-running initialization tasks.
What is your experience with FCP and FID? Have you tried to optimize them on your site? Let us know your thoughts in the comment section!
