Speed Up Your Site: Reduce the HTTP Requests
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:
- Optimize Images
- Image Formats
- Optimze Your CSS
- Use a Slash on Your Links
- Use the Height and Width Tags
- Reduce the HTTP Requests
27 Responses to “Speed Up Your Site: Reduce the HTTP Requests”
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).
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.
Its not easy to combine images into one. Specially in case of software review.
But things can be optimized a little.
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.
One more point, smaller images separately will load faster than one big image containing all of them
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.
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.
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.
wow….thanks for your share..
i will try after this
For speeding up a website several factors should be keep in mind :
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.
Thanks for your tips
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.
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.