First Contentful Paint and First Input Delay

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).

Speed report in Google Search Console
This is how the new Speed report looks like in Google Search Console

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.

As the Google team puts it:

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?

First Paint and First Contentful Paint
First Paint happens when any render is detected in the browser, while First Contentful Paint bookmarks the first content that gets painted in the browser.

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:

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).

According to Google:

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.

First Input Delay in a PageSpeed Insights report
First Input Delay in a PageSpeed Insights report

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:

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!

Author's avatar

Alice is a content writer with strong experience in international customer service and empathic communication. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps. You can follow @Alice_Ridice on Twitter.

0 comments
Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}