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:
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:
3. Force aggressive browser caching
- 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"
- When including the JS/CSS file in your HTML, append a dummy version number to file’s URL:
- 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:
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.