GlossarySEO
What is First Contentful Paint (FCP)?
Also called: FCP, first paint
Definition
First Contentful Paint (FCP) measures how long it takes for any content, such as text, an image or an SVG, to first appear on screen. Good FCP is 1.8 seconds or less.
First Contentful Paint (FCP), explained
web.dev defines FCP as the time from when the user first navigated to the page to when any part of the page's content is rendered on the screen. Content means text, images including background images, <svg> elements and non-white <canvas> elements. It's the moment a visitor sees that something is happening.
The thresholds are 1.8 seconds or less for good and more than 3 seconds for poor, at the 75th percentile of page loads. FCP isn't a Core Web Vital, but it's part of the Lighthouse performance score and appears in PageSpeed Insights, and it's often the first thing to fix because it sits upstream of Largest Contentful Paint.
The gap between TTFB and FCP is usually render-blocking work. The browser has the HTML but won't paint until it has downloaded and processed the CSS and synchronous scripts in the head. Web fonts that block text rendering add more delay. The gap between FCP and LCP is usually the main image or the main content loading late.
web.dev's list of fixes starts with eliminating render-blocking resources, then minifying and removing unused CSS and JavaScript, reducing server response time, preconnecting to required origins, and making sure text stays visible while web fonts load, for example with font-display: swap. On a static site with inlined critical CSS, FCP is often close to TTFB.
Why it matters for founders
A blank screen for two seconds makes visitors bounce before they see your pitch. FCP is the quickest signal that your page's critical path is too heavy.
Example
Your landing page loads three font files and a large CSS bundle in the head, and FCP is 2.9s on mobile. You inline critical CSS, preload one font with font-display: swap, and FCP drops to 1.4s.
Common mistakes
- Blocking scripts in the head without
defer. - Fonts that hide text until they load.
- Treating FCP as the whole speed story.
- Large CSS bundles for pages that use a fraction of the styles.
Sources
Checked
Related terms
- Render-blocking resourcesRender-blocking resources are CSS and JavaScript files the browser must download and process before it can show anything on screen. Lighthouse flags them because they delay first paint.
- Largest Contentful Paint (LCP)Largest Contentful Paint (LCP) is a Core Web Vital measuring how long it takes for the largest image or text block in the viewport to render. Google's target is 2.5 seconds or less for 75% of page loads.
- Time to First Byte (TTFB)Time to First Byte (TTFB) is the time from starting to navigate to a page until the first byte of the response arrives. It's not a Core Web Vital, but it delays everything after it, including LCP.
- LighthouseLighthouse is Google's open-source tool that audits a web page for performance, accessibility, best practices and SEO, and gives each category a 0–100 score with specific fixes.