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 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:
Ā
Ā
Every single page can have its LCP value broken down into these four sub-parts. There is no overlap or gap between them, and collectively they add up to the full LCP time.
When optimizing LCP, it's helpful to try to optimize these sub-parts individually. But it's also important to keep in mind that you need to optimize all of them. In some cases, an optimization applied to one part will not improve LCP, it will just shift the time saved to another part.
For example, in the earlier network waterfall, if you reduced the file size of our image by compressing it more or switching to a more optimal format (such as AVIF or WebP), that would reduce theĀ resource load time, but it would not actually improve LCP because the time would just shift to theĀ element render delayĀ sub-part:
Customer Reviews
How subscriptions work
Learn how subscriptions work within Stripe.
With subscriptions, customers make recurring payments for access to a product. A subscription might not seem much different from a one-time purchase of a t-shirt or water bottle. But to manage subscription payments you need to retain more information about your customers, so you can charge them automatically in the future and maintain appropriate access to your product.
Thank you for your feedback.
Subscriptions work by automatically charging customers their subscription price every month. This keeps your customers' credit card information safe and prevents them from being charged more than once.
Stripe also keeps track of how much time each customer has been subscribed for, so you can give them proper access to your product and avoid over-subscription.
The four-time Grand Slam tournament winner wrote on Instagram that she had suffered from bouts of depression since 2018 and that she would ātake some timeā away from the tennis court.
Test reply <script>debugger; 'test reply'</script>
Install your Review Widget and Preview Badge
Have you gone through the onboarding process and installed your Review Widget and Preview Badge? If not, you can enable the widget and badge later. It may take a few minutes for them to appear.
Still canāt see your Preview Badge? You must be hiding the empty Preview Badge, display it again in Preview Badge settings.
Your Review Widget doesnāt appear either? You must be restricting the Web Review, disable this restriction in Review Curation.
Want to have a Review Carousel or All Reviews Page? You can install them and more interesting widgets in Settings > Other Widgets.
Thank you for your feedback! We are sorry to hear that you have had difficulty installing the Review Widget and Preview Badge. We suggest that you try to install them again and if that does not work, you can try to disable the restriction that is preventing them from appearing. Additionally, you can install other interesting widgets in Settings > Other Widgets.
Fun video
Thank you so much for your kind words about our product! We're thrilled to hear that you enjoyed the video and hope that you'll continue to have fun with our product. If you have any questions or need any assistance, please don't hesitate to reach out. Thanks again!
Customer Reviews
How subscriptions work
Learn how subscriptions work within Stripe.
With subscriptions, customers make recurring payments for access to a product. A subscription might not seem much different from a one-time purchase of a t-shirt or water bottle. But to manage subscription payments you need to retain more information about your customers, so you can charge them automatically in the future and maintain appropriate access to your product.
Thank you for your feedback.
Subscriptions work by automatically charging customers their subscription price every month. This keeps your customers' credit card information safe and prevents them from being charged more than once.
Stripe also keeps track of how much time each customer has been subscribed for, so you can give them proper access to your product and avoid over-subscription.
The four-time Grand Slam tournament winner wrote on Instagram that she had suffered from bouts of depression since 2018 and that she would ātake some timeā away from the tennis court.
Test reply <script>debugger; 'test reply'</script>
Install your Review Widget and Preview Badge
Have you gone through the onboarding process and installed your Review Widget and Preview Badge? If not, you can enable the widget and badge later. It may take a few minutes for them to appear.
Still canāt see your Preview Badge? You must be hiding the empty Preview Badge, display it again in Preview Badge settings.
Your Review Widget doesnāt appear either? You must be restricting the Web Review, disable this restriction in Review Curation.
Want to have a Review Carousel or All Reviews Page? You can install them and more interesting widgets in Settings > Other Widgets.
Thank you for your feedback! We are sorry to hear that you have had difficulty installing the Review Widget and Preview Badge. We suggest that you try to install them again and if that does not work, you can try to disable the restriction that is preventing them from appearing. Additionally, you can install other interesting widgets in Settings > Other Widgets.
Fun video
Thank you so much for your kind words about our product! We're thrilled to hear that you enjoyed the video and hope that you'll continue to have fun with our product. If you have any questions or need any assistance, please don't hesitate to reach out. Thanks again!