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. When doing website performance audit, we often find issues with images among the reasons for a website’s slowness.
Luckily, everything can be improved. There is no need to choose between making your website attractive and making it fast — you can enjoy both, due to the solutions offered by Drupal.
Easy image optimization with the Image Lazyloader Drupal module
The Lazyloader module offers a smart way of dealing with images, greatly admired by developers, which is called lazy loading. Essentially, it doesn’t load the images when they are not directly displayed in anyone’s browser window.
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? That’s exactly what the Lazyloader module does.
The module can increase web page loading speed by several times. It is an especially useful solution for websites with multiple images. The Lazyloader automatically lazyloads them all, irrespective of the amount.
Hints on working with the Lazyloader module
The module’s maintainers recommend the following installation steps:
- Download and install the Lazyloader module, as well as the Libraries module which is a dependency for 2.x branch, in sites/all/modules/contrib
- 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)
- Enable the Lazyloader module
- Clear the cache
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 and 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.
For better results, we recommend using Drupal 7.12 or higher. You should also give the Lazyloader a 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! Jokes aside, if you need a hand with this or any other website optimization issue, our team is here for you!