Interesting research from Aaron Peters on <img loading="lazy" ... >:
On my 13 inch macbook, with Dock positioned on the left, the viewport height in Chrome is 786 pixels so images with
loading="lazy"that are more than 4x the viewport down the page are eagerly fetched by Chrome on page load.In my opinion, that is waaaaay too eager. Why not use a lower threshold value like 1000 pixels? Or even better: base the threshold value on the actual viewport height.
My guess is they chose not to over-engineer the feature by default and will improve it over time. By choosing a fairly high threshold, they ran a lower risk of it annoying users with layout shifts on pages with images that don’t use width/height attributes.
I think this unmerged Pull Request is the closest thing we have to a spec and it uses language like “scrolled into the viewport” which suggests no threshold at all.
I think the threshold depends on network conditions (?)
from https://web.dev/native-lazy-loading/:
I also read that page and since then have done a fair bit of testing with this and it seems that the threshold difference is negligible when emulating network conditions in Chrome Dev Tools, however using a real device on a slow 2G connection does alter the threshold considerably.
I think (read: hope) that Chris is right and it improves over time because at the moment I’m not really sure if implementing native lazyloading in an e-commerce module i’m working on is really viable, mostly due to the unknowns around threshold.
In my testing Chrome is way too eager to download images far below the viewport but browsers that don’t support ‘loading=lazy’ and use the lazysizes fallback are behaving flawlessly.
Here’s hoping that someone with more time can do some proper testing around this.
—and Firefox and Safari are too lazy.