What is First Contentful Paint (FCP)? Thresholds and fixes

What is First Contentful Paint?

First Contentful Paint (FCP) is the moment the page stops looking blank: the time from the start of navigation until the browser draws the first text, image, SVG or non-white canvas. It tells visitors that something is happening.

FCP is not one of the three Core Web Vitals, but it explains them. If FCP is slow, LCP cannot be fast. If FCP is fast but LCP is slow, the problem is the main image or headline, not the page shell.

What makes FCP slow

Before anything can be drawn, the browser needs the HTML (time to first byte) and every stylesheet and synchronous script in the <head>. So slow FCP almost always comes down to:

• Slow server response or redirects before the HTML arrives.
• Render-blocking CSS and JavaScript in the head.
• Web fonts that hide text until they load.

A sample breakdown

Sample data: a blog's P75 FCP on mobile is 2.6 s: 1.2 s until the HTML arrives, 1.0 s waiting for two stylesheets and a synchronous script, 0.4 s to render.

Two fixes: cache the HTML at the edge (first byte 1.2 → 0.5 s) and inline the critical CSS while loading the rest and the script without blocking (1.0 → 0.5 s). New FCP: 0.5 + 0.5 + 0.4 = 1.4 s, good.

Fixes that move FCP

1. Remove redirect chains and cache HTML where you can.
2. Inline the CSS needed for the first screen; load the rest asynchronously.
3. Add defer or async to scripts in the head.
4. Use font-display: swap (or optional) so text shows in a fallback font.
5. Preconnect to required third-party origins.

FCP in TapCub

TapCub collects Web Vitals from real visits with the site script (sent once, when the first page is hidden; turn off with data-vitals="false"). In Web analytics › Monitoring › Performance, cards switch between P75, median, P95 and average, the breakdown splits by page, device, browser, country and operating system, and Slowest pages is sorted by P75 largest contentful paint. Details are in the performance docs.