13 Jun 2021

First Contentful Paint (FCP): what is it?

The first impression on a website can be decisive: in just a few moments, the user can decide to continue their journey and return to your site if they feel welcome, or leave it and disappear forever if their experience is bad. Knowing that loading speed is a major UX requirement on the internet and for Google’s Core Web Vitals , you must speed up your web pages to give the best possible image of your site in the blink of an eye. Focus on two webperf metrics that will help you boost the feeling of speed for your visitors in terms of display and interactivity: First Contentful Paint and First Input Delay.

What is First Contentful Paint?

First Contentful Paint measures the moment when the very first element defined in the DOM is rendered in the technical sense by the browser (i.e. it may not even be visible to the user yet – we’ll get to that a bit later when explaining how FCP is measured). This can be any element anywhere on the page (text, image, background, SVG or <canvas> ). Note that FCP excludes anything contained within an iframe .

A good First Contentful Paint (FCP) is a first step towards a good user experience, and helps you limit your bounce rate, and depending on the step in the navigation funnel, cart abandonment.

Indeed, displaying elements as quickly as possible on a page helps reassure your visitors. Once these first elements are visible in the browser, your readers or customers will be more tempted to stay rather than leave the page thinking that the site is not working.

Be careful though, a very good FCP does not guarantee a good user experience on its own. If the browser displays a first element (background, menu, etc.) but then nothing happens for several seconds, you will have certainly taken a first step to reassure your Internet users, but the experience will then be disappointing.

HOW TO MEASURE FIRST CONTENTFUL PAINT?

FCP is obtained through browser APIs. It is found in Google’s Chrome User Experience Report (CrUX) data, in Google’s Lighthouse score calculation , and it also appears in results measured by PageSpeed Insights .

First Contentful Paint on PageSpeed Insights. Metrics differ depending on data collection mode (Lab data or Field data)

WHAT IS THE DIFFERENCE BETWEEN FCP AND START RENDER?

If you are interested in measuring loading times, you have certainly heard of Start Render, it is the “cousin” of FCP.

While FCP focuses on the first element technically rendered by the browser, Start Render is a visual metric that is inferred from the filmstrip seen in WebPageTest, by observing when the first elements appear.

Note that the most accurate interval proposed between each frame of the filmstrip is 100 ms. So, what is visible in the filmstrip does not exactly represent the moment when the blank page renders the very first DOM element in the technical sense, because in practice, it can be rendered in this 100 ms interval. It can for example be text whose font is not yet loaded, elements located outside the viewport …

In this, Start Render differs from FCP, and it also allows you to get closer to a user’s perception. Each of these metrics has its interest, it all depends on what you want to measure!

HOW TO IMPROVE FIRST CONTENTFUL PAINT

Here are some essential techniques for optimizing your FCP, all of which involve optimizing the critical path:

The server cache : it allows you to shorten the server response time, and therefore improve your FCP.
Inline your CSS : CSS can block the display of elements present in the viewport . To avoid this problem, inline only those that are critical for the rendering of above-the-fold elements so that they can be rendered early, and load the others asynchronously.
Load your JavaScript asynchronously : blocking JavaScript can degrade your FCP.
Using a CDN : By bringing content closer to your users, you improve loading speed, especially for your customers abroad.
Limit DNS resolutions on the first elements of the waterfall

HOW DO YOU KNOW IF YOU HAVE A GOOD FCP?

In 2020, the HTTP Archive site, which analyzes the state of the web, indicates that the median of the First Contentful Paint is 2.2 seconds on desktop and 5.1 seconds on mobile.
In the first half of 2020, according to the analysis we make of the most visited sites in France to establish our monthly ranking of mobile web performance with the JDN :

the average FCP is 2582 for e-commerce sites , and 1890 for media sites ;
The average Start Render is 2539 for e-commerce sites , and 1814 for media sites .

Now that we have seen how to measure and optimize the FCP, and how to position yourself, let’s look at another indicator that allows us to observe the first impression of speed in terms of interaction: the First Input Delay.

What is First Input Delay?

Display speed is essential for a good user experience, as is interactivity. To assess responsiveness following an interaction on a web page , you will need to measure your FID . The score should be as low as possible to give a good impression of the speed of your site.

More specifically, FID measures the time it takes for web pages to respond, from the time the user first interacts to the time the browser is able to respond to that interaction.

But what can degrade a FID score? It’s usually JavaScript files! That’s because while the browser is parsing and executing a heavy JavaScript file, it usually can’t do anything else – and in particular, it can’t react to user actions.
This is even more obvious on entry-level mobile phones, which are the first to suffer from poorly optimized JavaScript. As a user, you can therefore see a web page or elements displayed, but click without anything happening, which is really frustrating.

HOW DO YOU KNOW IF YOU HAVE A GOOD FID SCORE?

Google recommends having a FID score less than 100ms.

This score is part of the Core Web Vitals , UX-oriented metrics, along with the Cumulative Layout Shift (which evaluates the visual stability of a web page) and the Largest Contentful Paint (which evaluates the moment when the most important image appears in the browser).

Like the other Core Web Vitals, FID matters for your SEO. The search engine integrates it into its ranking algorithm following the Page Experience update.
FID is therefore important for your UX as well as for your SEO !

Be aware that in August 2020, less than 15% of sites met all of the criteria defined by Google for these 3 metrics…
So, there’s work to be done! To help you, we offer many technical tips and best practices to improve your performance in our monthly newsletter.

HOW TO MEASURE FID

FID can only be measured with Real User Monitoring (RUM) tools, since a real user must interact with a web page.

Google offers the following tools to measure FID:

If you want to evaluate the interactivity of your web pages with Synthetic Monitoring tools (like WebPageTest, for example), you can look at the “cousin” of the FID: the Total Blocking Time, which evaluates the sum of all the periods where the Main Thread is blocked by tasks whose execution is greater than 50 ms. By improving one, you should improve the other. Be careful though, since these two metrics are not calculated in the same way, you can get distant results, as seen in the test below:

FID and TBT measured by PageSpeed test

HOW TO IMPROVE FIRST INPUT DELAY

If you have launched a test with PageSpeed Insights to measure your FID, be careful not to blindly launch into applying Google’s Pagespeed Insight recommendations to optimize your page speed. These recommendations are interesting and provide information that allows you to define avenues for improvement, but some require webperf expertise to be applied effectively.

In any case, be sure to reduce: