Lighthouse: Handling images that have loading="lazy" for the defer offscreen images audit

[housseindjirdeh]

Provide the steps to reproduce

1. Run LH on https://pr34900-985c0b4.ngbuilds.io/

What is the current behavior?

Lighthouse flags images below the fold that can be deferred.

What is the expected behavior?

Lighthouse doesn't flag images that are below the fold and have loading="lazy" or suggests to use a custom solution that is less conservative.

More info

The native lazy loading implementation in Chrome, which uses IntersectionObserver, will only defer images that are at least 3000px from the viewport. Images that are below the fold but within this threshold load eagerly, and Lighthouse still flags those images as capable of being deferred.

Should Lighthouse follow similar heuristics to Chrome and not flag any images with loading="lazy" even if they aren't actually deferred? Or should we consider modifying the audit recommendation to suggest that an even more conservative lazy-loading approach should be used?

Related issues

6677

[patrickhulce]

We think this was fixed, @jazyan to investigate

[housseindjirdeh]

Tested on v5.5, just tried on 5.6 and it looks fixed!

Thanks!

[ximbong91023]

@housseindjirdeh It doesn't seem to be fixed in v5.6 though (current version), do you mean v5.7?

[paulirish]

there is no 5.7.0 yet. :)

but yeah our fix for this is in master but isn't in 5.6.0.

i just ran both on @housseindjirdeh's URL and see that 5.6.0 reported these images despite have loading attribute. and master doesn't.

so this is indeed fixed. :)

[housseindjirdeh]

My bad @ximbong91023! Was testing locally and I don't know why I mapped that to 5.6 😅

[connorjclark]

there is no 5.7.0 yet. :)

CDT is 5.7.1. 5.7 is just CDT (added pub ads plugin)