Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Handling images that have loading="lazy" for the defer offscreen images audit
See original GitHub issueProvide the steps to reproduce
- 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
Issue Analytics
- State:
- Created 4 years ago
- Reactions:5
- Comments:6 (1 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
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
loadingattribute. and master doesn’t.so this is indeed fixed. 😃
CDT is 5.7.1. 5.7 is just CDT (added pub ads plugin)