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: