First Contentful Paint (FCP)

Understanding First Contentful Paint

First Contentful Paint (FCP) measures the moment the browser first paints any content at all: text, an image, a background image, an <svg> element, or a non-white <canvas>. It answers a narrow question — has anything appeared yet — which is why it is a measure of perceived load speed rather than of the main content being ready. That distinction matters: the arrival of the largest element is a different metric entirely (Largest Contentful Paint). Where DOMContentLoaded reports on the document rather than on pixels, FCP reports the first moment a visitor sees evidence that the page is loading at all.

FCP is measured from the moment navigation starts (the user clicks a link or enters a URL) until the browser paints the first content of any kind. Google's thresholds classify FCP as good at under 1.8 seconds, needs improvement between 1.8 and 3.0 seconds, and poor above 3.0 seconds. The metric is collected from real users through the Chrome User Experience Report (CrUX) and reported at the 75th percentile — meaning 75% of your visitors must experience FCP under 1.8 seconds for your page to pass.

Common causes of poor FCP include unoptimized images (missing width/height attributes, no modern formats like WebP or AVIF), render-blocking CSS and JavaScript, slow server response times (high TTFB), and third-party scripts that compete for main thread resources. Diagnosing FCP issues requires identifying the specific FCP element using Lighthouse, PageSpeed Insights, or Chrome DevTools' Performance panel, then addressing the bottleneck preventing that element from rendering quickly.

Why First Contentful Paint Matters

FCP is not one of Google's three Core Web Vitals — those are LCP, INP and CLS — and it is not itself a ranking factor. It is a diagnostic that usually moves in the same direction as the metrics that are. Pages that fail FCP thresholds are at a measurable disadvantage in search rankings compared to competitors with equivalent content and authority but better performance. While content relevance remains the dominant ranking factor, FCP can be the tiebreaker in competitive SERPs where multiple pages satisfy the same intent equally well.

Beyond rankings, FCP has a direct impact on conversion rates and user engagement. A blank screen gives a visitor no signal that anything is happening, and the longer it lasts the more likely they are to leave before the page finishes loading. Treat FCP as a diagnostic for that first impression: it tells you how quickly the browser can paint anything at all, which is usually gated by server response time and render-blocking CSS or JavaScript rather than by the size of your hero image.

Best Practices

• Identify your FCP element on each key page using PageSpeed Insights or Chrome DevTools, then prioritize optimization efforts specifically for that element rather than applying generic speed fixes.
• Preload the FCP image using in the document head, and serve it in modern formats (WebP or AVIF) with proper width and height attributes to eliminate layout shifts.
• Reduce server response time (TTFB) to under 800ms by implementing server-side caching, using a CDN, and optimizing database queries — FCP cannot be fast if the initial HTML response is slow.
• Eliminate render-blocking resources by deferring non-critical JavaScript with the defer attribute and inlining critical CSS needed for above-the-fold content directly in the HTML document head.
• Avoid lazy-loading the FCP element — lazy loading is designed for below-the-fold images and will actively harm FCP if applied to the hero image or primary content element.
• Set up real user monitoring (RUM) with the web-vitals JavaScript library to track FCP in production across devices and connection speeds, rather than relying solely on lab-based Lighthouse scores.