My New Lazy Loading Plugin

Sharing is caring and I decided to bundle up my image lazy loading JavaScript and share it with the world.

Images are one of the single biggest things which slow websites down and no matter how much optimizing you may be doing, the fact is if you have an image heavy website, then a considerable chunk of your load time goes to loading images.

Thankfully there is a way to circumvent this entirely and it baffles me when more web designers and web developers don't take advantage of these methods because it's not a difficult thing to implement.

The way to circumvent this is with a tactic called lazy loading. 

What is Lazy Loading?

Usually, lazy loading requires you to write some JavaScript to detect if an image is in view on the page, if it is then load the image. Rather than loading the image as soon as you are trying to load the page.

By loading images when they are actually required, it brings down the initial load time of the page, which keeps users on your site and helps with your ranking on Google. 

Chrome Lazy Loading

Some of you may already be aware that Chrome has recently released an update with lazy loading built in, which is great!. But we need to wait for this to become more widespread before we can rely on this entierly.

In the mean time the JavaScript options we have available can be very lightweight and easy to use.

"Lazy Image" JavaScript Plugin

https://jackonthe.net/lazy-image/

I wrote a piece of JavaScript which I use on most of my websites, so thought I may as well package it up and share it to other website designers and developers to use.

Lazy Image is a tiny piece of raw JavaScript which detects when an image enters the viewport using JavaScripts fancy new "IntersectionObserver" method. Previously you would have to detect this on a scroll and resize event, which isn't as optimal.

I have included an example on this plugin of just how much of a massive impact lazy loading can make on the load times. 

On a good connection, the example will show that with lazy loading the page loads in under 1s... Click the link to the very same page with lazy loading disabled though and you are looking at a load time in excess of 10s.

I use the same code on my own website and I'm sure you will agree that my website is very snappy and quick. Without lazy loading, I'd be looking at much slower load times, even with optimal images.

Conclusion

There is no reason not to use some form of lazy loading in your web designs. 

It's not hard and has a huge impact and over the years it's getting easier and easier to implement, so much so that we will soon have baked in functionality without the need to include JavaScipt plugins.