search

nucliweb / webperf-snippets

⚡️ 💾 Web Performance Snippets
https://webperf-snippets.nucliweb.net
MIT License
1.34k stars 72 forks source link

Track lazyloaded images with JS above the fold #9

Closed guaca closed 2 years ago

guaca commented 2 years ago

Description

According to the 2022 Web Almanac, 9.8% of mobile pages with image-based LCP set loading=lazy on them. And 8,8% use custom lazy-loading.

The current snippet only tracks lazy-loaded images using the native loading="lazy" attribute. Hence, it's only useful for 52% of mobile pages using any lazy-loading approach on LCP images.

Proposed solution

With this update, the snippet also tracks lazy-loaded images via JS, looking for "data-src" attributes.

I've also updated the return statement to return an array with all the lazy-loaded elements or false if no image above the fold was lazy-loaded.

verlok commented 2 years ago

Lovely. I’ve also seen lazy loaded images with data-origin in old versions of jQuery LazyLoad, which have been migrated to new LazyLoad libraries, like my vanilla-lazyload by changing the default options of the library.

So probably also adding data-origin would be more complete, but… old things, I’m not sure.