Minification is a subject which comes from my heart. In this article I will talk about reducing the amount of requests to let your sites load faster.
As I wrote in my previous article minification can lead to a 90% decline in the time it takes to load a page on a clients computer. One of the main points to get this speed-up from is by cutting in the amount of requests a client needs to execute to load the total page. Ideally we should get this down to under 10 requests, however, that might not always be possible.
We are going to use one request for the user requesting the web site. The other requests are triggered by things such as (but not limited to) stylesheets, javascript files and images. We obviously can’t work our magic without having stylesheets and javascripts so I am not advocating we all go back to a fully plaintext internet.
Why does the amount of requests matter? Because, funny as it may sound, browsers usually only handle between 2 to 10 simultaneous requests. More requests means the browser waits for the first of them to finish and then starts executing the others.
You can reduce the amount of requests by using the following simple tips.
- One stylesheet.
- One javascript file.
- Using CSS sprites for images.
One stylesheet. Yes, just one. Mash everything together into one stylesheet. GZIP it. Set a far-future expiry header on it so the browser never has to do that request again. I’ll write about far-future expiry headers in another upcoming post so for now you have to bear with me.
One javascript file. Javascript libraries tend to get quite big. They also tend to have multiple components which are all in their own javascript files, mash them together and put them in one file. Put the correct headers and GZIP’ing on it to get even better delivery.
Using CSS sprites for images. This is the big one. If you are using rounded corners (like many of us do), and you can not afford to write your CSS only for the browser which implement CSS3, then chances are you are using multiple images for your background.
If you are using the latest techniques you will at least need two images for a single rounded corner box. You also need an image for your logo, maybe some buttons, some shadows. If you sum up all those images which are in your stylesheet you can easily get to a pretty big number.
Using a simple technique called CSS sprites you can reduce this number to 1. That’s right 1. Now that will have an impact on the amount of requests.
