Strange choice of the LCP element.

WebPageTest
1

Hello everyone, I have a doubt regarding the resource identified as “LCP” using the Speed Insight and WebPageTest tools.

In both tests, I use the same parameters for simulating connection and device.

In Speed Insight, the LCP element is identified as a block of text, which is actually present in the viewport upon page loading.

In WebPageTest, however, the LCP resource is identified as an image that is not present in the viewport and requires scrolling down to see.

This obviously results in different scores in the two tests (excellent in Insight and improvable in WebPageTest).

I really can’t understand the behavior of WebPageTest, especially why it identifies an element not present in the viewport as the LCP resource.

Another thing that baffles me is that the resource chosen by WebPageTest as the LCP is part of a list of images placed in a flexbox, all lazy-loaded as they are not visible in the viewport at the beginning, and all of the same size in terms of resolution.

Of these images, the one chosen as the LCP is the second, not the first.

I also point out that this second image is heavier in terms of kb compared to the first, and analyzing the waterfall, it is loaded after the first.

I really can’t explain the choice of that resource as the LCP by WebPageTest.

2

Do you have a link to the page in question and WebPageTest result? If the page layout shifts during construction where the box sizes change as content is populated then it is possible that it is racy and the image is initially in the viewport and moved out as the layout changes.

3

Hello pmeenan,
thank you for your response.

I don’t believe it’s related to what you’re suggesting, as I’ve checked the page’s construction in slow motion with Chrome’s devtools and it doesn’t seem to happen. Here is a link to the page for your review:

I apologize for the delayed response, but the site was only published yesterday.

Thank you for the support!