What is First Contentful Paint (FCP)?
First Contentful Paint — FCP — is the time from page-load start until the browser renders the first pixel of DOM content. That "content" can be text, an image, a non-blank canvas, or an SVG. Anything but a blank page.
FCP is not a Core Web Vital anymore (LCP, INP, CLS are), but Google still reports it and it's a useful diagnostic. If FCP is slow, LCP is almost always slow too — and FCP tells you why.
Thresholds
- Good: 1.8 seconds or less
- Needs improvement: 1.8 to 3.0 seconds
- Poor: over 3.0 seconds
FCP vs LCP
FCP is the first pixel. LCP is the largest element above the fold. Usually FCP happens first, then LCP a bit later.
If FCP is fast but LCP is slow: the page paints quickly but the hero image or main heading is loaded late. Fix: optimize the LCP candidate.
If FCP is slow: the whole render pipeline is blocked. Fix: reduce render-blocking resources and improve TTFB.
What causes slow FCP
Almost always one of:
- Slow server response (TTFB) — the browser can't render anything until the HTML arrives
- Render-blocking CSS — the browser waits for every
<link rel="stylesheet">in<head>before painting - Render-blocking JavaScript — any
<script>withoutasyncordeferin<head>blocks parsing - Large HTML payload — takes time to download before paint
Fixes
- Get TTFB under 800ms (CDN + server response time)
- Inline critical CSS,
<link rel="preload">the rest - Use
asyncordeferon all non-critical scripts - Move third-party scripts (analytics, ads, widgets) to the end of
<body>or lazy-load them - Minify HTML; compress with Brotli
FCP is a fast win — fixing it usually also improves LCP and overall page-load feel.
By Paulo de Vries · Published