First Contentful Paint (FCP): The Psychology of the First Hit
FCP is the moment users know your page is alive. Learn what influences FCP, why it matters psychologically, and how to make your pages paint faster.
There's a moment during every page load where the user makes a subconscious decision: "Is this working, or should I go back?" That moment is First Contentful Paint (FCP) — the instant the browser renders the first piece of DOM content.
What FCP Measures
FCP marks the time from when navigation starts to when the browser renders the first bit of content from the DOM. This could be text, an image, an SVG, or a non-white canvas element.
FCP Thresholds
| FCP | Rating |
|---|---|
| ≤ 1.8s | Good |
| 1.8–3.0s | Needs Improvement |
| > 3.0s | Poor |
The Psychology Behind FCP
Research in human-computer interaction shows that users perceive wait times in distinct phases:
- 0–100ms: Instant — user feels the response is immediate
- 100–300ms: Slight delay — noticeable but acceptable
- 300ms–1s: Noticeable lag — user is aware they're waiting
- 1–3s: User starts to wonder if something is wrong
- 3s+: User considers leaving
FCP is your page's first chance to say "I'm here, I'm working, content is coming." Without it, users stare at a blank screen and their patience timer starts ticking.
The "Perceived Performance" Effect
A page that shows a navigation bar and some text at 500ms, then loads the hero image at 2s, feels dramatically faster than a page that shows nothing until 2s and then renders everything at once — even though the total load time is identical.
This is why FCP matters even though LCP is technically more important for your performance score. FCP buys you time.
What Blocks FCP
Render-Blocking CSS
The browser won't render anything until it has processed all CSS in the <head>. A large, unoptimized stylesheet loaded from a slow CDN can delay FCP by seconds.
Render-Blocking JavaScript
Synchronous <script> tags in the <head> block both parsing and rendering. The browser stops everything to download, parse, and execute the script.
Slow Server Response (TTFB)
FCP can't happen until the HTML arrives. If your server takes 2 seconds to respond, FCP will be at least 2 seconds.
Large HTML Documents
Massive HTML files take longer to download and parse. This is common with inline SVGs, embedded data, or server-rendered pages with lots of content.
Web Font Loading
If your CSS specifies font-display: block (the default in some browsers), text won't render until the custom font downloads. This delays FCP for text content.
How to Improve FCP
1. Inline Critical CSS
Extract the CSS needed for the initial viewport and inline it in the <head>:
<head>
<style>
body { margin: 0; font-family: system-ui; }
.header { background: #1a1a2e; color: white; padding: 1rem; }
</style>
</head>
2. Defer Non-Critical JavaScript
Use defer or async on scripts that aren't needed for the initial render:
<script src="/app.js" defer></script>
3. Preconnect to Required Origins
If you load fonts or assets from external domains, preconnect early:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.yoursite.com">
4. Use font-display: swap
Show fallback text immediately while custom fonts load:
@font-face {
font-family: 'CustomFont';
font-display: swap;
src: url('/font.woff2') format('woff2');
}
5. Reduce Server Response Time
- Use a CDN for static assets
- Implement server-side caching
- Optimize database queries
- Consider static site generation for content pages
6. Minimize HTML Size
- Remove unnecessary comments and whitespace (your build tool should do this)
- Avoid inline SVGs when external references work
- Don't embed large data-URIs
FCP in the Lighthouse Score
FCP accounts for 10% of your Lighthouse performance score. While it's the lowest-weighted metric, it has an outsized impact on user perception because it's the first visible signal of progress.
FCP vs. LCP: The Difference
| Aspect | FCP | LCP |
|---|---|---|
| Measures | First content rendered | Largest content rendered |
| Typically | Nav bar, text, small image | Hero image, headline |
| Threshold | 1.8s | 2.5s |
| User perception | "Page is alive" | "Page is loaded" |
| Lighthouse weight | 10% | 25% |
Monitor Your FCP
FCP regressions often go unnoticed because developers test on fast machines with warm caches. BadPageSpeed catches FCP degradations the moment they happen.
Ready to stop wasting ad spend?
Track your landing page performance, monitor Core Web Vitals, and calculate exactly how much slow pages cost you.
Start Free — No Credit Card