First Contentful Paint

Understand FCP, the performance metric that measures how quickly the first piece of content renders on screen after navigation begins.

First Contentful Paint (FCP) measures the time from when the user initiates a page load to when the first piece of content is rendered on screen. "Content" includes text, images (including background images), <svg> elements, and non-white <canvas> elements.

FCP marks the moment the user sees something instead of a blank screen — a critical perception point that signals the page is actually loading.

Thresholds

Rating	Value
Good	≤ 1,800ms
Needs Improvement	1,800ms – 3,000ms
Poor	> 3,000ms

FCP vs. LCP

FCP and LCP both measure paint timing but serve different purposes:

	FCP	LCP
What it measures	First any content rendered	The largest content element rendered
User perception	"Something is happening"	"The page is useful"
Typical value	Earlier than LCP	Later than FCP

A fast FCP reassures the user that the page is loading. A fast LCP tells them the page is ready. If there's a large gap between FCP and LCP, it usually means the main content takes significantly longer to load than the initial shell or skeleton.

Understanding the Breakdown

When attribution is enabled, FastStats decomposes FCP into two phases:

Time to First Byte (TTFB)

The time until the browser receives the first byte of the HTML document. This is the network and server processing portion of FCP.

First Byte to FCP

The time from receiving the first byte to the browser actually painting the first content. This includes parsing the HTML, loading render-blocking CSS, executing synchronous JavaScript, and performing the first paint.

FCP = TTFB + First Byte to FCP

The load state at the time of FCP is also recorded, which tells you whether the document was still loading, had reached dom-interactive, or was already dom-content-loaded.

Common Causes of Poor FCP

Render-Blocking Resources

CSS files and synchronous JavaScript in the <head> block the first paint. The browser won't render anything until all render-blocking resources are downloaded and parsed.

Fix:

Inline critical CSS required for above-the-fold content
Load non-critical CSS with media="print" and swap to media="all" on load
Add defer or async to scripts
Remove unused CSS and JavaScript

Slow Server Response Time

If TTFB is high, FCP is delayed before anything browser-side even begins.

Fix: Use a CDN, enable caching, optimize server-side logic, and consider static generation or edge rendering.

Large DOM in Initial HTML

A massive initial HTML payload takes longer to parse, delaying the first paint.

Fix:

Defer non-critical HTML content
Use server-side rendering but limit the initial HTML to above-the-fold content
Lazy-load below-the-fold sections

Web Font Loading

If text is the first content and a web font is required, the browser may block text rendering (FOIT — Flash of Invisible Text) until the font loads.

Fix:

Use font-display: swap to show the fallback font immediately
Preload critical fonts: <link rel="preload" as="font" href="/font.woff2" crossorigin />
Use font-display: optional for non-critical fonts

Excessive Redirects

Each redirect adds a full round-trip to the network, pushing FCP further back.

Fix: Minimize redirect chains. Ensure your canonical URL is the one users and crawlers access directly.

FCP is often a good leading indicator for other metrics. If FCP is poor, LCP will almost certainly be poor too, since the largest content can't render before the first content.

Interpreting FCP in FastStats

The metric detail page shows:

p75 timeline — your FCP score over time
Distribution chart — spread of FCP values across good, needs improvement, and poor
Two-phase breakdown — TTFB vs. First Byte to FCP, showing where the bottleneck is
Breakdown by page — which routes have the slowest first paint
Device and connection comparison — mobile and slower networks typically have significantly higher FCP

On this page