Skip to main content

How to calculate FP and FCP

Description of indicators​

FP (First Paint)​

  • The point in time of the first rendering. In the performance statistical index, the time from the time point when the user starts to access the Web page to the FP time point can be regarded as a white screen time, that is to say, in the process of accessing the Web page, before the FP time point, the user sees a white screen without any content. The user is not aware of any valid work being done at this stage.
  • Therefore, it usually reflects the white screen time of the page, and the white screen time will reflect the network loading performance of the current Web page. When the loading performance is very good, the time of the white screen will be shorter, the time for the user to wait for the content will be shorter, and the probability of loss will be reduced.

FCP (First Contentful Paint)​

img

  • The point in time when the content was first rendered. In the performance statistical index, the period from the time point when the user starts to access the Web page to the time point of the FCP can be regarded as a time of no content, that is to say, in the process of accessing the Web page, before the FCP time point, the user sees a screen without any actual content. The user does not get any useful information at this stage.
  • Therefore, it usually reflects the time when the content of the page appears for the first time, and the time when the content appears for the first time will reflect the network loading performance of the current Web page, the complexity of the page DOM structure, and the execution efficiency of inline script. The shorter the first appearance of content, the shorter the waiting time of users, and the lower the probability of loss.
  • The First Content Paint (FCP) metric measures the time from the start of a page load to the completion of rendering of any portion of the page content on screen. For this metric, "content" refers to text, images (including background images), <svg> elements, or elements that are not white <canvas>.

The main differences between FP and FCP are:

  • FP is when the browser starts to draw content onto the screen, as soon as the visual starts to change, no matter what the content triggers the visual change, at this moment, this point in time, is called FP.
  • FCP refers to the first time a browser draws content from the DOM. For example: text, images, SVG, canvas elements, etc. This time point is called FCP.

What is a good FCP score?​

In order to provide a good user experience, the website should strive to keep the first content drawing to 1.8 seconds or less. To ensure that you can achieve the recommended target values during most user visits, a good measurement threshold is the 75th percentile of page loads, and this threshold applies to both mobile and desktop devices.

How to get metrics​

Performance PaintTiming, as W3C Paint Timing Draft Specification described in, contains the paint performance timing information for the current Web page, which can be obtained through the performance.getEntriesByType('paint') method, including FP and FCP.

  • Find the object whose name is first-paint, which describes the FP indicator data, where startTime is the FP time. img
  • Find the object whose name is first-contentful-paint, which describes the indicator data of FCP, where startTime is the time of FCP. img

Browser compatibility instructions​

The indicator requires browser support Paint Timing API. In case of incompatibility, isSupport is false in the reported indicator.