July 23, 2010
Ever since I started moving on from just developing websites to more complex web applications, I’ve learned different ways of optimizing your web application for speed and efficiency. It’s important to keep your web application running snappy, because as LinkedIn has found out: the likeliness at which visitors bounce is directly related to the performance of your web application. You can find out more about their story with how they kept their Bumper Sticker application running snappy by watching this video hosted on Joyent:
“…the likeliness at which visitors bounce is directly related to the performance of your web application.”
Tip 1: Use Image Sprites Whenever Possible, Especially On Common Graphics
This has been advised many times in blog articles but for those who do not know, utilizing one larger image file instead of multiple image files is better. Of course, there is always a point when the benefit can become lost if you go overboard with it, but the rule of thumb is: if a graphic is used multiple times across a sprite, especially in the use of a CSS background, add it into a common sprite.
Why is it more efficient? The bottom line is that you save on the amount of HTTP requests that have to be made between the client and the server. For more information on sprites and how to implement them, check out the awesome “how-to” article over at CSS-Tricks.
“Why is it more efficient? The bottom line is that you save on the amount of HTTP requests that have to be made between the client and the server.”
To help see which files can be combined, YSlow for Firebug is a great extension for Firebug that analyzes page loads and script execution to see where your website/web application is performing slowly.
Tip 4: Optimize Your Algorithms
This tip is also meant more for web applications as building websites typically do not require the use of algorithms. As I’ve learned with the development of my facebook application, the use of a very inefficient algorithm can break your application.
Long story short, I created my facebook application in PHP and deployed it on a very powerful Joyent server that I was able to use for free for a year as part of a promotion. I created a very inefficient algorithm during a lookup which performed fine on the Joyent server. However, when the year of free service came to an end, I moved the application over to my personal server and saw the application break. The use of unnecessary nested loops was later rewritten into one loop and then the application came back to life.
Tip 5: Cache Dynamic Content on the Server When Possible
Codeigniter is one of my favourite PHP frameworks to work with. I’ve used it a ton for its great performance and ease of use. On one of my projects I used it for, I noticed that it was having to constantly look-up data from the database when I knew that it didn’t necessarily have to. I knew that there were caching plugins for WordPress which worked by saving static pages of dynamic content. If something liked this existed for WordPress, then surely it must for CodeIgniter since it had such a strong community.
Lo and behold the core installation of Codeigniter already included methods of caching dynamic content. After implementing it, less database calls were made which resulted in a more efficient application.
There are also some modules for PHP which can be installed to help give an even better boost with server side caching such as XCache. Installing this alongside with smartly utilizing cache methods in CodeIgniter can make your web app perform almost as fast as if it were a static web page.
Tip 6: Tweak Your Server Set-up
For the longest time I was a user of Apache. Of course, when I started out making websites, I really had no idea what a web server consisted of so I was using it without knowing.
When I set out to set up my own VPS for the first time, I went with an installation that used Apache. When I found that it was constantly eating up memory, I did more research on how to optimize it. It turned out that Apache was a bit hungry on memory.
In the above graph that was taken from Joe’s Blog, it’s easy to see that Apache isn’t the most efficient server out there. There are things you can do however to optimize Apache so it performs better, but I ended up switching to using Nginx since it used up less memory. You could also see performance gains by using Nginx as a reverse proxy alongside Apache to get the best of both worlds. More about my Nginx experiences at another time though.