First Contentful Paint
First Contentful Paint (FCP) is one of six metrics tracked in the Performance section of the Lighthouse report. Each metric captures some aspect of page load speed.
Lighthouse displays FCP in seconds:
What FCP measures #
FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn't included.
How Lighthouse determines your FCP score #
Your FCP score is a comparison of your page's FCP time and FCP times for real websites, based on data from the HTTP Archive. For example, sites performing in the ninety-ninth percentile render FCP in about 1.2 seconds. If your website's FCP is 1.2 seconds, your FCP score is 99. See How metric scores are determined to learn how Lighthouse score thresholds are set.
This table shows how to interpret your FCP score:
| FCP time (in seconds) | Color-coding |
|---|---|
| 0–1.8 | Green (fast) |
| 1.8–3 | Orange (moderate) |
| Over 3 | Red (slow) |
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.
How to improve your FCP score #
One issue that's particularly important for FCP is font load time. Check out the Ensure text remains visible during webfont load post for ways to speed up your font loads.
Tracking FCP on real users' devices #
To learn how to measure when FCP actually occurs on your users' devices, see Google's User-centric Performance Metrics page. The Tracking FP/FCP section describes how to programmatically access FCP data and submit it to Google Analytics.
See Google's Assessing Loading Performance in Real Life with Navigation and Resource Timing for more on collecting real-user metrics.
How to improve your overall Performance score #
Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.
Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:
See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.
Resources #
- Source code for First Contentful Paint audit
- FCP Metric Guide
- Lighthouse Scoring Guide
- Paint Timing specification