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
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.
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.
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,
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.
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.
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:
On 1st November 2007, at 17:17pm PKT, Atif said:
Thanks for sharing nice tips.
On 21st November 2007, at 22:30pm PKT, Fahad said:
Yea, nice tips. Thanks for sharing. You really know your stuff!