search

GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.
https://developer.chrome.com/docs/lighthouse/overview/
Apache License 2.0
28.39k stars 9.38k forks source link

Discrepancy between LCP measurement and actual element render #16116

Closed SteGreig closed 3 months ago

SteGreig commented 3 months ago

Apologies if I'm missing something here but this has got me rather confused.

This is a recording from the Performance tab in Chrome dev tools:

image

The LCP is being measured at 6.85s

But this LCP element is actually visible much earlier in the timeline (the image with the green shapes):

image

The LCP element is a <video> which has a specified poster fallback image (an SVG if that is relevant).

This fallback image is the 'green-logo' resource you can see that loads and renders quite early in the timeline. But the LCP stamp is issued much later, seemingly when the actual home-video.webm video file starts downloading (although there is no visual change at this point).

Shouldn't the LCP stamp simply be registered when the poster image is visible?

Can someone help me to understand this discrepancy?

Hayzlee11 commented 3 months ago

I have no idea what that even is to even help.

On Tue, Jul 16, 2024, 2:35 PM Ste Greig @.***> wrote:

Apologies if I'm missing something here but this has got me rather confused.

This is a recording from the Performance tab in Chrome dev tools: image.png (view on web) https://github.com/user-attachments/assets/e8d273d4-ff5f-42fd-bafb-551ffe2f07c7

The LCP is being measured at 6.85s

But this LCP element is actually visible much earlier in the timeline (the image with the green shapes): image.png (view on web) https://github.com/user-attachments/assets/65a60af5-b987-44e5-8311-3ea99d75b1fd

The LCP element is a

This fallback image is the 'green-logo' resource you can see that loads and renders quite early in the timeline. But the LCP stamp is issued much later, seemingly when the actual home-video.webm video file starts downloading (although there is no visual change at this point).

Shouldn't the LCP stamp simply be registered when the poster image is visible?

Can someone help me to understand this discrepancy?

— Reply to this email directly, view it on GitHub https://github.com/GoogleChrome/lighthouse/issues/16116, or unsubscribe https://github.com/notifications/unsubscribe-auth/BG6SWCBHLIFOMN6XECOIXQTZMWG3FAVCNFSM6AAAAABK7MPAXWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQYTEMBYGA3DKMQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

SteGreig commented 3 months ago

Essentially, the LCP element is visible quite early in the timeline. But the LCP stamp is registered much later in the timeline.

The rest of the information is additional context that I hoped might present a reason for this happening. The additional context being that the LCP image is a poster attribute on a <video> element (and is an SVG image). And looking at the timeline, the LCP stamp seems to align with the actual video file starting to download (despite no actual visible change at this point).

The expected behaviour from my understanding is the LCP should be registered when the poster image is visible.

The screenshots are from the performance tab in Chrome Dev Tools.

Apologies if any of that wasn't clear.

Hayzlee11 commented 3 months ago

Im just getting my accounts back after being hacked for a year or so. Im going over past tasks and emails. Does that help 🥴

On Wed, Jul 17, 2024, 1:38 AM Ste Greig @.***> wrote:

Essentially, the LCP element is visible quite early in the timeline. But the LCP stamp is registered much later in the timeline.

The rest of the information is additional context that I hoped might present a reason for this happening. The additional context being that the LCP image is a poster attribute on a

The expected behaviour from my understanding is the LCP should be registered when the poster image is visible.

The screenshots are from the performance tab in Chrome Dev Tools.

Apologies if any of that wasn't clear.

— Reply to this email directly, view it on GitHub https://github.com/GoogleChrome/lighthouse/issues/16116#issuecomment-2232754955, or unsubscribe https://github.com/notifications/unsubscribe-auth/BG6SWCCDTHOH6KT3VKH24BTZMYUR3AVCNFSM6AAAAABK7MPAXWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMZSG42TIOJVGU . You are receiving this because you commented.Message ID: @.***>

adamraine commented 3 months ago

This isn't the place to file bugs for the performance timeline. That being said, the result doesn't seem to fit with how <video> LCPs should be handled: https://web.dev/patterns/web-vitals-patterns/video/video

I filed this issue https://issues.chromium.org/issues/353703608, but will close this