Speed Up Drupal site by 76% Using Image Lazyloader

In this article you will learn how I managed to increase load times for a Drupal powered site (the one you are currently reading) by more than 76%.

Now the following tip will apply for Drupal sites heavily loaded with images. My website, which is now more than 3 years old,  features about 80% of photo stories, over the time, I have tried to limit my picture articles to 3 or less images, posting online the best of my work, but yes, there are articles with even 136 pictures, see Keukenhof tulips gardens in the Netherlands.

For each of the posts I'm using a head photo, done by using image fields from Drupal core, to make stories more Open Graph friendly. See: How to add Open Graph protocol for your Drupal site.

Now, I have tried many image optimization solutions, starting serving thumbnails ending compressing images in Adobe Lightroom, that have helped to speed up load times a lot, well  a 16mb image uncompressed in a post and then multiply it to at least 3 - 16x3 = 48 MB for a post with just 3 images. I compress my images specially for blog to about 100-200kb each, that helps a lot.

At one time I noticed the load time for homepage is more than 10 seconds, which is not at all nice.

Load time for homepage

Load time for homepage

Using tools.pingdom.com I was able to discover that a load time for my websites front page (which is heavily image driven) can take up to 11.81 seconds if accessed from New York, USA.

Luckily I found a small and neat module, which helped to decrease load time by more than 76% - Image Lazyloader

This is a small helper module which will automatically lazyload all images for sites with multiple images, which will make the site load faster. All images will only load when it's visible to the browser window.

After downloading, installing and enabling Image lazyloader module I was able to get down load times for frontpage to 2.80 seconds, that's about 76% of improved speed delivery.

Load time for homepage after enabling Image Lazyloader

Load time for homepage after enabling Image Lazyloader

Shorter load time, smaller page size and less requests. Amazing. 

Add new comment