First Contentful Paint (FCP).

Performance Core Web Vitals & Page Load

Time until the first text or image appears — target <= 1.8s

What does this check test?

First Contentful Paint measures the time from when the page starts loading to when any part of the page's content is rendered on screen. 'Content' includes text, images (including background images), `<svg>` elements, and non-white `<canvas>` elements. FCP is distinct from First Paint, which may include non-content rendering like background colors. Google considers FCP 'good' at 1.8 seconds or less. FCP marks the first point at which the user can see that something is happening on the page.

Why does it matter?

FCP is a critical perception metric — it answers the question 'Is it happening?' for the user. A fast FCP reassures users that the page is loading and reduces the likelihood of abandonment. While not a Core Web Vital itself, FCP directly influences LCP (your LCP can never be faster than your FCP) and contributes 10% to the overall Lighthouse performance score. Slow FCP is often a symptom of deeper server-side or network issues that affect all other metrics.

Who is affected?

Every website is measured on FCP, but server-rendered pages, static sites, and content-focused websites benefit most from optimizing it. Sites that rely heavily on client-side rendering (CSR) tend to have poor FCP because the browser must download, parse, and execute JavaScript before any content appears. Users on slow 3G connections or low-end mobile devices are most impacted by poor FCP.

Where does this apply?

FCP depends on the critical rendering path — the sequence of steps the browser must complete before rendering the first pixel of content. Bottlenecks occur at: DNS resolution, TCP/TLS connection, server response time (TTFB), HTML download and parsing, render-blocking CSS/JS, and font loading. The FCP element is typically the first visible text or image in the HTML document order.

How to fix it

Reduce server response time (TTFB) by using a CDN, optimizing server-side code, and enabling caching. Eliminate render-blocking resources: inline critical CSS directly in `<head>` using `<style>` tags, and defer non-critical CSS. Defer non-critical CSS:

html

<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="/styles.css" /></noscript>

Preconnect to required origins and defer JavaScript:

html

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<script defer src="/app.js"></script>

For font-dependent FCP, use `font-display: swap` to render text immediately with a fallback font. If using a JavaScript framework with client-side rendering, switch to server-side rendering (SSR) or static generation (SSG) to send HTML content in the initial response.

References

AppVet checks First Contentful Paint (FCP) automatically

Run a free performance scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks