LCP behavior with dialogs

[ofirelarat]

Issue: LCP Measurement Affected by Large Image in Dialog

Description:

We are experiencing an issue with the Largest Contentful Paint (LCP) metric measurement in our application. The application includes a dialog that contains a large image, which can be mistakenly identified as the LCP element by performance measurement tools. This dialog appears a few seconds after the page load.

Details:

• The page fully loads and triggers the load event.
• A few seconds after the page load, a dialog containing a large image appears.
• The LCP measurement considers this large image in the dialog as the LCP element because it is the largest visible element, even though it appears after the page load and after the user has perceived the page as fully loaded.

Impact:

• This scenario inaccurately affects the LCP metric, as the large image in the dialog is not part of the initial user-perceived performance.
• The LCP metric does not accurately reflect the user's experience of the page load time.
• As a result, our performance metrics appear worse than they actually are, potentially misleading our performance optimization efforts.

Example:

Here is an example illustrating the issue:

Research:

I reviewed the web.dev article on cookie notices and performance, which discusses a similar issue with cookie notices. However, cookie notices typically do not contain the LCP element, and the article does not provide a solution for scenarios where the LCP element is part of a late-loading dialog.

Attempted Solutions:

• Waiting for Page Load Event: Implemented logic to wait for the load event before starting the timeout to show the dialog. The dialog component is loaded using lazy loading.
• Alternative Approaches: Considered opening the dialog after user interaction (e.g., scroll) or reducing the image size in the dialog to ensure it is not the largest element.

Outcome:

Despite these efforts, the LCP metric is still affected by the large image in the dialog, leading to inaccurate performance measurements and poor metric results:

Request for Recommendations:

We are seeking recommendations on how to handle this scenario better so that the dialog and its content do not affect the LCP metric. Our goal is to ensure that LCP accurately reflects the perceived performance and user satisfaction, rather than being impacted by elements that appear after the initial page load.

Thank you for your assistance.

[tunetheweb]

This sounds like it's working as intended. The LCP heuristic will find the largest contentful element and measure the time it takes to display that. If the late loading pop-up element is the largest then that is what will be measured.

...even though it appears after the page load and after the user has perceived the page as fully loaded. This scenario inaccurately affects the LCP metric, as the large image in the dialog is not part of the initial user-perceived performance. The LCP metric does not accurately reflect the user's experience of the page load time.

I'm not sure I agree with those statements. If a popup shows and covers a significant proportion of the page (as it appears to), without me interacting with the page, then I would consider the page as still loading.

As noted in the web.dev documentation if the heuristic does not find the element that developers find the most valuable then they can choose to measure an alternative element of their choosing, outside of the LCP element.

[ofirelarat]

I understand what you're saying here, but I feel like this can cause misleading metric results. Since the LCP metric is part of the core web vitals and can affect third parties such as search engine optimization, this can be a significant issue And thats way custom metric can't help here as well.

For instance in this scenario instead of LCP of 1000ms which considered very good the result is 3600ms which consider very bad. I the user who browse the website not feel the same as he would feel in other website with a real 3600ms LCP.

[pmeenan]

This case is kind of exactly what the intent of LCP is though. If there's a big giant interstitial that loads without the user acting on the page, blocking the other content, then it is the largest piece of content presented to the user when loading the page.

If you want to make it faster, load the pop-up sooner (which would be less jarring to the user than interrupting what they were looking at before it popped) or don't use a pop-up interstitial.

Whoever decides that there needs to be a late-loading interstitial that covers the screen also owns the fact that it will result in a slower LCP.

[ofirelarat]

Ok, thank you for the clarification.