What is First Contentful Paint (FCP)?
First Contentful Paint (FCP) is a performance metric that measures the time from when a page starts loading to when the browser renders the first piece of DOM content — any text, image, non-white canvas, or SVG. It is the first signal a user receives that the page is actually loading.
What FCP Measures
FCP marks the point at which the user sees that something is happening. It does not need to be the full page — even a loading indicator or partial text qualifies. FCP is a leading indicator of perceived performance: low FCP makes users feel the site is responsive, even if the main content (LCP) takes a moment longer.
What is a Good FCP Score?
What Causes Poor FCP Scores?
- ✗High server response time (TTFB) — the browser cannot paint anything until it receives the first byte of HTML
- ✗Render-blocking resources — JavaScript and CSS in <head> that must download and execute before any rendering occurs
- ✗Large HTML payloads — pages with many DOM elements require more parsing time before the first paint
- ✗Slow DNS lookup or connection setup — adds latency before the HTML even starts downloading
- ✗No HTTP/2 or HTTP/3 — older HTTP protocols serialize requests, increasing time to receive critical resources
How to Fix FCP
- ✓Improve TTFB through server-side caching (Redis, page cache) or a CDN with edge caching
- ✓Eliminate render-blocking scripts using defer or async attributes, or move scripts to the end of <body>
- ✓Inline critical CSS (above-the-fold styles) and load the full stylesheet asynchronously
- ✓Preconnect to critical third-party origins with <link rel="preconnect">
- ✓Enable HTTP/2 or HTTP/3 to allow parallel resource downloads
- ✓Reduce server-side processing time for the initial HTML response
Check Your FCP Score
Check your FCP score with a free Lighthouse audit at speedexporter.com. The export includes your exact FCP timing, score, and the specific audits that explain what is causing it.
Run a free Lighthouse audit →Frequently Asked Questions
What is a good FCP score?
Google considers FCP "good" at 1.8 seconds or under. Between 1.8 and 3.0 seconds needs improvement. Above 3.0 seconds is poor.
Is FCP a Core Web Vital?
FCP is a Lighthouse metric and contributes to the overall performance score, but it is not one of Google's three Core Web Vitals. The Core Web Vitals are LCP (loading), INP (interactivity), and CLS (visual stability). However, improving FCP typically improves LCP as well.
What is the difference between FCP and TTFB?
Time to First Byte (TTFB) is when the browser receives the first byte of the HTML response. First Contentful Paint (FCP) is when the browser renders the first visible content. Every millisecond of TTFB delays FCP directly.
What is the difference between FCP and LCP?
FCP measures when the first piece of content renders. LCP measures when the largest piece of content renders. FCP is always faster than or equal to LCP. FCP is a good indicator of perceived responsiveness; LCP is a better indicator of when the page is truly useful to the user.