Six Tips for Optimizing Your Website/Web Application

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:

Watch LinkedIn's Story on Scaling Their Facebook Application: Bumper Sticker

Although most of these tips are geared more towards web applications, there is nothing stopping you from applying this to a website. Applying these tips in practice towards any sort of web development will see immediate payoffs during a sudden burst of traffic. Those with slightly slower internet connections or using outdated browsers will also unknowingly appreciate these extra steps you take as these older browsers have javascript engines that perform much slower than what we’re used to with the blazing fast engines implemented in Google Chrome, Safari 4, Firefox 3, etc.

Tip 1: Use Image Sprites Whenever Possible, Especially On Common Graphics

Apple's Navigation Sprite

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.

Tip 2: Keep Your External Javascript and CSS Tidy

As a follow-up to the first tip and how saving on HTTP requests can help your web application; the same can be said about external javascript and CSS. By minimizing the amount of external files that have to be referenced, you save on HTTP requests. This results in the scripts getting to the client (browser) quicker and having it execute faster. As mentioned in the introduction of this post, I said that those using older browsers with slower javascript engines would unknowingly appreciate some of these extra steps you take to optimize your web app – this tip is one large part of it.

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.

In fact, these first two tips are outlined in Yahoo’s Best Practices for Speeding Up Your Web Site. They also advise that you move references to javascript to the bottom of your page (just before the ending </body> tag) so that your page loads first, and then your javascript.

Tip 3: Compress Your Javascript

This tip is meant more for web applications that utilize a lot of javascript. By compressing your javascript with a tool like YUI Compressor, you can cut down on the size of your javascript files so that they can be downloaded to the client quicker, resulting in earlier execution.

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.

Apache vs. Nginx Response Time

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.

Comments