Web Site Optimization

March 4, 2009

There are many techniques to speed up the web page load time. This Yahoo developer network article sums most of them. If you own a web site with thousands of daily visitors, some of these tweaks will help you provide a better experience on your web site to visitors.

I’ve been on the CDNLayer development since I started working at SoftLayer. One day I wondered how much performance increase some of these techniques can bring. I chose to implement the techniques below.

  1. Using CDN
  2. Combining multiple JS and CSS files to a single JS and CSS
  3. Compressing JS and CSS
  4. Serving files from 2 different domains

I chose them because they are easy to implement and CDN has become very affordable nowadays. I copied the index page of SoftLayer.com and took 5 different steps to optimize the page. To make the page a bit larger, I added a JS and a CSS file to the index page. So the total file size was about 980 kilobytes.

  1. Step #1: “HTML + 2 JS + 2 CSS + images” served from my server
  2. Step #2: “HTML + 2 JS + 2 CSS + images” served from CDN
  3. Step #3: “HTML + 1 combined JS + 1 combined CSS + images” served from CDN
  4. Step #4: “HTML + 1 combined/compressed JS + 1 combined/compressed CSS + images” served from CDN
  5. Step #5: “HTML + 1 combined/compressed JS + 1 combined/compressed CSS” served from a single CDN host A + “images” from 2 different CDN hosts A and B

The page loads within 2 seconds in real life so I disabled both the disk and memory cache in Fire Fox to exaggerate the result. I requested each version 10 times and here is the average page load time in seconds.

  1. Step #1: 11.976
  2. Step #2: 9.602
  3. Step #3: 9.626
  4. Step #4: 9.123
  5. Step #5: 8.72

First, my test site is not on SoftLayer’s server, it is located somewhere in Pennsylvania. Second, using CDN, thus the files are served from Dallas POP, gave me a good 2 seconds decrease. Third, combining JS and CSS files did not give me any benefit. It was only 2 less trips to the server anyways and I’m using a high-speed Internet so I guessed this would not make much of difference in my case. However, if I had a dial-up, fewer trips to server, even it were only 2, will help the page load time. Fourth, gzip compression reduced the content size and it shortened page load by 0.5 seconds. It doesn’t seem like a big benefit as far as the page load time is concerned but keep in mind that the compression decreased the page size by more than 100 kilobytes. If you have a large amount of visitors, it will help you save lots of bandwidth. Finally, serving files from 2 different domains can reduce a significant amount of page load time. This is due to the limit within the browser itself. Most browsers are set to download 2 files from a domain at a time regardless of how fast your Internet connection is. So if you serve your files from multiple domains or sub domains, your visitors will be able to download more files simultaneously. If a visitor is using a high-speed connection, this trick will help the page load significantly.

I hope some of these techniques can help your sites get prepared for a large number of visitors. Web site optimization techniques not only will reduce the page load time but it will also help extend your web site’s capacity. Who knows, your web site may get Digged tomorrow!