Optimizing web pages
Sunday, February 7th, 2010While working on Timeline Builder I noticed that loading a timeline takes a while. This is because Timeline is implemented as lots and lots of Javascript and even though it is minified and all files are concatenated into one the result is still quite big.
One low-hanging fruit is to use compression when delivering the files from your web site. Quite surprisingly, this feature is not available by default if you host your web site on popular hosting service such as GoDaddy. But searching on the Internet allows one find out how to do it. OpensourceTutor is a blog with lots of interesting content.
This post describes how to use Apache for our purposes. Basically, it depends on the version of Apache. For 2.x version you have to implement the following .htaccess:
<ifmodule mod_deflate.c>
SetOutputFilter DEFLATE
</ifmodule>
This approach works with hosting provider Logol where I have one of my test sites. However, GoDaddy uses a different version of Apache and another approach is needed. I have tried replacing mod_deflate with mod_gzip but this did not work out.
The approach suggested at OpensourceTutor is to use the Apache rewrite engine. When an HTTP request arrives Apache will check whether a file with the same name but with a postfix .gz exists and if yes then it will serve the compressed file. Therefore, the web developer needs to upload the compressed version of each file that he wants to optimize. The .htaccess code looks as follows:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+) $1.gz [QSA,L]
There is a third approach explained here in detail. It works for pages written in PHP. The basic idea is to prepend <? ob_start("ob_gzhandler"); ?> to your pages and that will turn on compression.
These are only few ideas on how to improve your web pages. There are automatic tools that analyze your web pages and make suggestions, most notably YSlow from Yahoo and Page Speed from Google. After reading their reports I learned that there are lots of ways in which I can improve my web site, including
- Adding expires headers
- Using entity tags
- Minifying CSS and Javascript
These ideas mean that I need to maintain two versions of my web site – one which is publicly visible and optimized with compressed and minified scripts and another with uncompressed content which is convenient for development. Then I will need a script that converts the development version into production version. Even though such development configuration seems natural I have not found any tools that facilitate its implementation on popular hosting sites.

Page Speed can generate nice graphs as the one shown above. Each track represents one HTTP request. After I added compression the length of the tracks has been reduced, therefore the results of your efforts are easily measurable.
These two extensions demonstrate the flexibility of Firefox. I have noticed that people achieve glory these days not through a large software development effort such as an operating system or a word processor but through a little application such as a plugin. Typically, plugin runs on a bigger platform along with thousands of other plugins. I have read in Economist that last fall a pizza-tycoon kind of game running on Facebook has attracted several million gamers in a couple of month – an unimaginable rate for the gaming industry alone. But social network makes it possible.
Anyway, there are plugins that are so successful that people build their plugins on top of them. PageSpeed and YSlow are examples of this type of plugin because they are built on top of another Firefox plugin Firebug. Another example of plugin used to develop other plugins is Greasemonkey.