CODEWITHSUNDEEP
javascriptgoogle-chromesitespeedweb-vitals
Jonathan Cuningham
Jonathan Cuningham

Reputation: 71

Largest Contentful Paint (LCP) less than First Contentful Paint (FCP)

My company has asked me to add some site speed metrics to our site to help identify less than optimal user experiences. Using a custom HTML Google Tag Manager (GTM) tag, I added PerformanceObserver(s) for both First Contentful Paint (FCP) and Largest Contentful Paint (LCP).

I implemented the observers based on the guides from https://web.dev/user-centric-performance-metrics/

The issue is on some pages the LCP is lower than the FCP. Based on my understanding, this should not happen because even if the first paint was also the largest paint, the number should be the same.

Can anyone please explain if this is possible and under what circumstances it will?

Upvotes: 7

Views: 3020

Answers (1)

Philip Walton
Philip Walton

Reputation: 30461

LCP can never be lower than FCP for an individual page load, but in aggregate it can be lower. This is because some page loads can have an FCP value but no LCP value (for example, if the user leaves the page before the largest image finishes loading).

The results is your analytics data might show a lower median or p75 value for LCP. If this is happening, it's likely a sign that many of your users are experience slow page loads and are leaving after seeing part of the page render but not all of it.

Upvotes: 3

Related Questions