Skip to main content

How to Calculate FP and FCP

Metric Description​

FP (First Paint)​

  • The time point of the first rendering. In performance statistical metrics, the time from when the user starts accessing the Web page to the FP time point can be viewed as the white screen time. This means that during the user's access to the Web page, before the FP time point, the user sees a white screen with no content, and the user cannot perceive any effective work being done during this phase.
  • Therefore, it typically reflects the page's white screen time, which in turn reflects the network loading performance of the current Web page. When the loading performance is excellent, the white screen time will be shorter, the time users wait for content will be shorter, and the probability of user drop-off will decrease.

FCP (First Contentful Paint)​

  • The time point when content is first rendered. In performance statistical metrics, the time from when the user starts accessing the Web page to the FCP time point can be viewed as the no-content time. This means that during the user's access to the Web page, before the FCP time point, the user sees a screen without any actual content, and the user cannot obtain any useful information during this phase.
  • Therefore, it typically reflects the time when content first appears on the page. This first content appearance time reflects the network loading performance of the current Web page, the complexity of the page DOM structure, and the execution efficiency of inline scripts. When all phases perform very well, the time for content to first appear will be shorter, the time users wait will be shorter, and the probability of user drop-off will decrease.
  • The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. For this metric, "content" refers to text, images (including background images), <svg> elements, or non-white <canvas> elements.

The main differences between FP and FCP are:

  • FP is when the browser begins to paint content to the screen. As soon as visual changes begin to occur, regardless of what content triggers the visual change, at that moment, that time point is called FP.
  • FCP refers to when the browser first renders content from the DOM. For example: text, images, SVG, canvas elements, etc. This time point is called FCP.

What is a Good FCP Score?​

To provide a good user experience, websites should strive to have a First Contentful Paint of 1.8 seconds or less. To ensure you can achieve the recommended target values during most of your users' visits, a good measurement threshold is the 75th percentile of page loads, and this threshold applies to both mobile and desktop devices.

How to Obtain the Metrics​

As described in the W3C Paint Timing specification draft, PerformancePaintTiming contains the painting performance timing information of the current Web page, which can be obtained using the performance.getEntriesByType('paint') method. FP and FCP are included in this information.

  • Find the object with the name "first-paint", which describes the metric data for FP. The startTime in this object is the FP time.
  • Find the object with the name "first-contentful-paint", which describes the metric data for FCP. The startTime in this object is the FCP time.

Browser Compatibility Notes​

The metric requires browser support for the Paint Timing API. In cases of incompatibility, the isSupport field in the reported metrics will be false.