First Contentful Paint (FCP) is a performance metric that measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. This includes text, images (including background images), non-white <canvas> elements, and SVGs. FCP is important because it marks the first point at which a user can see something meaningful on the screen, providing initial visual feedback that the page is loading.
A good FCP score is typically under 1.8 seconds. While FCP is not a Core Web Vital, it is a foundational metric that often correlates with other performance indicators like LCP. A fast FCP makes a page feel responsive and prevents users from perceiving a blank screen for too long, which can lead to frustration and abandonment.
To improve FCP, developers should prioritize optimizing critical rendering path resources. This includes reducing server response times, minimizing render-blocking CSS and JavaScript, and ensuring that the initial HTML payload is delivered quickly. For instance, inlining critical CSS directly into the HTML for the above-the-fold content can significantly reduce FCP by allowing the browser to render content without waiting for external stylesheets to load.