First Contentful Paint
First Contentful Paint (FCP) is one of six metrics tracked in the performance section of the Lighthouse report. Each of these metrics captures some aspect of page load speed. The Lighthouse reports displays the FCP time period in seconds:
What does FCP measure
FCP specifically captures the time from navigation to when the browser renders the first bit of content from the DOM. As explained in the Paint Timing specification, it reports the "time when the browser first renders any text, image (including background images), non-white canvas or SVG". FCP doesn't include the time it takes for content to appear within an iframe, but it does include text with pending web fonts.
How Lighthouse determines your FCP score
In order to be able to calculate your overall performance score, Lighthouse assigns each performance metric an individual score between 0 - 100. The FCP score, in it's simplest terms, is based on a comparison between how fast your FCP is, compared to FCP metrics of real website performance data on HTTParchive.
For example, sites performing in the top 99 percentile render FCP in about 1.5 seconds. If your website's FCP is 1.5 seconds, your FCP score is 99. This table helps explain how to interpret your FCP score:
| FCP metric (in seconds) | Color-coding | FCP score (HTTParchive %-tile) |
|---|---|---|
| 0 - 2 seconds | Green (fast) | 75 - 100 |
| 2 - 4 seconds | Orange (average) | 50 - 74 |
| Over 4 seconds | Red (slow) | 0 - 49 |
How your FCP score impacts overall performance score
The overall Lighthouse performance score is a weighted-average of the performance metrics, including FCP, as well as, First Meaningful Paint, First CPU Idle, Time to Interactive, and Speed Index.
Heavier-weighted metrics have a larger impact on the overall performance score. FCP is weighted 3 out of 5, which means it has an average impact on the overall performance score (see Scoring Details for specifics).
Try also the Scoring Calculator to get a better sense of how Lighthouse scoring works.
How to improve your performance score
Improving your Lighthouse performance score isn't so much about tackling one performance metric at a time, but seeing page load speed more holistic. Anything you do to improve page load speed, will improve not just one performance metric, but quite likely all of these metrics.
The most effective way to improve your performance score is to fix the load opportunities highlighted in your Lighthouse report. The more significant the opportunity, the greater impact it will have on improving your performance score.
For example, Eliminate render-blocking resources shows opportunities to improve page load speed (in seconds). Eliminate any one or all of the blocking resources, and not only will your FCP score improve, but so will additional performance metrics, and your overall Lighthouse performance score.
In addition to the potential savings in the Opportunities section of the Lighthouse report, one Diagnostics audit of importance to FCP is Ensure text remains visible during webfont load. Font loads can significantly impact FCP so look for ways to speed up them up.
Learn more about these potential savings from the Performance audits landing page.
Tracking FCP on real user's devices
To measure when FCP actually occurs on your users' devices, see Tracking FP/FCP. This section describes how to programmatically access FCP data and submit it to Google Analytics.
See Assessing Loading Performance in Real Life with Navigation and Resource Timing for more on collecting real-user metrics.
More information
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.