What is FCP?
First Contentful Paint (FCP) measures the time from page navigation until any text, image, non-white canvas, or SVG is first rendered. It marks the first moment the user sees any visual feedback that the page is loading.
What problem does it solve?
FCP tells you how quickly users get reassurance that something is happening. A blank white screen for more than ~1 second creates anxiety and increases bounce rate, even if the rest of the page loads quickly.
What is a good FCP score?
How to improve FCP
The key is to tackle issues related to each contributing phase.
Server response (TTFB)
FCP cannot begin until the browser receives HTML. A slow TTFB directly delays the first paint — the two metrics are causally linked.
Fix TTFB first. Page caching and a CDN are the highest-leverage improvements — they shift FCP earlier without any frontend changes. See the TTFB metric page.
Render-blocking resources
CSS files in <head> block rendering until fully parsed. Synchronous <script> tags do the same. The browser will not paint anything until all blocking resources are processed.
Inline critical CSS (styles needed for above-the-fold content). Load non-critical CSS asynchronously. Move scripts to end of body or add defer/async attributes.
Resource download size
Large CSS or font files take longer to download before the first paint can happen. A slow CDN or origin server compounds this.
Minimise and compress CSS. Preload critical fonts with <link rel="preload">. Serve assets from a CDN edge node close to the user.
Root cause analysis, not plugin guessing. Baseline from field data or lab — wherever you are.