w3c / largest-contentful-paint

Specification for the LargestContentfulPaint API
https://w3c.github.io/largest-contentful-paint/
Other
88 stars 16 forks source link

High entropy image excluded from LCP due to the image covering the viewport #114

Open valiantvu opened 1 year ago

valiantvu commented 1 year ago

If an image covers the entire viewport, it's excluded from LCP calculations even when the image is high entropy. We're seeing this happen for all of our mweb pin pages when the user is logged into Pinterest.

image

LCP ends up being a small image that gets client rendered very late instead of the big hero image that is server rendered.

Here is an example pin page: https://www.pinterest.com/pin/357051076720162800/ The unauth version of the page doesn't have the LCP issue mentioned above because we have the login/signup banner at the top. That pushes the hero image down so that it doesn't cover the viewport. On the auth version of the page (after you log in), the image covers the entire viewport (there is a footer that is overlaid on top of the image at the bottom of the page, but the image is behind it).

From the LCP docs it sounds like images covering the entire viewport are intentionally excluded from LCP calculations as they might be background images, but having an image cover the viewport on a mobile device (with maybe a navigation bar overlaid on top) seems like it could be a common use case for product pages, galleries, and other image focused sites like Pinterest.