First Contentful Paint (FCP)

What Is First Contentful Paint?

FCP is the first moment a user sees that your page is actually loading. If it takes too long, the bounce rate rises measurably. Together with LCP and INP, FCP maps perceived load speed and directly influences both user experience and your page’s Core Web Vitals. Optimizations like loading critical CSS inline, compressing images, and deferring JavaScript improve your FCP score directly.

First Contentful Paint (FCP) marks the moment the first visible content of a web page appears in the user’s browser — whether text, an image, or another element. FCP is an important performance metric that measures perceived load speed and directly influences user experience. A fast FCP reduces the likelihood that users leave impatiently before the page finishes loading.

When measuring, time is counted from the moment the page is requested until the first pixel element is rendered — regardless of whether the entire page has loaded. Google measures FCP alongside other Core Web Vitals metrics. A slow FCP often results from: large, uncompressed images near the top of the page, render-blocking JavaScript or CSS, poor server response times (TTFB), or unoptimized fonts. These factors significantly delay the first visible rendering activity.

To improve FCP, website owners should start by generating a diagnostic report with Google PageSpeed Insights or Lighthouse. Concrete steps include: prioritize critical CSS and load it inline rather than externally. Defer non-critical JavaScript or load it asynchronously using the async/defer attribute. Optimize and compress images with tools like TinyPNG or Imagemin. Use a Content Delivery Network (CDN) to reduce server response time. For web fonts, use font-display: swap to show text while the font loads. An FCP under 1.8 seconds is a good target according to Google benchmarks.