Lazy loading (images, in this case) leads to energy preserving, which leads to a significantly improved site performance! Pretty ironic, isn't it? Well, this is precisely the logic on which the Image Lazyloader module in Drupal has been developed!
Saving your website's energy goes hand in hand with increasing its page loading times.
It goes hand in hand with “sparing” HTTP round-trips and taking some heavy load off the browser's “shoulders”, which otherwise would be “pressured” to relentlessly load thousands of images, even before they would be visible in his/her window browser.
Basically what this module does is both unexpectedly simple and impressively smart : it loads images on your Drupal site only when they're in visitors' viewports.
In other words: when there's no one opening them up in his/her browser, why bother loading an entire “cargo” of images? Why put an unnecessary pressure onto your site and the browser?
And now let us detail to you this “energy-saving” tool that Drupal puts at your disposal and which we encourage you to leverage in the name of a... faster loading website:
The Image Lazyloader Module: How Does It Work Exactly? What Makes it a Speed Booster?
The whole “mechanism” behind this Drupal module is surprisingly simple, if we come to think of it: it loads images (lots and lots of them) only when they're displayed in a site visitor's browser window. Not before!
And this is a “dream come true” especially for web designers, who're constantly dealing with the challenge of optimizing heavy loads of images.
As you can surely guess it yourself, the module's an incredibly useful tool precisely for those Drupal website carrying heavy “cargos” of images. For no matter how many they might, how heavy the load is, the Image Lazyloader module's capable to... lazy load them all and therefore to keep your site's performance at optimum parameters.
How Do You Use It? How Do You “Exploit” Its Full Potential on Your Drupal Site?
Now allow us to give you a few tips and tricks or, better said, a step-by-step guide on how to fully leverage this module on your Drupal site:
Step 1: you download (and install, obviously) the module itself along with the Libraries module in the sites/all/modules/contrib; the latter is, in fact, a dependency for 2.x branch
Step 2: next you download your echo library and place it in sites/all/libraries
Step 3: it's time to enable your Image Lazyloader module now
Step 4: don't forget to clear your cache
Essentially all these preliminary setups will actually grant you the much-needed freedom to quickly enable and to disable your Lazyloading module any time you want to.
Which turns it into such a powerful convenience when you just need to run some tests on your website, for instance.
And speaking of “empowerment”, there's an entire array of options to choose from and setups to enable, depending on your site's needs and on your purposes:
- you have the loader icon letting you know if the images are not (yet) fully loaded
- you get to set the distance from the viewable screen part and to go for a placeholder image of your choice
- you're even enabled to select those particular web pages on your Drupal site where there's no need for an image lazy loading process to be performed
And voila! These are the answers to your “why” and “how" to use the Image Lazyloader module! Questions deriving, of course, from the main one: “how can I boost my Drupal site's performance?”
Feel free to test its image optimization power and to determine how much faster your web pages will then load.
