Welcome to part 3 of this article series on how to maximize the performance of you website. This time I am going to show you how to minimize the number of HTTP requests on your page. Most people don’t even realize how many HTTP requests are required until every single element on the page has been loaded. I was shocked when I saw that the Sociable plugin for WordPress has not been optimized for the number of requests but more on that later.
4. Less Requests = Better
If you have not done yet you need to empty your browser cache once again. Open the page you wish to optimize and open Firebug by clicking on the Firebug icon in your browser’s status bar.
Firebug
If you have not used Firebug before on that domain you need to activate it (check all boxes) and reload the page. After the page has finished loading open the network tab in Firebug at the top.
This will show you all of the HTTP requests that were required on your page.
Using CSS Sprites To Reduce Image Requests
Now have a look at all of the image requests on your page. If you move your mouse pointer over the “GET …” text on the left hand side of the list Firebug will show you a thumbnail version of the image so that you can find out quickly which image has been loaded.
On my blog (this page) there is a large number of images loaded which can (and should) be optimized.
Some of the HTTP Image requests on my blog
There is a good technique to merge several images into one file yet still be able to display separate images even in separate image tags in HTML. These are called CSS Sprites because Cascading Style Sheets are used to implement this. In fact a new image is created that contains all of the images and CSS is used later with background positions to show separate areas of the image where the source images are located in the merged image.
This is not as hard as it sounds because although you could create the merged image and CSS manually I prefer to use the Online CSS Sprite Generator.
The only thing you need to do is to package all of the images into a single ZIP file and upload it on the Sprite generator website. I recommend that you use the same output format as the original images – I will be using the PNG format. You may want to change some of the default options however I am using the default options most of the time.
After clicking on the “Create Sprite Image & CSS” button after a few seconds you will be shown some CSS code and a link to download your merged image.
In my case I received the following CSS code:
.sprite-1_de_btn { background-position: 0 -30px; }.sprite-delicious-large_blue { background-position: 0 -83px; }.sprite-digg-large_blue { background-position: 0 -165px; }.sprite-findmeonfacebook2 { background-position: 0 -247px; }.sprite-linkedin2 { background-position: 0 -310px; }.sprite-myspace1 { background-position: 0 -370px; }.sprite-stumbleupon_48x48 { background-position: 0 -460px; }
This is the code I have added (slightly modified from the original code on the website):
.sidebarsprite {background: url(/img/csg-4a07143404186.png) no-repeat top left; }
This is the merged image:
Merged Buttons as CSS Sprites
As I am not using a list for the images on the right hand side of this page (the sidebar) although this may make sense this is how I implemented it. You need to have a 1×1 pixel transparent GIF first. This will be used as your main image file in the image tag and it has to be transparent for the background image to be visible.
<img src="/img/spacer.gif" width="100" height="30" alt="" border="0" class="sidebarsprite sprite-linkedin2" />
When using an image tag (and not an <li> tag) you have to set both width and height of the image as shown in the image tag above otherwise your image will not be shown.
It does of course not make sense to merge all of the images on your page just to save HTTP requests but you should do this whenever there are images on your page that are used on many other pages on your site as well (just like the sidebar images I am using).
By using the CSS sprite technique just described I have saved 6 HTTP requests to the server. There is even more to optimize – try it for yourself on your own website.
External Scripts Under Scrutiny
Now it’s time to have a look at all the external scripts and maybe images used on your site. Use the method described above in Firebug to find more culprits. And look very closely at your own website – do you really need these 12 external JavaScripts to show your Twitter follower count, your social network friends and contacts and so on?
By using Firebug you can find out how much further requests are caused by some of the external scripts – just scroll down the list in the network tab.
Remove all of the external files that are not essential and that you can live without.
Merge CSS And JavaScript Files Automatically
If you have several CSS and/or JavaScript files on your page hosted on your own server you should merge them into a single file – for your visitors. I strongly suggest to keep modular code separated on the development site but you may wish to just copy all of your own JavaScript and CSS files each into a single .js and a single .css file while still keeping the original files for editing.
Also see the section Optimizing CSS and JS Code in part two of this article series.
Several techniques are shown on this page but I am planning to show you the one I am using in one of the next articles on my blog.
Outsourcing With Google
If you are using one of the popular JavaScript frameworks like prototype.js, jQuery, MooTools, DoJo, script.aculo.us etc. I suggest using Google to deliver these files straight from their servers. Google’s worldwide network of servers has a very high performance and speed so I suggest you check out the documentation on the AJAX Libraries API and start using it to deliver these files through Google’s servers.
This concludes the third part of this article series. Continue with the next part.
