First Contentful Paint (FCP): The Complete Guide

First Contentful Paint, or FCP, measures the time from when a page starts loading to when the first piece of content appears on screen. That content can be text, an image, or a non-blank canvas. A good FCP is 1.8 seconds or faster, and it marks the moment a visitor sees the page is working.

Key Takeaways

• FCP measures when the first visible content appears, the moment a visitor knows the page is loading.
• A good FCP is 1.8 seconds or less, between 1.8 and 3 seconds needs improvement, and over 3 seconds is poor.
• FCP is heavily influenced by server response time, render-blocking resources, and font loading.
• FCP is a foundation for other metrics, since a slow FCP usually means a slow Largest Contentful Paint too.
• Framer websites achieve strong FCP through optimized code delivery, a global content delivery network, and efficient asset loading.

What First Contentful Paint Measures

When a visitor clicks a link, there is a period where the screen is blank. The browser is requesting the page, downloading resources, and preparing to render. First Contentful Paint marks the exact moment that blank screen ends and the first content appears. It is the visitor’s first signal that the site is alive and working.

FCP is a perceived performance metric. It does not measure when a page is fully loaded or interactive. It measures when a visitor stops staring at nothing. That distinction matters, because the wait before any content appears is the most psychologically painful part of loading. A page that shows content quickly feels fast even if it takes longer to fully finish.

FCP in the Performance Picture

FCP is one of several performance metrics Google tracks in tools like Lighthouse and PageSpeed Insights. It is closely related to, but distinct from, the Core Web Vitals. While Largest Contentful Paint is a Core Web Vital, FCP is a key diagnostic metric that often explains why LCP is slow. Our Core Web Vitals guide covers how these metrics fit together.

What Counts as a Good FCP Score

Google defines clear thresholds for FCP based on real-world data.

The Three Thresholds

An FCP of 1.8 seconds or faster is considered good. An FCP between 1.8 and 3 seconds needs improvement. An FCP slower than 3 seconds is considered poor. These thresholds are measured at the 75th percentile of page loads, which means a good rating requires 75 percent of your visitors to experience an FCP of 1.8 seconds or better.

Lab Data Versus Field Data

FCP appears in two forms. Lab data comes from a controlled test, such as a single Lighthouse run, useful for debugging. Field data comes from real visitors with varied devices and connections, collected through the Chrome User Experience Report. Field data is what Google uses to assess your site, so always prioritize it. A fast lab score with a slow field score means your real visitors are having a worse experience than your test suggests.

What Causes a Slow FCP

Several common issues delay the first paint. Diagnosing FCP means working through them in order.

Slow Server Response Time

Before the browser can render anything, it must receive the initial HTML from your server. If your server is slow to respond, every other step is delayed. This initial delay is measured as Time to First Byte. A slow Time to First Byte directly pushes FCP later. Our Time to First Byte guide explains how to reduce this initial server delay.

Render-Blocking Resources

CSS and JavaScript files in the head of your document can block rendering. The browser will not paint content until it has processed render-blocking CSS, and synchronous JavaScript pauses parsing entirely. A page loading several large stylesheets and scripts before any content appears will have a slow FCP. Eliminating or deferring these resources is one of the highest-impact fixes.

Slow Font Loading

Web fonts are a frequent and overlooked cause of slow FCP. If text is set to wait for a custom font to download before displaying, visitors see nothing where text should be. This is called a flash of invisible text. Using a font-display strategy that shows fallback text immediately prevents fonts from delaying the first paint.

Large or Unoptimized Resources

Heavy CSS files, oversized images positioned near the top of the page, and bloated JavaScript bundles all extend the time before content appears. Every kilobyte the browser must download and process before rendering adds to FCP.

How to Improve First Contentful Paint

Improving FCP is a systematic process of removing delays between the request and the first paint.

Reduce Server Response Time

Use quality hosting, enable caching, and serve your site through a content delivery network so visitors connect to a server geographically close to them. A content delivery network can cut hundreds of milliseconds off the initial response, which flows directly into a faster FCP.

Eliminate Render-Blocking Resources

Inline the small amount of critical CSS needed to render content above the fold, and load the rest asynchronously. Defer non-essential JavaScript so it does not block parsing. Minify CSS and JavaScript to reduce file sizes. The goal is to give the browser the minimum it needs to paint, as early as possible.

Optimize Font Delivery

Apply a font-display value that shows fallback text immediately while the custom font loads. Preload critical fonts so the browser fetches them early. Limit the number of font weights and styles you load, since each one is a separate download. Our website speed optimization guide covers font strategy in more detail.

Compress and Optimize Assets

Enable text compression on your server so HTML, CSS, and JavaScript transfer in smaller payloads. Optimize and properly size images, especially those near the top of the page. Our image optimization guide explains modern formats and sizing techniques that reduce load.

FCP and Its Relationship to Other Metrics

FCP rarely fails alone. Because it measures the first content paint, a slow FCP almost always drags down the metrics that follow. Largest Contentful Paint, which marks the largest element rendering, cannot happen until the first paint has happened. If FCP is at 3 seconds, LCP will be later still. Our Largest Contentful Paint guide explains that connection.

This makes FCP a powerful diagnostic starting point. When a page is slow, improving FCP often improves several metrics at once, because you are fixing the early-stage delays that cascade through the entire load sequence. Fix the foundation and the rest of the loading timeline shifts earlier.

FCP on Framer Websites

Framer is built with performance as a default rather than an afterthought. Sites are served through a global content delivery network, so the initial HTML reaches visitors quickly regardless of location, which keeps server response time and FCP low. Framer generates optimized, minified code and handles asset loading efficiently, reducing the render-blocking resources that commonly delay the first paint.

Images are automatically optimized and served in modern formats, and the platform manages font loading sensibly. The practical result is that a well-built Framer site starts with a strong FCP baseline without requiring manual server tuning or build configuration. Performance is engineered into the platform, which means teams spend less time chasing speed problems and more time on design and content. For a broader view of why speed matters to search rankings, see our Core Web Vitals and SEO guide.

Frequently Asked Questions

What is a good First Contentful Paint score?

A good First Contentful Paint is 1.8 seconds or faster, measured at the 75th percentile of real visitors. An FCP between 1.8 and 3 seconds needs improvement, and anything over 3 seconds is considered poor. Aim for the good threshold so the large majority of your visitors see content quickly.

Is First Contentful Paint a Core Web Vital?

First Contentful Paint is not one of the three Core Web Vitals, which are Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. FCP is a key supporting diagnostic metric that Google reports in Lighthouse and PageSpeed Insights, and it strongly influences Largest Contentful Paint.

What is the difference between FCP and LCP?

First Contentful Paint marks when the first piece of content appears on screen. Largest Contentful Paint marks when the largest visible element finishes rendering. FCP always happens first. A slow FCP almost guarantees a slow LCP, which is why FCP is a useful starting point for diagnosing performance.

How can I quickly improve my FCP?

The highest-impact fixes are reducing server response time with caching and a content delivery network, eliminating render-blocking CSS and JavaScript, and optimizing font loading so text appears immediately. Start by testing your page in PageSpeed Insights, which lists the specific resources delaying your First Contentful Paint.