iosart blog

Donald Knuth once said that “premature optimization is the root of all evil”. Programmers often waste too much time optimizing their products for situations which will never actually happen in real life. The same is definitely true for web development – do you really need that sophisticated caching system if your site is being visited by 5 people a day?

With that said, you should always have scalability and performance in mind – know what steps you can take to improve performance if your site becomes popular.

If you have a scalable architecture, adding more servers and upgrading the existing ones should definitely solve many performance issues, but before you start buying more hardware, there are several simple things you can do to improve the performance of your existing system:

1. Minify your JavaScript files
Your JavaScript files often contain comments, white space and other unneeded characters. Minifying these files means removing these unneeded characters, which can reduce the size of your files by 5%-30%. Smaller files, faster transfers, better response times. A nice utility for minifying JavaScript files is JSMin.

2. Compress served content
Vast majority of modern web browsers supports compression, which means that your server can compress the document before it sends it to your browser, and the browser uncompresses it upon arrival. Compressing your HTML, JS and CSS content can dramatically reduce its size – by up to 70%! Again, smaller files mean better response times and happier users. The method for enabling this functionality really depends on your web server, but with Apache 2.x you can add something like the following to your .htaccess or httpd.conf files:

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

3. Force aggressive browser caching
Without caching, the browser would load all your JavaScript, CSS and other files over and over again for each page of your site your user visits. A better scenario would be for your browser to ask your server whether the requested file has changed, and if not, just use the local cached copy it already has. The problem with this scenario, that the browser still has to issue a HTTP request for each file, even if such request doesn’t lead to the whole file being downloaded. The best thing you can do is to tell your browser to keep the files cached forever, always using the cached versions and never needing to contact your server. Here’s how this works:

1. Tell your server to send out special HTTP headers with your JS and CSS files. These headers will tell your browser to cache the received files forever. With Apache, you’d typically add the following instructions to achieve this:

   Header set "Expires" "Mon, 28 Jul 2014 23:30:00 GMT"
Header set "Cache-Control" "max-age=315360000"


2. When including the JS/CSS file in your HTML, append a dummy version number to file’s URL:
   <script src="myscript.js?v=1"></script>
3. Once the browser loads the file once, it will never bother your server again (at least not until 2014!). If you change the file and want to force users’ browsers to load the new file, just increment the version number in your HTML:
   <script src="myscript.js?v=2"></script>

4. Use CSS Sprites
CSS Sprites is a really nice technique for reducing the number of image requests for each page. Basically, you can combine all your logos, icons and graphics into a single image, and then use CSS to specify which portion of the combined image corresponds to any specific page image. So, for each page, your browser only loads one larger image instead of many small ones. Decreasing the number of HTTP requests for each page speeds up the page loading times. More info about this technique can be found here.

We’ve been using some of these techniques on FoxyTunes and recently I’ve also added many of these small optimizations to Flickriver, in order to help the site cope with the increasing traffic, without needing to spend more money on additional servers.

A great resource for learning more about these and additional techniques is the “Exceptional Performance” area of Yahoo Developer Network.

This entry was posted on Thursday, September 13th, 2007 at 11:50 pm and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.