Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
valiantvu opened this issue Jun 14, 2023 · 0 comments
Assignees

Comments

@valiantvu
Copy link

valiantvu commented Jun 14, 2023

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.

@valiantvu valiantvu changed the title High entropy image excluded from LCP due the image covering the viewport High entropy image excluded from LCP due to the image covering the viewport Jun 14, 2023
@clelland clelland self-assigned this Jun 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants