First Contentful Paint (FCP): When Content First Becomes Visible
First Contentful Paint is the moment the first piece of visible content renders, from text to images, as a page loads.
First Contentful Paint (FCP) is the moment the first piece of visible content renders.
What It Is
First Contentful Paint (FCP) marks the moment when the first piece of content a visitor can see appears on screen.
That content can be text, an image, a background image, or a canvas element.
How It Differs
- FCP is about content becoming visible, not about the user being able to interact.
- Time to Interactive (TTI) measures when the page becomes usable.
- Largest Contentful Paint (LCP) tracks when the main content finishes loading.
Why It Matters
- Visitors perceive a fast page by how quickly something appears.
- A blank screen for more than a second or two drives people away.
- It feeds into page experience signals alongside Core Web Vitals.
How to Improve
- Minimize render-blocking CSS and JavaScript.
- Serve static assets from a fast CDN.
- Preload the hero image and fonts.
- Avoid oversized above-the-fold images.
Before: a page keeps the first screen blank for three seconds while scripts load.
After: CSS and scripts are optimized so the headline renders in under a second.
The result: visitors see content almost instantly and stay on the page.
The lesson: people judge a page by how fast something appears.
Quick Tip
Aim for FCP under 1.8 seconds, and watch LCP too, since LCP is the Core Web Vitals version of the same idea.
Frequently Asked Questions
First Contentful Paint, in Short
Fast paint is the first impression.
Give visitors something to look at within the first couple of seconds.