Inquiry About Browser Handling of Low Priority Images Regarding LCP Metrics

[wD Jia]

hello,

I am currently working on improving performance metrics for our website, and I've encountered an issue that I'd like to address with regards to the Largest Contentful Paint (LCP) metric.

Our pages feature a number of background images that, while not having a high priority, are essential for aesthetic purposes. These images occupy a significant amount of space which has proven to impact the LCP measurement. It’s important to note that the actual visual experience for users — the moment they perceive the main content of the page — occurs later than what the LCP metric suggests.

To enhance the user experience without compromising on the design, I'm exploring ways to guide the browser's load prioritization. Specifically, I'm interested in knowing if there is a possibility for the browser to omit certain low-priority elements, such as images marked with 'fetchpriority' set to 'low', from affecting the LCP metric.

Your insights into improving LCP while maintaining our site's visual integrity would be greatly appreciated. Are there any recommended practices or browser functionalities that could assist us in this regard?

Thank you for your time and assistance on this matter. I look forward to your expertise on how we might resolve this issue.

[Barry Pollard]

At the moment, we have the following exemptions for LCP elements:

• Elements with an opacity of 0, making them invisible to the user.
• Elements that cover the full viewport, that are likely to be background elements.
• Placeholder images or other images with a low entropy, that likely don't reflect the true content of the page.

It sounds like you are saying your image is not quite full-screen so is not being caught by this exclusion but you wish it was so the heurisitic would capture what you feel is the actual LCP candidate?

As a heuristic, the LCP metric is not guaranteed to pick the most contentful element and on occasion may pick the element you do not feel is the correct one for your site. You can use custom timings using element-timing for example to measure a more specific element.

I'm not sure we'd want to include low priority resources in that heuristic. As you say yourself, the background image is "essential for aesthetic purposes" so lowering the priority on it does not feel like the right thing to do.

Barry