Minimize HTTP Requests – Best Practice to Speed up your website
Most of the end user response time is spent on downloading images, scripts, Flash, components, etc. This might be the problem while dealing with the Rich Interface websites in which developer require number of different images, scripts and CSS files. First of all you reduce the number of request generating from your web page.
Here are some Tips for that:
- Combine CSS and JS files. Combine files is the way to reduce the number of HTTP request by combining all scripts and CSS files. Combining stylesheets and script files into single fie is the difficult and lengthy task for larger application but it will surely give the positive results when done.
- CSS Sprites. CSS Sprites is the method of reducing the background image requests from your site. All you have to do is to include various background images into one and use the background- image and background-position CSS property to display the required portion of the image.
- Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it’s not recommended.
Reducing the number of HTTP request is the Key Step to start optimization. Most of the users are coming with empty cache to you website. So it’s better to improve the loading time of the site for first time.
Source : Yahoo Tips
About the Author: Avinash
Experienced full stack freelance web developer with a track record of producing excellent results for 11+ years. Excellent communication and collaboration skills, managing with a team of 20+ people. I’m motivated to make a positive impact on your revenue through the customer web portal development project.
[…] This post was mentioned on Twitter by Avinash Zala, Avinash Zala. Avinash Zala said: https://xpertdeveloper.com/2010/08/minimize-http-requests-best-practice-to-speed-up-your-website/ […]
Great, I never knew this, thanks.
Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!
Keep posting stuff like this i really like it
That’s indded what you need to consider when you try to speed up you website but keep in mind that few other things have to be checked :
– cache
– gzip compression
– style at the top, scripts at the bottom
– avoid inline js / css
– minify js and css
– remove duplicate scripts
– etags
etc.
Yes you are right, you can find a separate article for each of the topic on this blog.
I suppose I could Google it, but how do you combine your CSS and JS into one file? What file extension would you use? Or am I mistaken and the file extension is irrelevant? Shrugs…
A pretty good CSS/JS Minifier – http://minify.chaoscontrol.org
You have misunderstood it. Here combine means all JS in one JS file and all css in ONE CSS file. Not css and JS :) Hope this is clear now..
Ah.. that makes more sense – my bad! Thanks for clarifying!