First Contentful Paint

On this page
Available in:
SyntheticCrUXRUM

First Contentful Paint (FCP) is a timing-based metric that reports when the first content is rendered on screen. While FCP sounds similar to Largest Contentful Paint (LCP), but it’s not the same. FCP aims to measure when the first content appears, and LCP quantifies when the primary content appears. FCP is a Web Vital metric.

Content, in FCP calculations, means:

  • <img>, <image> or <svg> elements (including background images set in CSS with background-image: url())
  • Non-white <canvas> elements
  • Text

How is First Contentful Paint calculated?#

In Calibre, FCP is sourced directly from Chrome browser. The browser emits this timing as part of its tracing.

What First Contentful Paint measurement is fast?#

First Contentful Paint lower or equal than 1.8s are considered fast, and above 3s are considered slow.

First Contentful Paint lower or equal than 1.8s are considered fast, and above 3s are considered slow.

How to improve First Contentful Paint?#

First Contentful Paint starts after the document arrives, so it is shaped by how quickly the server responds and how much work blocks the first render. Work through these steps:

1. Eliminate render-blocking resources#

  • Inline critical CSS: Deliver the styles needed for the first paint inline, and load the rest asynchronously.
  • Defer non-critical JavaScript: Use async or defer, and remove unused scripts and CSS that block rendering.

2. Reduce server response time#

  • Improve Time to First Byte: FCP cannot start until the document begins arriving, so reduce Time to First Byte with a CDN, caching and faster server-side rendering.
  • Use resource hints: preconnect to required origins so connections are ready when the browser needs them.

3. Optimise web font loading#

  • Preload and swap: Preload critical fonts and use font-display: swap so text is visible while fonts load.
  • Ship less font data: Use WOFF2 and subset fonts to the characters you need.

4. Monitor First Contentful Paint over time#

Browser compatibility#

Widely availableChrome 60+Edge 79+Firefox 84+Safari 14.1+

See the full browser compatibility table on MDN.

Further resources#