Skip to content
Making a Good First Impression: First Contentful Paint and First Input Delay Explained
Pratikkumar P. Gaikwad | 05 min read | Feb 12, 2020
Recently, Google adds its latest speed report revealed at the start of 2019, to its Search Console. At OSC, the key metrics of this new report are growing interest among our clients, namely First Contentful Paint (FCP) and First Input Delay (FID).
In light of Google claiming the new speed report is “experimental,” and still has to be updated and enhanced, the new search interface has emerged on the pages of all: no surprises, many people get a bit confused.
We will see in this article how this Search Console Speed analysis functions, and we’ll delve into First Containful Paint and First Input Delay profoundly. The aim is to let you know its context and the resources to understand Google’s advice more effectively.
In light of Google claiming the new speed report is “experimental,” and still has to be updated and enhanced, the new search interface has emerged on the pages of all: no surprises, many people get a bit confused.
We will see in this article how this Search Console Speed analysis functions, and we’ll delve into First Containful Paint and First Input Delay profoundly. The aim is to let you know its context and the resources to understand Google’s advice more effectively.
2. The Speed Report In Google Search Console
You might be happy with a Search Console Speed report if you have been using Google’s performance testing tools like PageSpeed Insights and Lighthouse.
The goal is to demonstrate results by speed level, (yes, the green yellow-red legend that we know so well!) metric style and a related URL.
The URLs on your website are divided into different device types, slow, moderate or fast (desktop and mobile).
The goal is to demonstrate results by speed level, (yes, the green yellow-red legend that we know so well!) metric style and a related URL.
The URLs on your website are divided into different device types, slow, moderate or fast (desktop and mobile).
So this is how the new Speed report appears in the Google Search Console
For these statistics the Chrome User Experience Survey (CrUX) is the source of information that gathers measurements from user experience in Chrome’s environment.
The Chrome User Experience Survey mainly gathers anonymous Chrome usage insight data, people who saw the platform in various devices and network conditions.
It implies that if a URL does not meet the data level for the indicators that Google is evaluating, it will not be included in the study.
The Chrome User Experience Survey mainly gathers anonymous Chrome usage insight data, people who saw the platform in various devices and network conditions.
It implies that if a URL does not meet the data level for the indicators that Google is evaluating, it will not be included in the study.
3. The Metrics In Google Search Console Speed Report
The Speed report of the Search console uses two parameters: The first Contentful Paint (FCP) and the first input delay (FID).
You ought to have seen them before in the performance audits, if you know PageSpeed Insights and Chrome Lighthouse.
You ought to have seen them before in the performance audits, if you know PageSpeed Insights and Chrome Lighthouse.
Making a Good First Impression
To offer you an explanation of the FCP and FID, remember the importance of making a good first impression while meeting new people, particularly at a professional level.You could gain new projects from this first impression, expand your network and your company.Your website works the same: you have to make a good first impression, so that people who land on your sites feel comfortable and will want to continue reading (or purchase, or connect with you).
When the first experience of real life arises from something we can’t always manage (facial characteristics, body language, general behaviour, etc.), our website is more lucky.
We can track many aspects to ensure that our website gets a good first impression and we also have the tools to measure the final result.
Two performance measures are first Contentful Paint (FCP), and first input delay (FID).
When the first experience of real life arises from something we can’t always manage (facial characteristics, body language, general behaviour, etc.), our website is more lucky.
We can track many aspects to ensure that our website gets a good first impression and we also have the tools to measure the final result.
Two performance measures are first Contentful Paint (FCP), and first input delay (FID).
This will help us answer questions, such as ‘How long will our users wait to access my website content? ‘ And ‘ How long will our users have to wait for page components to communicate?
So let’s see what these indicators say and how you can utilize them.
So let’s see what these indicators say and how you can utilize them.
4. What Is Meant By First Contentful Paint (FCP)?
First Contentful Paint, or FCP, tests the time lag from the beginning of loading to when the first content of the browser is drawn on the computer.
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 elements, and SVGs on your page are considered DOM content; anything inside an iframe isn’t included.“
Within the framework of user-centered output metrics, the FCP and First Paint are in the first step assessing the ‘ Is it happening ‘ stage: Did the navigation start successfully? Did the server respond?
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 elements, and SVGs on your page are considered DOM content; anything inside an iframe isn’t included.“
Within the framework of user-centered output metrics, the FCP and First Paint are in the first step assessing the ‘ Is it happening ‘ stage: Did the navigation start successfully? Did the server respond?
First paint appears when every renderer in the application is identified, while First Contentful Paint labels the first content in the browser.
How to Improve First Contentful Paint on Your Site?
There’s no mystery around FCP enhancements.You have two (compatible) options:-
-Speed up the downloading time of resources;
-Prevent blocks from user interactions while running DOM content.
The use of a cache plugin lets you give the WordPress web site the first boost to FCP.
For example, with WP Rocket the website profits from page caching, meaning that the static objects (HTML, photos, CSS and JS) are automatically loaded in your websites.
-Speed up the downloading time of resources;
-Prevent blocks from user interactions while running DOM content.
The use of a cache plugin lets you give the WordPress web site the first boost to FCP.
For example, with WP Rocket the website profits from page caching, meaning that the static objects (HTML, photos, CSS and JS) are automatically loaded in your websites.
Due to their file optimization solutions.
- You can also do sophisticated design enhancements utilizing asynchronous / deferred CSS and the vital CSS route
- Reduce the number of Javascript render-blocking scripts.
- Minify the Javascript and CSS files and compress them.
- To enhance web caching, build a local cache version of Google Analytics, Google Tag Manager archives, and Facebook monitoring scripts.
5. What Is Meant By First Input Delay (FID)?
Now that you know what FCP entails, we can pass onto the next metric: first input delays or FID. This test represents the time of contact between the browser and the user
There are certain instances only if a website does not have a First Input Delay: which happens when consumers have to connect with the website through clicking or zooming (action that is not subject to FID).
As per 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.“
This time is defined by user experience as a “Is it useful?”-Question.
Could users connect with the website or is the page still loading?
In general, when the browser’s main thread is busy doing something else, we’re getting input lag (or input latency). And hence It doesn’t react immediately. It often happens due to JavaScript.
Once it is downloaded, the user has to read (parse and compile) JS, and it is not executed until after this step. The larger and larger JavaScript files are displayed on your websites, the more they need to be checked by the browser compiled and executed
You will consider FID described as Max Possible First Input Delay in the test using PageSpeed Insights; that’s the length of time in milliseconds, the longest activity the users will face after first Contentful paint.
There are certain instances only if a website does not have a First Input Delay: which happens when consumers have to connect with the website through clicking or zooming (action that is not subject to FID).
As per 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.“
This time is defined by user experience as a “Is it useful?”-Question.
Could users connect with the website or is the page still loading?
In general, when the browser’s main thread is busy doing something else, we’re getting input lag (or input latency). And hence It doesn’t react immediately. It often happens due to JavaScript.
Once it is downloaded, the user has to read (parse and compile) JS, and it is not executed until after this step. The larger and larger JavaScript files are displayed on your websites, the more they need to be checked by the browser compiled and executed
You will consider FID described as Max Possible First Input Delay in the test using PageSpeed Insights; that’s the length of time in milliseconds, the longest activity the users will face after first Contentful paint.
This is how First Input Delay appears in a PageSpeed Insights report
How to Improve FID on Your Site?
You have to reduce the duration of your longest activities to maximize the Full Potential FID ranking. Typically, you can boost this by searching for ways to automate the JavaScript.
All the techniques to optimize your JavaScript require custom development skills or the use of a third-party specific plugin.
For instance, by removing all JavaScript that is not required on the site, you could try to reduce JS execution time by disabling JS files specifically on your plugins or theme.
Plugins that may come in handy are: WProcket, Plugin Organizer, Asset CleanUp: Page Speed Booster, or the Gonzales plugin.
Please remember to treat them carefully, and if you don’t know where to start consult with a developer.
In contrast, we suggest that if you are a developer you refer back to Philip Walton, an engineer at Google, ‘ the ‘ Idle Until Urgent ‘ strategy.
All the techniques to optimize your JavaScript require custom development skills or the use of a third-party specific plugin.
For instance, by removing all JavaScript that is not required on the site, you could try to reduce JS execution time by disabling JS files specifically on your plugins or theme.
Plugins that may come in handy are: WProcket, Plugin Organizer, Asset CleanUp: Page Speed Booster, or the Gonzales plugin.
Please remember to treat them carefully, and if you don’t know where to start consult with a developer.
In contrast, we suggest that if you are a developer you refer back to Philip Walton, an engineer at Google, ‘ the ‘ Idle Until Urgent ‘ strategy.
6. Wrapping Up
The two key parameters in the new Google Search Console Speed report are First Contentful Paint (FCP) and First Input Delay (FID).
Since it is important to familiarize yourself with the context of Google’s advice and resources, you learned what it tests in this article:
Since it is important to familiarize yourself with the context of Google’s advice and resources, you learned what it tests in this article:
- First Contentful Paint or FCP measures the time lapse between a user’s initiation of browser navigation and the painting
of content on the screen. - First Input Delay, or FID, calculates the time from the first time a user interacts with your site (by clicking the link,
pressing a button, or using any custom JavaScript drive) to the moment the browser begins to respond.
