Skip to main content

How to calculate FCP

Indicator description​

FCP (First Contentful Paint)​

img

  • The point in time when the content is first rendered. In the performance statistics, the time from the time when the user starts to visit the Web page to the time point of FCP can be regarded as the time without content, that is, in the process of accessing the Web page, before the time point of FCP, the user sees a screen without any actual content, and the user can not obtain any useful information at this stage.

  • Therefore, it usually reflects the time of the first appearance of the content of the page, and the time of the first appearance of the content reflects the network loading performance of the current Web page, the complexity of the page DOM structure, and the execution efficiency of inline script. When the performance of all stages is very good, the time of the first appearance of the content will be shorter, the user's waiting time will be shorter, and the loss probability will be reduced.

  • The first content rendering (FCP) metric measures the time that a page finishes rendering on the screen from the start of loading to any part of the page content. For this indicator, "content" refers to text, images (including background images)<svg> element or non white <canvas> element

What is a good FCP score?​

In order to provide a good user experience, the website should strive to control the first content rendering within 1.8 seconds or less. To ensure that you can reach the recommended target value during the visit of most users, a good measurement threshold is the 75th percentile of page loading, and this threshold applies to both mobile and desktop devices.

How to obtain indicators​

W3C Paint Timing Draft Specification, PerformancePaintTiming contains the drawing performance dotting information of the current Web page, which can be obtained through the method 'performance. getEntriesByType ('paint') ', FCP is one of them.

  • Find the object with the name of first content paint, which describes the FCP indicator data, where startTime is the FCP time. img

Browser Compatibility Notes​

Indicator requires that the browser support Paint Timing API.