What is FCP?
FCP measures when the browser renders the first piece of content visible to the user — any text, image, non-white canvas, or SVG. It is the earliest signal that the page is loading and directly shapes the user's perception of speed.
Google's FCP thresholds
Good
≤ 1.8s
Needs improvement
1.8s – 3s
Poor
> 3s
What First Contentful Paint (FCP) means
First Contentful Paint (FCP) captures the moment the browser renders the first visible content — any text, image, background image, or SVG — after navigation starts. It is the first metric that gives users a signal that something is happening. Without a fast FCP, users see a blank white screen and may interpret the page as broken or very slow.
FCP is not a Core Web Vital, but it is included in Google's Lighthouse performance score and is closely watched because it is a strong predictor of LCP and overall perceived load speed. A good FCP tells you that the server is responding quickly and the HTML is being parsed without significant render-blocking resources.
The gap between FCP and LCP is particularly informative. A small gap means the LCP element loaded close to the first content — likely a text-heavy page with good performance. A large gap means the LCP element (typically a hero image) loaded significantly after the first content — indicating a preload or prioritisation problem.
Common causes of poor FCP
- Render-blocking CSS in the document <head> that must parse before painting
- Render-blocking JavaScript that executes synchronously before the first paint
- High TTFB that delays when the browser can begin parsing at all
- Server-side rendering that waits for all data before sending any HTML
- Fonts loaded via CSS @import that block rendering
- Large inline styles that the browser must parse before painting
How to improve FCP
- Eliminate render-blocking resources by deferring or async-loading non-critical scripts
- Inline critical CSS above-the-fold styles to avoid a blocking stylesheet request
- Reduce TTFB with edge caching so parsing starts sooner
- Use streaming SSR with Suspense to send the HTML shell before data is ready
- Load fonts with next/font to preload them without blocking rendering
- Preconnect to critical third-party origins used in the first paint
Frequently asked questions about FCP
What is a good FCP score?
Google considers an FCP score of 1.8 seconds or less as 'Good'. Scores between 1.8s and 3s are 'Needs Improvement', and above 3s is 'Poor'. For competitive sites, targeting under 1s on desktop and under 1.5s on mobile is achievable.
What is the difference between FCP and LCP?
FCP fires when any content first appears — even a small loading spinner counts. LCP fires when the largest visible content element finishes rendering. FCP gives you an early signal; LCP tells you when the page looks meaningfully loaded. LCP is the Core Web Vital; FCP is a supporting diagnostic.
Does FCP affect SEO?
FCP is not directly a ranking factor, but it contributes to Google's Lighthouse performance score and correlates strongly with LCP, which is a Core Web Vital and ranking factor. Improving FCP typically improves LCP and reduces bounce rate.
How does AuditJet report FCP?
AuditJet includes FCP in every automated Lighthouse audit, showing the score alongside Google PageSpeed Insights field data for real-user comparison. AuditJet also surfaces the waterfall opportunities that explain a slow FCP — render-blocking resources, slow TTFB, and font loading delays — so you know exactly what to fix.
Monitor FCP continuously.
AuditJet tracks FCP across all your pages on a scheduled basis and alerts your team the moment it regresses.