lighthouse: Bad evaluation LCP and Best Practices on picture tag
On this page (https://www.kortic.com/photographie/skateboard-volant.html) , Lighthouse matches only the src tag and ignores the source tags. So LCP is wrong. It says :
Largest Contentful Paint element 1 element found
Skateboard (volant) <img decoding="async" loading="lazy" src="/images/card/950/643c16e4/skateboard-volant-2.jpg" alt="Skateboard (volant)" aria-labelledby="imgContentInfo" itemprop="contentUrl">
Additionnaly, the evaluation of best practice “Serves images with low resolution” is wrong too on the same element : Displayed size | Actual size | Expected size 360 x 360 | 420 x 420 | 945 x 945
However, only the “/images/card/420/643c16e4/skateboard-volant-2.jpg” is loaded on mobile.
The original source is :
<picture>
<source media="(max-width: 29.9375rem)" srcset="/images/card/420/643c16e4/skateboard-volant-2.jpg">
<source media="(min-width: 30rem) and (max-width: 63.9375rem)" srcset="/images/card/500/643c16e4/skateboard-volant-2.jpg">
<img decoding="async" loading="lazy" src="/images/card/950/643c16e4/skateboard-volant-2.jpg" alt="Skateboard (volant)" aria-labelledby="imgContentInfo" itemprop="contentUrl">
</picture>
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 17
I made a minimal repro here: https://misc-hoten.surge.sh/lh-11895-picture-lcp/
The
pictureelement actually does not work without an accompanyingimgelement. Try removing themediaattributes + removing theimgelement: you’d expect the firstsourceimage to be used, but nothing is drawn, because there’s noimg. Theimgelement is the container used to draw apicture.Since the LCP element should be the element where the largest content is drawn, identifying the
imginsidepictureseems to be working as intended. I’ll reach out to folks on the Chrome metrics team and confirm if this behavior is intentional.Some things Lighthouse team should check:
imginsidepicture? At least delete thesrcin the snippet, or just point to thepictureinstead?imgelement? I see we do in at least one place (preload-lcp-image)–is there also something in Lantern?This audit doesn’t check if an image element has an associated network resource. We just assume any image element is fair game to analyze. There is a filter for “is this image in the initial viewport”, so I think we can argue that we should also filter out “invisible” img elements (I mean–verify that an image element actually has a network request for its
src).Lighthouse team: it seems we want to do a normalization pass when using
artifacts.ImageElements, to take in account thepicturebehavior. Are there places other thanimage-size-responsivewe need to apply this?Thanks, wasn’t sure if it was this issue or not. Will raise another.
Thanks