Speeding up websites

Speeding up websites

I hope that you have noticed a great improvement in this site's load times during the last few days. Two major and a number of minor changes have been made that have made things faster and should greatly enhance your experience. Most of these are courtesy of a presentation and resource on the Yahoo developers site, titled Exceptional performance.

Merged CSS

Following the tips in the presentation, firstly, the main CSS files have been merged into one. Earlier, I had separated the CSS into multiple files to make it more manageable to edit and maintain them. However, having the browser load separate files for global layout, the header, the menus and the content, all from another "index.css" file comes with some hefty overheads in terms of HTTP traffic.

Compressed content using mod_deflate

The second optimization was to use Apache's mod_deflate to serve compressed content to browsers that support gzip compression (most of them do). Judging by the output of FireBug, this alone has improved the site's load times by more than 70%. I was quite appalled to see that it originally took about 2-3 minutes to completely load the main page on this connection. After enabling mod_deflate, this is down to around 30 seconds. Still not very fast, but then again, my site has gotten quite rich over the years and I don't exactly have the fastest connectivity in the world.

Image optimization

One of the optimization articles I was studying mentioned OptiPNG which can decrease the size of PNG files. Going through the Ubuntu repository, I found OptiPNG, plus 2 more utilities, pngnq and pngquant.

I installed all of them and tried them out one by one. Though pngquant produces the smallest output, the loss in quality was quite obvious. OptiPNG didn't appear to affect the quality at all, but the size reduction was marginal. pngnq had the right balance of both and that's what I'll use from now.

Pngnq helped cut down the size of images, some by more than half the original size. However, CSS Sprites is what has really gotten me excited about web design and image optimization. This results in a single image that is much smaller than all images combined, while also reducing the number of HTTP requests. A number of images on this site have been combined into a single one and I can use CSS to display the area of the image I want to show.

ETags and No Expire headers

The YSlow plugin gives this site a 'D', but since the blog is currently being served by a single server, disabling ETags won't really serve any purpose.

As for far future Expire headers, I'm still working out how to do this. It would definitely improve caching performance and site load times, but would increase the complexity of the site.

Replacing Apache with Nginx

Though still under testing, Nginx (or Lighttpd) could soon replace Apache as the web server for at least some of my sites. It is ultra fast and efficient and quite simple to configure.

I have yet to receive a lot of traffic on my blog. The current hits hardly cause a dent in the memory, CPU or bandwidth usage. But whenever I get slashdotted (fingers crossed) or the site becomes extremely popular, I now have a number of techniques in place for keeping the site up and performing well.

 

Liked this article? Make it popular:

23:05pm