'Defer offscreen images' doesn't consider 'loading=lazy' attribute

I’m seeing some odd behaviour with Native Lazy Loading that has a JS fallback.

The source code we use is:

<img src="placeholder.jpg" data-src="image.jpg" loading="lazy" alt="" class="">

The JS identifies images with loading=lazy. If there’s native support it makes the data-src the src and does nothing else. We then use Intersection Observer for other browsers.

However, Lighthouse is flagging images that are using this pattern as not being lazy loaded.

It does seem to be the case that images outside of the viewport are indeed loaded before they’re seen, so on page load. These are the images that Lighthouse picks up on. That said, they are loaded with a low priority and only fetched after the onload event.

We can’t control this behaviour. This is hammering our performance scores so it would be amazing to shed some light on why (or, indeed, are we doing something wrong). It feels unfair that a mechanism we can’t control is being flagged as an issue by Lighthouse. Unless we are doing something wrong here.

Unfortunately if I can’t resolve this issue I have to move back to JS lazy loading. An example site that has this issue can be found here: https://www.drakes.com/clothing

[domfarolino]

It is true “auto” has been removed from the spec (for now), but we’re planning on re-introducing it later on. Just for completeness, Chrome ships (and defaults to) “auto”. For more info see https://github.com/GoogleChrome/web.dev/pull/1971#issuecomment-565630653.

[paulirish]

If someone is using loading=lazy on an image we definitely shouldn’t flag that in offscreen-images.

~web.dev/blog offers a repro for this.~ the drakes repro mentioned above is great.

To be consistent with our caching audit, etc, we should filter out any image that has a valid loading attribute value. (Those appear to be lazy, eager or auto.)