Web Performance
First Contentful Paint (FCP)
First Contentful Paint (FCP) is a web performance metric that measures the time from navigation start until the browser renders the first visible DOM element containing text, images, SVGs, or non-white canvas elements.
Explained
First Contentful Paint (FCP) measures the time from when a page starts loading to when the first piece of visible content is rendered on the screen. It captures the moment users first see text, images, SVGs, or non-white canvas elements, giving them visual confirmation that the webpage is loading.
Unlike First Paint, which records any visual change, FCP focuses specifically on contentful rendering. It is distinct from Largest Contentful Paint (LCP), which measures when the largest above-the-fold element becomes visible. FCP is part of Google's Core Web Vitals and Page Experience signals, making it a foundational element of modern SEO and user-experience strategy.
Why FCP Matters
A fast FCP improves perceived performance, reduces bounce rates, and supports higher conversion rates. The guide notes that achieving an FCP under 1.8 seconds is considered "Good," while slower pages risk poorer user engagement and competitive disadvantage.
Key Optimization Areas
- Critical resource prioritization – use
preloadandpreconnectfor essential CSS, fonts, and above-the-fold assets. - Above-the-fold optimization – inline critical CSS and defer non-critical resources.
- Server response time – target Time to First Byte (TTFB) under 200ms through CDN, caching, and server-side rendering.
- Font loading – use
font-display: swapand preload critical fonts. - Image optimization – compress images, use modern formats such as WebP and AVIF, and lazy-load non-critical media.
- JavaScript minimization – defer or async non-critical scripts and avoid render-blocking JavaScript in the document head.