What is First Contentful Paint (FCP)?First Contentful Paint (FCP) is a web performance metric that measures the time from when the browser starts loading a page to when any part of the page content (text, images, canvas rendering, non-white background) is first rendered on screen. FCP marks the point where users first see visual
What is First Contentful Paint (FCP)?
First Contentful Paint (FCP) is a web performance metric that measures the time from when the browser starts loading a page to when any part of the page content (text, images, canvas rendering, non-white background) is first rendered on screen. FCP marks the point where users first see visual feedback that the page is actually loading, transitioning from a blank white screen to initial content. While LCP measures when the primary content is visible, FCP measures the first sign of any content at all.
FCP and Core Web Vitals
FCP is not one of the three official Core Web Vitals (which are LCP, INP, and CLS), but it appears in PageSpeed Insights and Lighthouse reports and contributes to overall performance scores. Good FCP is under 1.8 seconds; needs improvement is 1.8-3.0 seconds; poor is above 3.0 seconds. Improving FCP generally involves the same optimizations as LCP improvement: reducing render-blocking resources, optimizing server response time (TTFB), and ensuring critical above-the-fold content is in the initial HTML rather than loaded by JavaScript.
Frequently Asked Questions
How is FCP different from LCP?
FCP measures the first paint of any content (which might be a loading spinner, a small navigation element, or a single word of text). LCP measures when the largest meaningful content element has fully rendered. For user experience, LCP is more important: users tolerate a brief blank screen (poor FCP) much more gracefully than long waits for the main content to appear (poor LCP). Optimizing for LCP typically improves FCP as a side effect, since the same techniques (reducing render-blocking, optimizing server response) benefit both metrics.
What causes poor FCP on SaaS websites?
Primary FCP killers: render-blocking CSS (CSS in the head that must be fully downloaded and parsed before any rendering begins), render-blocking JavaScript (JS that executes synchronously before rendering), slow TTFB (server takes too long to send the initial HTML), and excessive CSS file size. Solutions include: moving non-critical CSS to deferred loading, inlining critical CSS for above-the-fold content, deferring non-critical JavaScript, reducing server response time through caching and infrastructure optimization, and minimizing the initial page weight loaded before first render.