[Drupal] How to decrease page load times for a Drupal site by postponing HTTP requests to load images?
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY binny.thomas
7 years ago
Drupal-Technical
0 comments comment

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 ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 01st January 2008 / by webmaster
We have added a few new modules to our site recently. Drupal Technical StumbleThis Leave a reply Your email address will not be published. Required fields are marked * Sean (not verified) access_time 15 Jul 2020 - 10:46 Hi there, I uploaded the files, enabled the modules to use SU, and now I see the link, but there is no icon... How can I fix this? Thanks, Sean webmaster access_time 15 Jul 2020 - 10:46 In reply to Icon doesn&#039;t show by Sean (not verified) What do you see when you view the source? Search for stumblethis_button and you should be able to see the code for the image and the URL. Then you should be able to troubleshoot from there. Juicy Couture Addict (not verified) access_time 15 Jul 2020 - 10:46 thanks for the post. would love to hear more of you. by the way, drupal's really popular nowadays as it has easy and fast features. you agree with me? thanks. Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
close

on 16th January 2008 / by webmaster
Most webmasters do not realize this, but a lot of the content on lot of websites can be accessed from multiple URLs. A simple example would be where www.example.com and example.com leads to the same page. This is a fatal mistake in Search Engine Optimization and search engines penalize you for duplicate content. The correct configuration would be where the above two urls will lead you to the same page but example.com will redirect you to www.example.com with a 301 (Moved permanently) status which will not result in search engines penalizing the page. It is very easy to configure 301 redirects using Apache .htaccess file and the process is the same for a Drupal installation also. Drupal Technical Apache htaccess SEO Leave a reply Your email address will not be published. Required fields are marked * Anonymous (not verified) access_time 15 Jul 2020 - 10:46 Hello. I'm trying to make example.com show as www.example.com, and I'm running into difficulties. I'm on Apache 2.0 and using the following lines in my httpd.conf file: RewriteEngine on RewriteCond %{HTTP_HOST} ^xxxxxxxxxx\.com$ [NC] RewriteRule ^(.*)$ http://www.xxxxxxxxxx.com/$1 [L,R=301] When I go to http://xxxxxxxxxx.com, I get http://www.xxxxxxxxxx.com (as expected). However, when I go to http://xxxxxxxxxx.com/node/1 (it's a Drupal site), I get a 404 thrown and the URL changes to xxxxxxxxxx.com/var/www/drupal/node/1. Same thing with www.xxxxxxxxxx.com/node/1. Any suggestions? I want to run without Drupal's .htaccess file (instead incorporating these calls into my httpd.conf file). webmaster access_time 15 Jul 2020 - 10:46 In reply to Rewrite including filesystem path by Anonymous (not verified) I think the problem is with the base path which results in the redirection to /var/www/ part. The best approach I would think is to start with drupal htaccess and then strip out parts and move to httpd SNVC (not verified) access_time 15 Jul 2020 - 10:46 This is definitely a good guide. Thanks for this. wellyson access_time 15 Jul 2020 - 10:46 This is really nice and helpful. Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
close

on 08th February 2008 / by webmaster
Attachment Size slashdotit.tar.gz 173.55 KB Similar to the StumbleThis module that we had created earlier we have created another bookmarking Drupal Technical Slashdotit Leave a reply Your email address will not be published. Required fields are marked * Shlomi Fish (not verified) access_time 15 Jul 2020 - 10:46 Hi! I'm interested in this module, but Drupal 6.2 complains that it's incompatible with it. Can you please update it or tell me how? Regards, Shlomi Fish shlomifish.org webmaster access_time 15 Jul 2020 - 10:46 In reply to Can you update it for Drupal-6.x? by Shlomi Fish (not verified) Sure we are working on this currently and will post an update soon. Also we will post this module on www.drupal.org as well Cheers Anoop John Team Zyxware Anonymous (not verified) access_time 15 Jul 2020 - 10:46 Hello! Nice Article very interesting, thanks Add new comment
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.