Easy Native-LazyLoading Support For Your Website

Posted at

If you'll add loading="lazy" attribute to every IMG and IFRAME element in your HTML,
you'll be able to use the browser native-LazyLoading mechanism.

Native-LazyLoading being somewhat new implementation requires an updated web-browser (end of 2019+),
so it will mostly works quite well for smartphones and tablets, since users will usually keep the browsers updated from the app-store.

The there are two good things that can come-out of using lazyloading,
first the downloading of the data, but now days it is not that important,
since long ago images were download in parallel to the document itself,
secondly is the price of rendering image which costs a quite lot of RAM and GPU (or CPU) "time".

There is an older implementation of LazyLoading (2017-2018) which uses the lazyload="on" attribute.
It was long removed but you can always add it as well...
Here is an older discussion: https://github.com/whatwg/html/issues/2806.

Note #1: although I can extend the LazyLoading-support to be enabled on websites that won't support native-LazyLoading,
I've choose not to do that, since the JavaScript-engine tend to make the website pretty sluggish...

I did create a web-extension (named "Lazify") that will work on most browsers (Chrome, Firefox, new IE based) that will enable LazyLoading anyway (falls back to a quite efficient JavaScript-implementation when native-LazyLoading is not supported),
read more: https://github.com/eladkarako/chrome_extensions/blob/store/Lazify/README.md
download: https://github.com/eladkarako/chrome_extensions/releases.

If you want to remove all LazyLoading, there is a web-extension for that too (named "UnLazy")..
UnLazy can work well with Lazify, when combined - UnLazy will remove all OTHER LazyLoading implementation,
while Lazify will make sure to either use the browser a native-LazyLoading support (when possible),
or use my efficient implementation.

Read more about it:
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video
https://web.dev/native-lazy-loading/
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

Note #2: for Chrome-based browsers you may force-ON (or ignore..) the native support with the following flags:
chrome://flags/#enable-lazy-image-loading and chrome://flags/#enable-lazy-frame-loading,
it is available for mobile-devices as well.

Note #3: according to https://www.w3.org/TR/resource-priorities/, (which is quite old and no-longer updated..) there used to be suggestion to also LazyLoad other elements (SCRIPT, LINK, AUDIO, VIDEO,...) - as far as I can tell no major browse has implement it,
but if you wish to - you might as well add it to all of the elements in that page, the beauty of it is that there is no immidiate overhead or side-effect to including the loading="lazy" and lazyload="on" attributes.

By the way, if you see lazyload="1" it's the same as lazyload="on". It was mostly suggested by M$ (https://msdn.microsoft.com/en-us/ie/dn369270(v=vs.94)).

Note #4: Developers - you might want to make sure you don't relay on the window (or self, top, etc..) 's onload event since LazyLoad-images can be (and mostly will, other than if the image was in the immidiate-viewport) loaded after the onload-event (or even never..).