• Home
  • /
  • Blog
  • /
  • Speed Up Your Site: Reduce the HTTP Requests

background image

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


You may also like

Hostinger Review

Hostinger Review

Best Web Hosting Services

Best Web Hosting Services

SiteGround Review

SiteGround Review

About the author 


Daniel Scocco is a programmer and entrepreneur located in São Paulo, Brazil. His first company, Online Profits, builds and manages websites in different niches. His second company, Kubic, specializes in developing mobile apps for the iOS and Android platforms.

  1. 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 ?

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.


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

  10. 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.

  11. 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).

Comments are closed.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}