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.