First Contentful Paint (FCP)

FCP vs LCP — the relationship

FCP measures when the user sees ANY content; LCP measures when they see the LARGEST content. FCP almost always fires earlier than LCP.

A typical page progression:

• 0.0s: page request starts
• 0.4s: TTFB (server response begins)
• 1.2s: FCP fires (first text or image visible)
• 2.1s: LCP fires (hero image fully rendered)

Optimizing FCP optimizes the “page is loading” moment; optimizing LCP optimizes the “page has loaded” moment.

What FCP measures (precisely)

The metric fires the first time the browser paints ANY of:

• Text (after web fonts load, or fallback fonts)
• Images (raster, SVG, or background)
• Non-white canvas
• Iframe content

White-background-only pages don’t satisfy FCP — there must be visible content.

Why FCP matters

Even though FCP isn’t directly used in Google ranking, it correlates strongly with perceived speed and bounce rate:

• Sites with poor FCP (>3s) bounce 32% more on mobile
• Users feel they “can use” the site once FCP fires, regardless of whether all content is loaded

For business outcomes, FCP shapes user impression in the critical 0-2 second window.

Optimization tactics

• Eliminate render-blocking resources — critical CSS inline, defer/async JS
• Reduce TTFB — CDN edge caching, server-side optimizations
• Server-side render or static generate — avoid CSR-only patterns where the page is white until JS runs
• Optimize font loading — font-display: swap or optional to avoid invisible text
• Compress critical text content — gzip/brotli served from origin

FCP vs LCP — which to prioritize

If you have to choose, LCP wins (it’s a Core Web Vital and directly affects ranking). But the optimizations that improve LCP usually improve FCP too — they’re related metrics. A page with good LCP almost always has good FCP.

The exception: pages where the LCP element is much later than FCP (large hero images after early text). Optimizing LCP-specific levers (image preload, image format) won’t help FCP at all.

Measurement

• PageSpeed Insights — surfaces FCP for both lab (Lighthouse) and field (CrUX) data
• Lighthouse — lab simulation; useful for debugging
• CrUX — 28-day rolling real-user FCP
• Web Vitals JS library — RUM measurement of FCP

Resocial perspective

We monitor FCP alongside the three Core Web Vitals, but treat it as supplementary. A page that passes LCP almost always passes FCP; the inverse isn’t always true. FCP regressions usually indicate broader render-pipeline issues that will eventually hurt LCP too.