First Contentful Paint

by

First Contentful Paint or FCP is one of the important metrics in UI Performance Testing. It provides the time when the browser renders the first bit of content like text, image, non-white canvas etc. It gives the first impression to the user that the page is actually loading.

Behind the concept of FCP, there is another term called ‘First Paint‘ that we have already discussed in the previous article. In the browser, the First Paint occurs when any render is detected like a change in the background colour. Please note that such changes are purely uninformative and subtle; definitely difficult to analyse. Hence FCP is more important than FP.

Let’s try to understand First Paint, First Contentful Paint and Largest Contentful Paint (LCP) with an example. Kindly park LCP as of now because this is another big topic of discussion. Refer to the below figure:

First Contentful Paint
Figure 01

Which is useful- First Paint or First Contentful Paint?

  1. First Contentful Paint time is more representative from user’s experience perspective because it provides the timing when the actual content has been loaded in the page and not just any change.
  2. First Paint changes are subtle and do not give the proper impression to the end user for any page loading action whereas user consumable information like text, images etc. started loading when First Contentful Paint is started.
  3. For a faster and lighter website, both the timing could be same. So, it is better to consider First Contentful Paint metric over First Paint metric.
  4. For a complex website, there may be a considerable difference between both the timings. First Contentful Paint is more useful for user experience assessment than just considering when a background has been changed or a style has been applied.

What should be the ideal value of FCP?

As per the Google Lighthouse document:

FCP Value (in seconds)Website SpeedGoogle Lighthouse Color-Coding
0 to 1.8FastGREEN
1.8 to 3ModerateORANGE
Over 3SlowRED
Table 01

How to improve FCP?

Following are some suggestions to improve the FCP:

  1. Improve font load time
  2. Include font-display: swap in @font-face style to display the system font when text is available and then browser replaces the system font once custom font is ready.
  3. Use preload tag to fetch the font files first. The tag is <link rel="preload" as="font">

You may be interested:

Leave a Comment