5 Cool Things You Can Do to Increase Site Speed (and Search Rankings): Part 1

As I wrote in the previous post, one of the reasons to move Handy Backup site from table-based layout to CSS-driven div’s was Google Webmaster Central blog’s announcement that they included website speed in search ranking algorithms. Getting rid of endless <table>’s, <tr>’s and <td>’s, as well as optimization of CSS allowed me to reduce raw HTML codes by at least 10KB per page, which has of course made its little contribution to the loading time. But after that I decided to delve further to the subject and found that there are many other things that a webmaster can do to improve his site’s performance and visitor experience.

In this post I’ll discuss what makes up a website’s loading speed and what can be done to fasten it.

Optimizing the Number of HTTP Headers

It is important to understand the very nature of browser-server interaction. After the DNS provides your computer with an IP address of the site you want to open, the first thing the browser does is send a number of HTTP headers to tell the server your caching and encoding options, as well as GETs, POSTs, cookies and other information. Here’s how it looks:

GET / HTTP/1.1
Host: www.handybackup.net
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTB7.0 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Cookie: …

Requests like this are made for every single object found on the page including HTML code, each CSS stylesheet, JS script, image, flash object, favicon and any other file that ever gets downloaded to be shown on the page. If you want to track the headers your browser sends while you browse the Internet, there is a variety of tools that can help you do it, for example Live HTTP Headers add-on for Firefox. Particularly, for www.handybackup.net Live HTTP Headers showed me 35 records like the above that my browser sent to the server:

One HTML page (homepage)
Two Javascript files (menu and Google Analytics)
One strange request to /__utm.gif?…, obviously made by Google Analytics script
One CSS stylesheet file
9 images in HTML code (<img> tags)
20 images received as backgrounds specified in CSS
A favicon

All told, that took over 30KB of data for a single page!

Advice №1: Make Your Pages Load As Few Files as Possible

How to do it. For CSS/JS files, there is a sweet open-source application called Minify, designed to create a single download from multiple CSS or JavaScript files. No matter how many external files your website wants to load, Minify dynamically combines them in one, making the browser send only one HTTP header.

For images, there is a well-established technique called CSS spriting. It’s a very powerful method, when you combine many small pictures into one, and then use the background-image and background-position style properties to show the desired segment. It can help you reduce 30 images and 20KB of HTTP headers to only one merged image and one HTTP header.

I don’t use it much at www.handybackup.net, there’s only one place where I’ve tried it to date:

See the language menu and all those little flags? Since they appear on all pages of the site, I’ve combined them into a single file (http://www.handybackup.net/templates/handy/images/flags.png) and split it via styles, like this: .flag_fr {background: url(/templates/handy/images/flags.png) no-repeat 0 -36px;}

Of course, it is not wise to combine absolutely all images that you have. Firstly, you don’t use them all on every single page of the site, do you? And secondly, there are images that people may want to download separately, e.g. pictures of software boxes, logotypes, etc. – there’s no reason to not let them do it.

Advice №2: Distribute Downloads Across Several Servers

The second thing about HTTP headers is probably even more important. Even if you have ultra fast Internet connection, your browser simply won’t send 35 HTTP headers simultaneously, but will load objects consecutively. This has some solid reasoning explained in HTTP/1.1 specification (http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4):

Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion.

A solution for this is to put your files at different hosts. The easiest way is to create several subdomains, e.g. images1.site.com, images2.site.com and put your images there. I don’t use this technique (yet), so I can’t give any advices on how to make such changes to the website. But I guess there must be a simple server side solution, like a PHP script, that automatically replaces old image sources with new ones, so you don’t have to edit everything manually.

There is one last thing related to HTTP headers that I haven’t mentioned yet. It is important to remember that HTTP headers are outgoing traffic which means that for asynchronous connections (like ADSL) it may be 20 times slower, than the incoming traffic. And this increases the significance of reducing their number even more.

In the next post I’ll speak about HTML, CSS and server-side compression – I welcome you to subscribe to the blog, so you won’t miss it.

Posted by Alexander Rassokhin, Project Manager (and webmaster/SEO)

Tags: css, seo, speed

This entry was posted on Monday, April 26th, 2010 at 3:38 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.