Drupal Technical

[Drupal] How to decrease page load times for a Drupal site by postponing HTTP requests to load images?

Binny Thomas | | 2 min read

Decreasing page load times makes a site feel responsive and helps to retain its visitors who may navigate elsewhere if it takes too long to load. Ideally, a website should completely load within a time span of 4 seconds. Anything more than that is considered suboptimal. There are many methods of decreasing page load times. One of the best methods is to reduce HTTP requests by minimizing the number of images to be called during page load. We need a combination of server side scripting and client side scripting to do the job.

As an example, let us consider the case of a website having a cool slider effect with 4 high quality banner images. Now loading these high quality banner images when the page is called is going to add to the page load time as you have to have 4 separate HTTP requests to load the 4 images.

How do we do that? First we load only one image, the background image for these banners. Now what about the other 4?

Here comes the best part. We pass the URLs of the 4 images through the alt tag of the background image 4 times using server side scripting say PHP. So the background image is called 4 times with the alt tag containing the URLs of the other 4 images each time. As you can see in the code below, we have passed the URL of the slideshow image along with the

 $image = '<div class="image-wrap"><img src="' . $background_img_path . '/' . 'images/grey.gif' . '" alt="' . $slid_img_path . '/' . $slide_no . '"/></div>';

And we preferably pass that in a suitable DIV tag to be rendered correctly.

So when the page is called only one HTTP request is sent, but the info for the other 4 are loaded and ready. This is where the client side script comes to action. Have a look at the following jQuery code for copying the URL of the image from the alt tag to the source. 

$('#header-graphics .image-wrap').each(function(){
    (function(obj) {
      setTimeout(
        function(){
          obj.find('img').attr('src', obj.find('img').attr('alt'));
        }, 
        100
      );
    })($(this));
  });

Using jQuery we can cycle through all the images in the particular DIV obj and copy the alt attribute to the src attribute and pass it to a timeout function with a delay of 100 milliseconds. This way we have managed to decrease the page load time by postponing the request for the individual images well after page load has been done.

Have a look at the final result at http://www.zyxware.com/home and see the slider with the 4 banner images in action.

 

 

Related Topics