Speeding Up Your Website: Minimize HTTP Requests

We available for hire! — Need help with a web or mobile project?

January 29th, 2009

Hi there guys! In yensdesign, we are continuously talking and publishing tutorials, tips, tricks and cool effects to improve the user’s experience by making our websites more friendlies and accesibles.

But there is a very important thing that you must not forget and which is the main cause by which users leave the site : LOADING SPEED.

We are going to review some important concepts about website’s performance and explain best practises to speed up your websites to reduce the loading time. Your server and your users will be happier at the end of these articles

Actually we have published these articles:

So let’s dive into the first part of these series: Minimize HTTP Requests.

Why HTTP Requests?

Taking a look at some interesting articles about Front-End optimization like this one from Yahoo, we can know that the most of sites take 80% of the loading time in downloading components of the Front-End.

When we say Front-End, we are talking about the components that users download to render the website, including:

Images
Stylesheets
Scripts
Flash
And more…

Reducing the number of these Front-End components will reduce the number of HTTP Requests to render the page, so we will have faster pages.

The first idea that may come to our mind to reduce these HTTP Requests is simplify our designs, but we need to find a balance between the optimization and the design.

Let’s see some good practises to reduce them.

Reducing HTTP Requests

Because we want to still having our great design and optimize the number of HTTP Requests we are going to see how to achieve this:

Using CSS Sprites is the best way to reduce the number of image requests. In most of cases we are making layouts with more than one background-image in different divisions. For example if we have 5 divisions with their different 5 background-position images we have 5 image requests. We only need to make a single image containing these 5 images, so we reduce from 5 requests to 1 requests. How to achieve that? Take a look at this tutorial: Mastering CSS background-position.

Combining CSS files is another recommended practise. In some cases we have more than one CSS file but if you find the method to put all into a single file it will be faster. If we have some small CSS files, it will be better to have all into a single bigger CSS file because it will be in cache for future sections, avoiding the load of multiple small CSS files for each section.

Combining Script files is another good practise. In some cases it’s harder to implement all scripts into a single script file, but as we said it’s important and recommended spend time in this if you want to optimize your pages. Remember that you can / must minimize all your scripts to get lighter files.

And that’s all in this first article guys! Remember that reducing the number of HTTP Requests is the first step in the optimization process, specially for first time visitors because they have not all these components in cache.

In this Tenni Theurer’s blog post Browser Cache Usage - Exposed! says that the 40-60% of daily visitors of a site come in with an empty cache.

It will be great if we can do faster websites for our first time visitors, right?

Remember that you can solve your doubts in our forums and follow us on Twitter to know more about what are we doing in any moment!

See you on next tutorial and remember that we want you suggest tutorials to write!

See you on next tutorial guys!

Tags: http requests, minimize, optimize, speeding up
Category: Articles, News, Themes, Tutorials, Web Design

This entry was posted on Thursday, January 29th, 2009 at 11:59 am and is filed under Articles, News, Themes, Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Enjoy this post?

Your vote will help us to grow this website and write more entries like this one :)

We available for hire! — Need help with a web or mobile project?

From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies. We try to help you, sharing our knowledge acquired on worked projects, while helping the community and showing our capabilities.

If you want to ask for a budget, we hare available for hire! Don't doubt in get in touch with us!.

Adrián Mato Gondelle

Thanks julienguigner for the “which” correction

Rekeb

Great tutorial. Very usefull.

@Rekeb Thank you as always

Julien Guigner

@adrian You’re welcome

Again, usefull post… I use CSS Sprites more and more, it’s very efficient.

Kolia

Hi,

I find this tutorial nice, but a bit poor.. the fact of minimizing the number of requests is quite described, but not the one of minimizing the requests themselves with some CSS optimization and cleaning, or JS minifier. Same for picture optimization.

Anyway, good job, and good overview for beginners!

@Kolia Thanks for posting! As you may read this is a first part of a serie of tutorials about optimization. In this case we are talking about minimize HTTP Requests so we focus on them.

But reducing the number of HTTP Requests doesn’t include the image optimization, this will be a part of other tutorials (maybe about image optimization)

Thanks one more time for your comments I will try to explain more about different questions.

Aditya

January 30th, 2009

Waiting for the next…

social networking web design

February 3rd, 2009

useful advice, also, would like to see more on image optimization, caching and bandwidth issues.
thanks so much,
sandy

floor jacks

March 14th, 2009

I have to say, I could not agree with you in 100%, but that’s just my opinion, which indeed could be very wrong.
p.s. You have a very good template for your blog. Where did you find it?

@floor Why don’t agree? The theme was made by me from scratch hehe