WebPageTest's recently launched Web Vitals Page allows you to see debugging details related to the Core Web Vitals(LCP, TBT and CLS) which is very helpful.
I thought of digging into it to see what might be the possible reason. I looked at the results for
PerformanceObserver API for LCP and saw that the
element is being reported as
I googled it and found one reference to it where it was found that it can be
null if the element which was reported for LCP has been removed from DOM.
I created a sample page to test this out
Note that even though in the stable state H2 is visible to the user but H1 is considered LCP Element because H1 and H2 have the same size. If H2 had a bigger size than H1 then H2 would have counted as LCP.
Now what remained to figure out was which script exactly is to blame for this replacement of the element with the same size due to which LCP Element being reported is
Through some debugging, I found that
vendor-xxx.js is responsible for the removal of the elements and replacing them with new elements of the same sizes probably during hydration.
This experience told me that in the wild there would be a lot of cases where LCP Element is not being correctly captured.
Note that, LCP Metric is working fine and it would report the correct timings. It is just that from debugging perspective the info isn't available.