NO_LCP on Mobile but there is one on Desktop

JamesSingleton commented 3 weeks ago

FAQ

[X] Yes, my issue is not about variability or throttling.
[X] Yes, my issue is not about a specific accessibility audit (file with axe-core instead).
[X] Yes, my issue is not answered by other FAQs.

URL

https://www.redshirtsports.xyz/western-carolina-looks-for-breakthrough-season

What happened?

I updated my website to use next-sanity/image component so that I could use next/image with a custom loader and pushed it to production. The image loads fine, however, running the tests in PageSpeed Insights and in lighthouse show

https://pagespeed.web.dev/analysis/https-www-redshirtsports-xyz-western-carolina-looks-for-breakthrough-season/rpwlle03o1?form_factor=mobile

What did you expect?

That there would be an LCP for mobile due to the fact that there is one for desktop

What have you tried?

No response

How were you running Lighthouse?

PageSpeed Insights, Chrome DevTools

Lighthouse Version

12.0.0

Chrome Version

127.0.6533.120

Node Version

No response

OS

Mac

Relevant log output

No response

adamraine commented 3 weeks ago

This looks like a bug in Chrome because I can reproduce this with the performance panel.

I noticed the image (which should be the LCP) loads in a blurry version before replacing it with the full resolution image. It seems likely that Chrome is getting tripped up on this. Is this progressive loading a part of your custom loader?

JamesSingleton commented 3 weeks ago

This looks like a bug in Chrome because I can reproduce this with the performance panel.

I noticed the image (which should be the LCP) loads in a blurry version before replacing it with the full resolution image. It seems likely that Chrome is getting tripped up on this. Is this progressive loading a part of your custom loader?

I guess so, I am using https://github.com/sanity-io/next-sanity/blob/main/packages/next-sanity/src/image/Image.tsx which uses next/image under the hood. And then I am using it like so

<SanityImage
  src={urlForImage(post.mainImage).width(865).height(575).url()}
  className="h-auto w-full rounded-lg shadow-md"
  width={865}
  height={575}
  sizes="100vw"
  alt={post.mainImage.asset.altText ?? post.mainImage.caption}
  placeholder="blur"
  blurDataURL={
    post.mainImage.asset.metadata?.lqip ??
    urlForImage(post.mainImage).width(24).height(24).blur(10).url()
  }
  priority
/>

So I am telling it to use a blur placeholder and then IF the image metadata includes lqip to use that or else use a tiny image.

adamraine commented 3 weeks ago

Thanks @JamesSingleton any chance you could create a minimum repro of this? If my prediction is correct we can probably reproduce this with the image component on a blank page. I can use that to file a bug report in Chrome.

JamesSingleton commented 3 weeks ago

I can try. Just for fun, I tried removing the placeholder="blur" and I actually now have an LCP on mobile.

Adding the placeholder="blur" along with the blurDataURL causes it to happen again.

For this image, the lqip ends up being

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAADwElEQVQ4jR3O2W/aBgCAcf8te5y0t2rVtFXdoW1qWnVqepETGqCcxiTGgDmNMRg7BALhJqQkBEKa9VzXh61dtUrtpE77m74pefhef/qE+MZN5PUFEuurFD0yxkMR/aGTurjGRA0wLyTYU/xEl6+x+MNlrl25hOPnb5Ccd2lYJebTE549fcmL5694+vQ5QjUVIuO5T8rhpLgqk10NIy8vkdtYohXfYpAzqCfTZEU/fucqD9edZOQoDcvk8fSEN3/8xYcP//Lxn/94//4TghEWid6+T2jhDvLNJeS7DkJ3bhG5e4+CN44VtbCVHWr5PrbRp7bd42h8wotnr3n18g2vfnvL23cfeff3J17//hHh9rdr/PLVfe5dXca74CC+skwp7KbgDZNeM8k96JJ29ch4x5jqDLs8pd95wsn4TwbN19StOaPhCUeTU9rNCcIXn33N5c+/58cvb7CycAfFtUYrHaadlMlvlMi5xyirQ8TFCil3lS1PjVSoQzUxJxs4Qw0dYht7VHSdWDCGcPXyJW58d4V7139CfODATEv07RRtTcIIJygE+ygPOoSXMuQjOVJhHU20qat99NiYfHLItlllW0uQCvkQIltOEqqPfEGiWkszGtc4mu0xGJSx8yYx5y6exQoBZ46yabDbsdhrW/QHVVr7DZoHDdrjbXrDIo2dHILelSkP41THWRrTAnunBu0zg86pScncwb1osnbdQPJbVBo2nTOL7hOT9lmR1lmR5mOd5qlGfaxj2haCti+ijcIUH0UoHUUpHUmUjiOYhwrJTAHnLQ2Po0jEXSWdqbB9mKP+a5qdU5XtkwTWsULlOEaxl0RR8wjnkP5IpHgoUppIlI8lzJlEcRgjIqVxrcQJRWMEPRqiz0BvZaiexrHnCtZMxpxsXoxofQlZjyCUz6/OoUkU8ziKOY1iz2VK3QyimCKwGSHdjBDXFSKRNLmqijWLUZltUp5IFyPaQZDsIIDa8CFoowDaQYDCo+BF+jiIPY1j9QrEcgpyxU9+5CPTCZAwo2TrMtp+kOzIS2bfS3rgQe1tkO54MFpBhNzQz0X75/kwDiVq0yzmvora9JPsuFD7TtSeC60fwRyp5IdB4t11lM46SnsdpbVOoe2j11EQcv0A2Z6fbN+PPhKpz3LszQ2MUZRU330BJbtOEl0n+oHI7olGeSwTbzvZbCwj1Rxs7a5R6W1xMDQQotVltmqrJJtuisMo9Ume6mGGwlAk3fWSaLuIt5wXQHbgxzpKYBxsoTRdRKoO/OYikr2CPcjSHtn8D/lG7VfwKDCiAAAAAElFTkSuQmCC

I am also guessing I probably shouldn't have a blur placeholder for an above fold image though 🤔

GoogleChrome / lighthouse