First Paint (FP) and First Contentful Paint (FCP)
First Paint (FP) and First Contentful Paint (FCP) are important, user-centric metrics that measure perceived loading speed. They mark the point in the page load timeline when a user first sees content on the screen.
What are FP and FCP
FP (First Paint)
First Paint (FP) measures the time from when a user starts to navigate to a page until the first pixel is rendered on the screen.
FP reflects the white screen time of a page. Before the FP event, the user sees a blank white screen. White screen time indicates the network loading performance of the page. A shorter FP time means a shorter white screen time and a better user experience.
FCP (First Contentful Paint)
First Contentful Paint (FCP) measures the time from when the page starts to load until 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.FCP indicates the time when the first piece of content is rendered. Before the FCP event, the user sees a screen with no content. The time to first render content can reflect factors such as the page's network loading performance, the complexity of the page's DOM structure, and the execution efficiency of inline scripts. A shorter FCP time means content is rendered sooner, which improves the user's page loading experience.
Note: FCP includes the unload time of the previous page, connection setup time, redirection time, and time to first byte (TTFB). In real-world scenarios, these times can be difficult to predict accurately. This can cause discrepancies between measured values and theoretical expectations.
The main difference between FP and FCP is:
FP is the point in time when the browser renders any visual change on the screen.
FCP is the point in time when the browser first renders content from the DOM. This content includes text, images (including background images),
<svg>elements, or non-white<canvas>elements.
FP and FCP score reference values
FP: According to general industry standards, a website should aim for an FP time of 1 second or less to provide a good user experience. Specifically, an FP time of less than 1 second is considered good, while a time greater than 2.5 seconds is considered poor. To effectively assess whether most users meet this target, a good threshold to measure is the 75th percentile of page load times.
FCP: Similar to FP, an FCP time of less than 1.8 seconds is considered good, and a time greater than 3.0 seconds is considered poor. The 75th percentile of page load times is the recommended measurement threshold.
How to get FP and FCP
You can use the Paint Timing API in JavaScript to obtain FP and FCP data. The following example shows how to create a PerformanceObserver that listens for a paint entry named first-contentful-paint and logs it to the console. For FP, the entry to listen for is first-paint.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({ type: 'paint', buffered: true });However, in some cases, this entry cannot be used to directly measure FCP. For a list of differences between the API report and the metric calculation, see Differences between the metric and the API.
Because the FCP metric is not always retrieved directly from the Paint Timing API, the FCP value is sometimes less than the FP value.
References
For an introduction to First Contentful Paint (FCP), see https://web.dev/articles/fcp?hl=zh-cn.