This is why you might not see LCP Element in WebPageTest(WPT)

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.

Today, I was auditing my website on WPT to see how I can improve LCP. I saw that it is not highlighting the LCP Element, though it was able to tell me that it is a text. See the report.

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 null.

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

LCP Element(H1) Replaced with a new Element(H2) and H1 removed : Reports null

LCP Element(H1) Replaced with a new Element(H2) but H1 not removed: Reports H1

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 null.

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.

I blocked requests containing vendor in WPT Test and I was able to see the LCP element being highlighted.

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.