Note
This card does not reflect the current state of lazy loading technologies. The native lazy Show archive.org snapshot attribute could be used, which is supported by all major browsers since 2022.
Since images are magnitudes larger in file size than text (HTML, CSS, Javascript) is, loading the images of a large web page takes a significant amount of the total load time. When your internet connection is good, this is usually not an issue. However, users with limited bandwidth (i.e. on mobile) need to mine their data budget better.
One popular strategy to improve the website performance is to not load images until they enter the viewport – aka "lazy-loading images".
src
attribute of an img
tag in favor of lazy-loading, make sure you have a strategy to serve crawlers, if you need to support them.onscroll
event only when the "momentum scroll" has ended. This way you may coast into parts of the page where images have not been loaded yet (depending on the library). (Starting from iOS 8, continuous scroll events are fired.)Lazysizes Show archive.org snapshot is one of the most popular lazy-loading libraries, and it seems to be unsurpassed in any regard. See the README Show archive.org snapshot to understand the full power of it. Here are some examples Show archive.org snapshot .
const node = document.querySelector('.some-element')
node.addEventListener('load', yourCallBack, true)
The final true
registers the listener to the "capturing phase" (as opposed to the "bubbling phase"). This is because the load
event does not bubble. Note that you cannot register an event listener via jQuery, as it does not support capturing events.
The "best" strategy would be to hide the src
attribute of image tags from the browser with JS. This way, no modification of the HTML would be necessary and the whole lazy-loading could be accomplished by javascript. However, this does not work reliably.
Qazy
Show archive.org snapshot
is a library that implements this approach, and it is working on their
demo page
Show archive.org snapshot
. However, on a large page in my application, Qazy came too late to keep the browser from loading images.
All working lazy-load strategies require the src
attribute of images to be removed (see above). Filling it back in via JS is ok for most users, but crawlers won't see your images. One approach is to
render the image a second time into a noscript
tag
Show archive.org snapshot
. This is quite straightforward and most people on the web agree that it won't negatively influence SEO ranking.
Another approach is to render image links instead of tags, and then replace all image links with tags via javascript. I did not further investigate this method because I did not want to rebuild the whole application. When building an application with this approach from the ground up, it might be a valid option.