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

Question

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?

Breeding

I haven't come across any page which has LCP < FCP. Could you please share the url of the page. Would like to do a profiling to see if this possible. May be i can help to figure out the reason behind this. – Eaglewood

Answer 1

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.

Basinger

Hmm, I'm seeing this on some (individual) load events using web-vitals (3.4.0) with the respective callbacks. Could there ever be an instance where LCP is fired after FCP? – Downtoearth

The only way this can happen with the web-vitals JS library is if the LCP image is served from another origin that doesn't set the TIMING-ALLOW-ORIGIN header. In this case the LCP time will be reported as the image load time rather than the render time (which could be before FCP); however, in these cases the load time is not the "real" LCP. – Basinger