First Contentful Paint (FCP)
First Contentful Paint (FCP) measures the first visible content during page load - critical for user experience and loading speed.
What is First Contentful Paint (FCP)?
First Contentful Paint (FCP), roughly translated as "first contentful render," is a metric for measuring a webpage's loading speed. It measures the time from the start of the page request until the moment the browser displays the very first content—that is, the first time something visible appears on the previously blank screen. This first content can be text, an image, a graphic, or any other non-white element.
From a user's perspective, FCP answers a crucial question: "Is anything happening at all?" It is the moment when a visitor first receives feedback that the page is loading and is no longer just looking at a blank screen. As such, FCP is an important indicator of the perceived speed of a webpage.
What are good values?
Google provides clear benchmarks for FCP, measured in seconds:
- Good: under 1.8 seconds
- Needs improvement: between 1.8 and 3.0 seconds
- Poor: over 3.0 seconds
The faster the first content appears, the more responsive a page feels, and the lower the risk that impatient visitors will bounce prematurely.
The difference to Largest Contentful Paint (LCP)
FCP is often confused with the better-known Largest Contentful Paint (LCP). Both measure loading times, but different ones:
- First Contentful Paint (FCP): When does the very first piece of content appear? This can be a small element, such as a first line of text.
- Largest Contentful Paint (LCP): When is the largest, most important content element loaded, such as the main header image or the primary heading?
FCP always occurs earlier than LCP. In simple terms: FCP marks the first sign of life from the page, while LCP marks the moment when the main content becomes visible.
Important: FCP is not a Core Web Vital
A common misconception is that FCP is one of the three Core Web Vitals. These are LCP (loading performance), INP (interactivity), and CLS (visual stability). FCP is therefore not a direct, independent ranking factor. Instead, it is a supplementary, diagnostic metric that Google reports in tools like PageSpeed Insights and Lighthouse. Its significance lies in its close connection to overall loading performance: a poor FCP often leads to a poor LCP. Improving FCP generally also improves the Core Web Vitals that are relevant for ranking.
What slows down FCP?
The most common causes of a slow First Contentful Paint are:
- Slow server response: If the server responds sluggishly, everything else is delayed. This initial waiting time is also known as Time to First Byte (TTFB).
- Render-blocking resources: CSS and JavaScript files that must be loaded and processed before the browser can display anything at all.
- Slow-loading fonts: If text only appears after an external font has loaded, this delays the visible content.
- Too much code in the initial load: Bloated or unoptimized code that must be processed before the first render.
How can you improve FCP?
- Speed up server response: Good hosting, caching, and the use of a Content Delivery Network (CDN) reduce the initial waiting time.
- Reduce render-blocking code: Optimize, combine, and, where possible, defer loading of CSS and JavaScript that is not immediately needed.
- Prioritize loading critical CSS: Provide the styles for the immediately visible area first so the browser can render sooner.
- Optimize fonts: Integrate fonts efficiently and ensure text is displayed even while fonts are loading.
- Use browser caching: So returning visitors do not have to reload resources.
Lab Data and Field Data
As with other performance metrics, FCP is also distinguished between lab data (simulated tests under standardized conditions, such as in Lighthouse) and field data (real measurements from actual users). Both are useful: lab data helps with targeted troubleshooting during development, while field data shows how quickly the page loads for actual visitors.
Conclusion
First Contentful Paint measures how quickly the first visible content appears after a page is requested, making it an important indicator of perceived speed and the first impression of a webpage. Unlike the well-known LCP, FCP marks the first sign of life from the page, not the loading of the main content. Important to note: FCP is not a Core Web Vital and not a direct ranking factor, but it is closely linked to overall loading performance. Improving FCP through faster server response, less render-blocking code, and optimized fonts ensures a better first impression and usually also improves the Core Web Vitals that are relevant for ranking.