First Contentful Paint (FCP)What it checks and how to fix it

What it checks

Reads First Contentful Paint, the moment the first text or image appears, from a Lighthouse mobile run on the page. Under 1.8 s passes, under 3 s warns, and 3 s or more fails. It runs on the pages chosen for Lighthouse.

Why it matters

Until the first content appears the visitor sees a blank screen and has no sign the page is working. A slow FCP is usually caused by a slow server response, render-blocking CSS and JavaScript or web fonts that hide text, and it is the point where impatient visitors give up.

How to fix it

Shorten the path to the first paint:

• Reduce server response time (see Time to First Byte) and serve the HTML through a CDN.
• Inline critical CSS and load the rest asynchronously.
• Add defer to scripts in the head.
• Use font-display: swap so text shows before web fonts load.

<head>
  <style>/* critical above-the-fold CSS */</style>
  <link rel="stylesheet" href="/assets/app.css" media="print" onload="this.media='all'">
  <script src="/assets/app.js" defer></script>
</head>