First Contentful Paint (FCP)
A performance metric measuring how quickly the first piece of content renders on screen after navigation.
What FCP measures
First Contentful Paint captures when the first DOM content renders—text, images, SVGs, or non-white canvas elements. This represents the moment visitors get visual confirmation that the page is loading. Before FCP, they see a blank screen.
Good FCP is under 1.8 seconds. Between 1.8-3.0 seconds needs improvement. Above 3.0 seconds is poor. These thresholds reflect real user expectations—people assume sites are broken if nothing appears within a few seconds.
Why FCP matters
FCP provides the first feedback that loading is progressing. Long waits with no visual response increase bounce rates dramatically. Even if your full page loads reasonably quickly, a slow FCP creates perception of slowness.
While Largest Contentful Paint better indicates when pages become useful, FCP shows when they first become visible. Both matter for complete user experience assessment.
Improving FCP
Reduce server response time (Time to First Byte). Slow servers delay everything. Edge hosting dramatically improves TTFB by serving from geographically-close servers.
Eliminate render-blocking resources. CSS and JavaScript in the <head> must download before rendering starts. Inline critical CSS, defer non-critical styles, and load JavaScript asynchronously when possible.
Optimise font loading. Web fonts can delay text rendering if not handled properly. Use font-display: swap to show system fonts immediately while custom fonts load, or preload critical font files.
FCP in modern frameworks
Astro sites achieve excellent FCP because they generate static HTML that browsers can render immediately. No JavaScript execution required before showing content. This architectural advantage makes fast FCP the default, not an optimisation challenge.
Combined with Cloudflare Pages edge distribution, Fernside sites typically achieve FCP under 0.8 seconds globally—well into the "good" range without extensive optimisation work.
Related terms
Why it matters
Understanding “First Contentful Paint (FCP)” helps you speak the same language as our design and development team. If you need help applying it to your project, book a Fernside call.