The Image Lazy Loader Drupal module for speeding up your website

Good news: many studies confirm that laziness is a natural human reaction that helps you save energy. A nice justification for lazybones — which we all are sometimes. However, there is a good reason to overcome your yawning and keep reading! We’ll discuss how the laziness of images can save your website’s “energy” and increase its loading speed to please both your visitors and search engines. And we’ll describe a tool that deals with it and does the whole job for you. You see, laziness is really a productive engine for new inventions ;)

Want good website speed? Pay attention to your images

First of all, it should be mentioned that image optimization is one of a website’s performance milestones. According to HTTP Archive, data transferred during an average page loading consists of images by 60%. And, when doing a website performance audit, we often find issues with unoptimized images among the reasons for a website’s slowness.

However, the role of high-quality images is huge in attracting, engaging, and convincing the user. Luckily, you don’t have to sacrifice the image quality to improve your website’s performance. There is no need to choose between making your website attractive and making it fast — it can be both, thanks to the solutions offered by Drupal. One of the techniques here is today’s topic.

Easy image optimization with the Image Lazyloader Drupal module

The image lazy loading technique offers a smart way of dealing with images, greatly admired by developers. Essentially, it doesn’t load the images when they are not directly displayed in anyone’s browser window. It only starts to load them when the user scrolls to them and they come to their viewport.

The idea behind it is smart and simple at the same time. You can find it everywhere. Rotating doors only rotate when someone goes through them. Automatic hand dryers only turn on when someone puts their hands underneath. Then why cannot images only load when they are in the view of a website’s visitor? This is similar to the way the image lazy loading technique works.

The Image Lazyloader Drupal module

Drupal offers a number of modules to use the lazy loading approach. Today, we will review a very nice one among them — Lazyloader module. The Lazyloader module automatically lazyloads all your images, irrespective of their amount. It is an especially useful solution for websites with multiple images.

The module can increase web page loading speed by several times. Experiments with the Lazyloader module show that the speed increase on a Drupal site can reach 76%.

The Image Lazyloader Drupal module’s features:

• These settings allow you to enable and disable lazyloading (which is useful for testing purposes).
• You can set the image distance from the viewable screen part.
• You can choose the placeholder image.
• The special loader icon shows if the images are not yet fully loaded.
• It’s also possible to choose excluded pages that will avoid the lazy loading process.

Hints on installing the Lazyloader module

The module’s maintainers recommend the following installation steps:

1. Download and install the Lazyloader module, as well as the Libraries module which is a dependency for 2.x branch.
2. Download the echo library and put it here: sites/all/libraries (echo.js and echo.min.js must be found in sites/all/libraries/echo/dist)
3. Enable the Lazyloader module
4. Clear the cache

For better results, we recommend using Drupal 7.12 or higher. You should also give the Lazyloader good testing before enabling it on the production website.

There can be some issues with lazyloading custom-rendered images, but Drudesk will help you with them.

Too lazy to deal with the Lazyloader module? ;) Save your energy by contacting Drudesk web support team! Jokes aside, if you need a hand with this or any other website optimization issue, our team is here for you!