The Usefulness and Howto of Website Performance Tweaks

The original idea of this blogpost was that I wanted to tell a story about “X ways to improve and optimize your webpage performance”. That could become some kind of digg or delcious one-day-fly but mostly would be some kind of sum up rewrite of all the great articles already written on this topic. Therefore I chose to just share the links I think are interesting on this matter and where I took some advice of. Although it’s definitely worth looking at backend tweaking (Nginx and Memcached, a 400% boost!), this post mostly targets on front-end perfomance since, regarding to this YUI blog post, “it turns out that most of web page performance is affected by front-end engineering, that is, the user interface design and development” and most of you don’t have their own server to adjust and play around with (although you should, it’s a great learning process, but more on that in some other future posting).

The most important article and starting point would be Yahoo’s:

1. Best Practices for Speeding Up Your Website
This gives you a breakdown of one of the “been there, done that” techs of all the most important do’s and don’ts about performance and speed of your website. Those tips are integrated in the useful firefox plugin YSlow, which shows you how your site scores on all the different covered topics.

Since the so called “Web 2.0 hype” everything is ajaxified and fancy css and javascript (frameworks) are more important and widely used than ever before. That brings me to the next useful links on this that elaborates more on this point than Yahoo’s doc, that is Carl Henderson’s:

2. Serving Javascript fast: “this means a combination of making our content as small and fast to download as possible, while avoiding unnecessarily refetching unmodified resources.”. It’s a nice and elaborated read on the topic and it goes into details that you might wanna know about.

Another good read on compressing files before serving it to the client is Max Kiesler’s posting:

3. Decrease Load Time and Increase ROI in Web 2.0 and AJAX Sites. Where he talks about a lot of compression methods, techniques and benchmark tools.

Important and mostly forgotten about is the beautiful (and sometimes hated) Web Cache.

There are two main reasons that Web caches are used:

• To reduce latency — Because the request is satisfied from the cache (which is closer to the client) instead of the origin server, it takes less time for it to get the representation and display it. This makes the Web seem more responsive.
• To reduce network traffic — Because representations are reused, it reduces the amount of bandwidth used by a client. This saves money if the client is paying for traffic, and keeps their bandwidth requirements lower and more manageable.

If you’ve ever wanted to read more about Cache and what you can do with it, this documentation is extremely useful:

4. Caching Tutorial for Web Authors and Webmasters

And then there is something I first chose not to include in this posting but there are some interesting things concretized that doesn’t are that clear in the Yahoo’s docs first mentioned. So to conclude this posting I chose to actually mention the ‘digg, delicious’-like posting:

5. 10 Ways to Improve Your Web Page Performance.

So, there you have it, my little collection of useful articles/postings on website performance. Only thing I need to do now is apply those on this site =) Although I think you can get a lot out of those links, I can also recommend this book of Steve Souders (The Chief Performance Yahoo! and YSlow guy): High Performance Web Sites: Essential Knowledge for Front-End Engineers (amazon).
If you know some more useful articles/postings on this matter don’t hesitate to post it in the comments, I like to keep track of it in this posting.