First Contentful Paint
Definition
The time until a browser renders the first visible content on screen, showing users that the page is actually loading.
What is First Contentful Paint?
First Contentful Paint (FCP) measures the time from when a page starts loading to when any content is first rendered on screen. This could be text, an image, an SVG, or a non-white canvas element.
It marks the first moment users see visual feedback that the page is loading – rather than staring at a blank screen.
Why FCP Matters
Perceived Performance
FCP is when the page stops looking broken. Users get visual confirmation that something is happening.
User Patience
People will wait longer if they see progress. A quick FCP buys time for the rest of the page to load.
Core Web Vitals Related
While not one of the three Core Web Vitals, FCP is closely related to LCP and contributes to overall page experience.
Diagnostic Value
A slow FCP often indicates specific issues – render-blocking resources, slow servers, or heavy initial payloads.
FCP Benchmarks
| Rating | FCP Time |
|---|---|
| Good | Under 1.8s |
| Needs Improvement | 1.8-3s |
| Poor | Over 3s |
What Delays FCP?
Render-Blocking Resources
CSS and JavaScript in the document head must load before content renders.
Slow Server Response
High TTFB delays when the browser can even start processing the page.
Large Resource Files
Big CSS or JavaScript files take longer to download and process.
Web Fonts
Fonts that must load before text displays can delay FCP if not handled properly.
Network Latency
Slow connections extend download times for initial resources.
Improving FCP
Eliminate Render-Blocking Resources
- Inline critical CSS
- Defer non-essential JavaScript
- Use async loading where possible
Optimise Server Response
Reduce TTFB through better hosting, caching, and CDN usage.
Reduce Initial Payload
Minimise the HTML, CSS, and JavaScript needed for the first render.
Preload Key Resources
Tell the browser which resources to prioritise early in the loading process.
Handle Fonts Smartly
Use font-display: swap to show text immediately with fallback fonts while custom fonts load.