First Contentful Paint (FCP)
First Contentful Paint (FCP) is the time from when a page starts loading to when the browser first renders any text, image or other content on screen. It tells you how quickly visitors get visual confirmation that the page is actually loading.
What counts as content
FCP fires when the browser paints the first piece of real content from the page. That includes text (even in a fallback font), images, background images, SVG graphics and non-white canvas elements. A blank white screen or a plain background colour does not count. FCP is different from Largest Contentful Paint, which waits for the biggest visible element, usually the main image or heading, to appear.
What is a good FCP score?
Google’s guidance is that FCP should be 1.8 seconds or less for at least 75% of page visits. Between 1.8 and 3 seconds needs improvement, and above 3 seconds is poor. You can see FCP in PageSpeed Insights, Lighthouse and browser developer tools. Field data from real Chrome users is more reliable than a single lab test.
Why FCP matters for SEO
FCP is not one of the Core Web Vitals used in Google’s page experience signals, so it is not a direct ranking factor on its own. It still matters for two reasons. First, a slow FCP almost always means a slow LCP, because nothing large can appear before something small does. Second, people abandon pages that stay blank, which hurts engagement and conversions whatever happens in search.
What slows FCP down
- A slow Time to First Byte, which delays everything after it.
- Render-blocking resources such as large CSS files and synchronous scripts in the head.
- Web fonts that hide text until they download.
- Pages built entirely with JavaScript, where the browser must download and run code before showing anything.
- Large, uncompressed HTML, CSS and JavaScript files.
How to improve FCP
- Speed up the server response with caching and a content delivery network.
- Inline the small amount of critical CSS needed for the top of the page and load the rest later.
- Add
deferorasyncto scripts that are not needed for the first render. - Use
font-display: swapso text shows in a fallback font while web fonts load. - Apply minification and text compression to reduce file sizes.
- Consider server-side rendering for JavaScript-heavy sites so the HTML arrives ready to display.
A common myth
Some people treat a fast FCP as proof a page is fast. It is not. A page can show a logo quickly and still take several seconds to display its main content or respond to taps. Use FCP as an early warning sign alongside LCP and other metrics.
Further reading: web.dev’s guide to First Contentful Paint.
Key Takeaways
- FCP measures when the first text or image appears on screen.
- A good FCP is 1.8 seconds or less for most visits.
- FCP is not a Core Web Vital, but a slow FCP usually means a slow LCP.
- Server speed, render-blocking CSS and JavaScript, and web fonts are the usual culprits.
- Inlining critical CSS and deferring scripts are common fixes.
Related Terms
Not sure how your own site measures up? Request a free SEO review, or keep learning in the SEO Encyclopedia.