Introduction

Fcp Explained

5 min read
View contents

FCP (First Contentful Paint): Understanding Initial Page Rendering

Introduction

First Contentful Paint (FCP) measures the time from when a page starts loading to when any part of the page’s content is rendered on the screen. It’s one of the key performance metrics that indicates how quickly users see something meaningful on your page.

FCP is particularly important because it marks the first point at which a user might start perceiving the page as loaded. Before FCP, users see nothing but a blank screen—a frustrating experience that can lead to abandonment.

What is FCP?

FCP measures when the browser renders the first bit of content from the DOM. This includes:

  • Text (any text node)
  • Images (including background images)
  • SVG elements
  • Non-white <canvas> elements

What FCP Measures

Page Load Timeline:
Navigation Start → First Byte → First Paint → FCP → LCP → Page Complete
                                              ↑
                                    First content visible

Key distinction:

  • First Paint (FP): Any visual change (could be just background color)
  • First Contentful Paint (FCP): Actual content visible (text, image, etc.)

FCP Thresholds

According to Google’s web.dev documentation, FCP scores are categorized as:

✅ Good:           ≤ 1.8 seconds
⚠️ Needs Improvement: 1.8 - 3.0 seconds
❌ Poor:           > 3.0 seconds

Goal: At least 75% of page visits should have an FCP of 1.8 seconds or less.

Why is FCP Important?

FCP matters for several key reasons:

1. User Perception

FCP is the moment users know “something is happening.” Before FCP:

  • User sees blank screen
  • Uncertainty about whether the page is loading
  • Higher likelihood of abandonment

2. Lighthouse Performance Score

FCP is one of the six metrics Lighthouse uses to calculate performance scores:

  • FCP: 10% weight
  • LCP: 25% weight
  • TBT: 30% weight
  • CLS: 25% weight
  • Speed Index: 10% weight

3. Relationship to Other Metrics

FCP is related to but distinct from other metrics:

Metric What it Measures
FCP First content appears
LCP Largest content appears
TTFB Server response time
FP First visual change

A good FCP doesn’t guarantee a good LCP, but a poor FCP almost always leads to a poor LCP.

What Affects FCP?

Several factors delay FCP:

1. Slow Server Response (TTFB)

If the server is slow, everything is delayed:

User Request → Server Processing → First Byte → Download HTML → Parse → FCP
              └──────── TTFB ────────┘
              ↑ Slow here delays FCP

2. Render-Blocking Resources

CSS and JavaScript that block rendering prevent FCP:

<!-- These block rendering -->
<link rel="stylesheet" href="large-styles.css">
<script src="blocking-script.js"></script>

<!-- FCP cannot happen until these are processed -->

3. Large CSS Files

CSS blocks rendering by default. Large CSS files delay FCP:

HTML Received → Request CSS → Download CSS → Parse CSS → FCP
                            └──── Delay ────┘

4. Synchronous JavaScript

JavaScript in <head> without async or defer:

<!-- ❌ Blocks rendering -->
<script src="analytics.js"></script>

<!-- ✅ Doesn't block rendering -->
<script src="analytics.js" defer></script>

5. Large HTML Document

Very large HTML files take longer to download and parse.

Basic Best Practices

1. Reduce Server Response Time

Improve TTFB to give FCP a head start:

Optimization techniques:
├── Use a CDN
├── Enable server caching
├── Optimize database queries
├── Use HTTP/2 or HTTP/3
└── Consider edge computing

2. Eliminate Render-Blocking Resources

<!-- Defer non-critical JavaScript -->
<script src="analytics.js" defer></script>

<!-- Async load non-critical CSS -->
<link rel="preload" href="non-critical.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

3. Minimize CSS

Keep CSS small and critical:

<!-- Inline critical CSS -->
<style>
/* Only styles needed for above-the-fold content */
body { margin: 0; font-family: system-ui; }
.header { background: #071952; color: white; }
</style>

<!-- Load full CSS asynchronously -->
<link rel="preload" href="full-styles.css" as="style"
      onload="this.rel='stylesheet'">

4. Preload Critical Resources

Tell the browser what’s important:

<link rel="preload" href="critical-font.woff2" as="font" crossorigin>
<link rel="preload" href="hero-image.webp" as="image">

5. Use Efficient Text Rendering

Ensure text displays quickly:

/* Show text immediately with fallback font */
@font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap;
}

FCP vs LCP: Understanding the Difference

Aspect FCP LCP
What triggers it Any content Largest content
Typical element Text, small images Hero image, main heading
User perception “Page is loading” “Page is loaded”
Threshold 1.8 seconds 2.5 seconds
Core Web Vital No (diagnostic) Yes (ranking factor)

Key insight: FCP is a diagnostic metric that helps identify render-blocking issues, while LCP is the Core Web Vital that affects rankings.

How to Check with UXR SEO Analyzer

The UXR SEO Analyzer extension helps you monitor FCP:

  1. Install the UXR SEO Analyzer extension in Chrome
  2. Navigate to any page on your website
  3. Open the extension
  4. Go to the “Performance” tab
  5. Check the “FCP” evaluator

The extension will show:

  • Current FCP value
  • Whether it meets the 1.8s threshold
  • Render-blocking resources detected
  • Suggestions for improvement

Next Steps

Want to master all advanced FCP optimization techniques? Read our complete FCP optimization guide where we cover:

  • Critical rendering path optimization
  • CSS delivery strategies
  • JavaScript loading patterns
  • Server-side rendering benefits
  • Resource hints and preloading

References

This article cites the following authoritative sources:

[1] web.dev: First Contentful Paint (FCP) https://web.dev/articles/fcp Official Google documentation defining FCP. Explains what content triggers FCP, the 1.8-second threshold, and how FCP relates to other performance metrics like LCP and TTFB.

[2] Chrome Developers: Lighthouse FCP Audit https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint Technical documentation on how Lighthouse measures and scores FCP. Includes detailed recommendations for improving FCP scores and understanding the metric’s impact on overall performance.

[3] MDN Web Docs: Performance API https://developer.mozilla.org/en-US/docs/Web/API/Performance Technical reference for the browser Performance API that enables measuring FCP through paint timing entries. Essential for understanding how FCP is captured in real user monitoring.

Additional Resources

Note: This article is part of our SEO analysis series. Explore all articles in the Performance SEO Hub.

Sources: web.dev (FCP), Chrome Developers (Lighthouse), MDN Web Docs (Performance API)

Related articles

Related version

Detailed guide

Fcp Optimization Guide

First Contentful Paint (FCP) measures when users first see content on your page

Category hub

Hub

Performance Seo Hub

Performance is a critical ranking factor and directly impacts user experience

In the same category

Introduction

Lcp Explained

Largest Contentful Paint (LCP) is one of Google's Core Web Vitals—a set of metrics that measure real-world user experience on your website

Introduction

Ttfb Explained

Time to First Byte (TTFB) measures the time from when a user or client makes an HTTP request to when the first byte of the response arrives at the client's...