What is FCP? Complete Guide to First Contentful Paint

What is First Contentful Paint (FCP)?

First Contentful Paint (FCP) measures the time from when a page starts loading to when any part of the page's content is rendered on screen. 'Content' includes text, images (including background images), SVG elements, or non-white canvas elements.

FCP is a user-centric metric that captures the moment users first see something happening on the page. It's the answer to 'Is it working?' - that critical first signal that the page is loading.

While not a Core Web Vital itself, FCP contributes to the Lighthouse Performance score and correlates strongly with user perception of speed. A fast FCP makes users feel the site is responsive.

• FCP measures when the first content element appears on screen
• Good FCP: under 1.8 seconds | Needs improvement: 1.8-3s | Poor: over 3 seconds
• Content includes: text, images, SVG, non-white canvas elements
• FCP is different from LCP which measures the largest element

FCP vs LCP: What's the Difference?

FCP and LCP both measure rendering timing, but they capture different moments. FCP fires when any content appears; LCP fires when the largest content element appears.

FCP typically happens before LCP. A page might show a navigation bar (FCP) several seconds before the hero image loads (LCP). Both metrics matter for different reasons.

For SEO, LCP is a Core Web Vital and direct ranking factor. FCP contributes to Lighthouse scores but isn't a ranking signal on its own. However, improving FCP often improves LCP.

• FCP: First ANY content appears (text, image, etc.)
• LCP: The LARGEST content element appears (hero image, main heading)
• FCP usually happens first, LCP follows
• LCP is a Core Web Vital (ranking factor), FCP is not
• Both contribute to Lighthouse Performance score

Why FCP Matters for User Experience

FCP directly impacts perceived performance. Users who see content quickly feel the site is fast, even if the full page takes longer to load. Conversely, a blank screen for 3+ seconds feels broken.

Slow FCP increases bounce rates. Research shows users start abandoning pages after about 3 seconds of seeing nothing. Even if your LCP is good, a slow FCP creates a poor first impression.

FCP also affects how users perceive subsequent loading. A fast FCP followed by progressive loading feels faster than a slow FCP followed by instant completion, even if total load time is similar.

Common Causes of Slow FCP

Render-blocking resources are the primary cause of slow FCP. CSS and JavaScript in the head must download and execute before any content can paint.

Slow TTFB (Time to First Byte) delays everything including FCP. If the server takes 2 seconds to respond, FCP can't possibly be under 2 seconds.

Large, unoptimized resources delay parsing and rendering. A 500KB CSS file or 2MB hero image will push FCP later while the browser downloads and processes them.

• Render-blocking CSS: All CSS blocks rendering by default
• Render-blocking JavaScript: Scripts in head without async/defer block parsing
• Slow server response: High TTFB delays everything
• Large resources: Big CSS/JS files take time to download and parse
• Web font loading: Fonts can block text rendering (FOIT)
• Third-party scripts: External scripts that block the main thread

How to Improve FCP

Start by reducing TTFB. Use a CDN, enable server-side caching, and optimize your backend. Test with our TTFB checker tool.

Eliminate render-blocking resources. Inline critical CSS (above-the-fold styles) directly in HTML, and defer non-critical CSS. Add async or defer to all script tags.

Optimize resource delivery. Enable compression, minify CSS/JS, and use efficient caching. Preload critical resources the browser discovers late.

• Reduce TTFB: Use CDN, caching, faster hosting
• Inline critical CSS: Include above-the-fold styles in HTML head
• Defer non-critical CSS: Load remaining styles asynchronously
• Async/defer scripts: Prevent JavaScript from blocking parsing
• Optimize fonts: Use font-display: swap, preload critical fonts
• Enable compression: Gzip or Brotli for all text resources
• Minify resources: Remove unnecessary bytes from CSS/JS

FCP Optimization Checklist

Work through this checklist systematically to improve FCP. Test after each change using MakeWebsite.fast or Chrome DevTools.

Remember that FCP and LCP optimizations often overlap. Improvements to one usually help the other.

• Test current FCP using MakeWebsite.fast or Lighthouse
• Check TTFB - aim for under 600ms
• Identify render-blocking resources in DevTools Coverage tab
• Inline critical CSS (use tools like Critical or Critters)
• Add async/defer to script tags (or move to body end)
• Preload fonts with font-display: swap
• Enable text compression (Gzip/Brotli)
• Minify CSS and JavaScript
• Consider server-side rendering for faster initial paint