DevToolbox

FCP First Contentful Paint Guide — Measuring Initial Render

Learn about First Contentful Paint (FCP), what it measures, how it differs from LCP, and strategies to achieve FCP under 1.8 seconds for a fast perceived load.

Supplementary Metrics

Detailed Explanation

First Contentful Paint (FCP) Explained

FCP measures the time from navigation to when the browser renders the first bit of content from the DOM. This could be text, an image, an SVG, or a non-white canvas element. It is the first moment the user sees something happening on screen.

FCP vs LCP

FCP and LCP are both loading metrics but measure different things:

Metric What It Measures Good Threshold
FCP First any content rendered ≤ 1.8s
LCP Largest content element rendered ≤ 2.5s

FCP fires when the first text or image appears. LCP fires when the largest element finishes rendering. A page might show a spinner at 0.8s (FCP) but not show the hero image until 3.5s (LCP). In this case FCP is good but LCP is poor.

What Blocks FCP

  1. Server response time (TTFB) — FCP cannot start until the first byte arrives
  2. Render-blocking CSS — The browser must download, parse, and apply all CSS in <link> tags before rendering anything
  3. Render-blocking JavaScript — <script> tags in the <head> without async or defer block rendering
  4. Large HTML payloads — A very large HTML document takes longer to parse

Optimization Strategies

<!-- Inline critical above-the-fold CSS -->
<style>
  body { margin: 0; font-family: system-ui; }
  .hero { min-height: 100vh; }
</style>

<!-- Defer non-critical CSS -->
<link rel="preload" href="/styles/full.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- Preconnect to critical origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Use server-side rendering (SSR) or static site generation (SSG) to send meaningful HTML from the server. Client-side rendered SPAs often have poor FCP because the initial HTML is an empty shell.

Use Case

FCP optimization matters for any site where users expect immediate visual feedback. Search engine landing pages, mobile web apps, and progressive web apps (PWAs) all benefit from a fast FCP. A quick FCP reassures users that the page is loading, even if the full content (LCP) takes slightly longer.

Try It — Web Vitals Reference

Open full tool →

Related Topics

TTFB Optimization — Time to First Byte Best Practices

Supplementary Metrics

LCP Optimization Strategies — Largest Contentful Paint Guide

Core Web Vitals

Server-Side Rendering and TTFB — SSR Performance Guide

Architecture

CLS Layout Shift Causes and Fixes — Cumulative Layout Shift Guide

Core Web Vitals

Core Web Vitals Scoring Thresholds — Complete Reference

Reference