Speed Up Your Site: Reduce the HTTP Requests

By Daniel Scocco

When a user is opening your website every object on the page (e.g. images or scripts) will require a round trip to the server. Those HTTP requests will delay the response time of your site, and if you are loading dozens of objects this delay can add up to several seconds.

The first step to reduce the delay from HTTP requests is to reduce the number of objects on your website. Get rid of unnecessary images, headers, styling features and the like. If possible you can also combine 2 or more adjacent images into a single one.

Secondly make sure that your requests for external files or scripts are combined in a single location. For example instead of using three CSS files to create the layout of your page:

<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />

You should use a single one with all the styling information:

<link rel="stylesheet" type="text/css" href="/style.css" />

Speed Up Your Site Series:

  1. Optimize Images
  2. Image Formats
  3. Optimze Your CSS
  4. Use a Slash on Your Links
  5. Use the Height and Width Tags
  6. Reduce the HTTP Requests



Share

27 Responses to “Speed Up Your Site: Reduce the HTTP Requests”

  • Trent

    You can also put all of the style information into the page header, if your goal is to reduce requests and bandwidth isn’t a problem (which can often be true for people on Dreamhost, for example).

  • Greg King

    Just remember that those HTTP requests are asynchronous, so your browser can actually download them at the same time. Depending on the size and number of files, you can actually download them faster if they are separate. Also once you have downloaded them once they stay cached locally anyway (a big reason to keep Javascript and CSS in their own files).

    Many times when I have had a complex CSS file, splitting it up allowed me to optimize the CSS better. The overall size of my CSS files dropped as a result. In the end I would suggest using whatever approach is best for maintenance. In the end I would suggest using whatever approach is best for maintenance.

  • Daniel

    Greg, if I am not wrong CSS files can be cached while Javascripts can not, right?

  • Greg King

    Daniel, if the Javascript is stored in an external file (usually with a .js extension) it can be cached and will only be fetched if the if the modification time changed. That is why these Web 2.0 website are still quick even though they have 500K worth of Javascript. You only download the Javascript file once.

    Greg

  • Ashish Mohta

    Its not easy to combine images into one. Specially in case of software review.

    But things can be optimized a little.

  • Daniel

    Ashish, that is true, the easiest thing is to remove the unnecessary crap altogether :).

    There used to be image maps some time ago, but I think they are obsolete compared to CSS rendering.

  • Ashish Mohta

    One more point, smaller images separately will load faster than one big image containing all of them

  • Daniel

    Are you sure about that Ashish? Are you counting the latency required for every image request? I think if you add the latency, say for 20 little images instead of 1, it will end up requiring more time.

  • Ashish Mohta

    yes , I am very sure. If the images are small then comparatively loading will be faster even though the roundtrip will be more but it will load it fast.

    Imagine if you have all the images in one, the size will increase, hence there will be a delay in loading of the site untill the image is completely loaded.

    I have seen this on site which sell images of even allow download free. It takes time.

  • Greg

    Daniel, Ashish

    This may be an aspect of having multiple HTTP requests at a time. Most web server/browser configurations allow for 4 simultaneous requests at a time. So depending on the files sizes you may be able to download multiple images in parallel faster than the single large image. I imagine there is a breakeven point somewhere based on the size and number of images.

  • adhi

    wow….thanks for your share..
    i will try after this

  • ceramin

    For speeding up a website several factors should be keep in mind :
    1- CSS
    2- HTML design (this is very important-How does load the page)
    3- page volume
    4- server respond speed (your codes is fully optimized but the server is so low that you can not see the results)
    5- HTTP requests that make server busy and so decrease server respond.

  • reza

    thank all

  • Bang Kritikus

    Thanks for your tips

  • Ankur

    Hey Ashish, Daniel,
    I could see that you folks are only talking about reducing the HTTP requests from pure HTML perspective. I wonder, if you guys are aware of CSS sprite. CSS Sprites reduce the number of HTTP requests by merging multiple image files into single file(will all the benifits of using small images) and uses CSS to use that single image file as collection of multiple image files. Also, i would like to mention that it is as per HTML 4.0 standards, recognised by IEEE. Its not any individual’s way of implementation.

  • Sujit

    Does facebook like widget increase the http request too much,
    i use 6 images of fans in the box?
    shall i remove it
    as my site shows 47 http request homepage
    is it normal ?

Comments are closed.