Optimizing your site performance

As you may of may not know by know, I´ve recently re-launched my blog. This time I went from Wordpress to my own homebrewed frameword — I simply got to tired of all the features I wasn´t using in Wordpress, features which evedently just made my administration and blog sooooo slooooow …

So, now on my own code I have full control again, yay — and this time I wanted the blog to be fast(er)!

First things first — do you need it?

A really good and quick pointer to whether you need to optimize your site or not, is to run a simple load-test using automated scripts/sites such as Pingdom. Pingdom will give you a few hints, such as the number of request needed to load your page, avarage load-time and total page size — As a “bonus” Pingdom will even add your numbers into a performance grade, giving your site a grade x out of 100 (100 out of 100 being best).

More details please!

After you´ve run a test such as the one provided by Pingdom and you find the result less than preferable you probably already have various tools to help you out …

Safari and Chrome (Webkit browsers) come with the buildin Webinspector which provide you with a tab called “Audits”. Similar tools such as Firebug and YSlow will help you locate and describe (smaller) quick-wins — what they all have in common is that they will actually describe to you, what you need to do, to get a better result (and score) for your website.

Minifying and combining Javascripts and CSS

Now pretty much 70% of the tips you´ll get is regarding server-settings and about following good practice when developing — but one the more demanding and important tips is to minify and combine Javascript and CSS-documents into as few and small files as possible (to reduce number of requests and download-size).

You can find various solutions, from simple to more complex, that will do most of this for you, even on the fly. Personally I´ve successfully tried this solution, which automatically combines both Javascripts and CSS ( Read about my experiences here {in Danish though}).

On the compressing/minifying side, I´ve tryed the Google Closure Compiler, which does a great job with you Javascripts, but I´ve recently jumped to a Yahoo! solution called YUI Compressor, which does both Javascript and CSS.

Tip: Here´s a good readup on The Importance (and Ease) of Minifying your CSS and JavaScript.

Cache the hell out of it …

For those opensource (and even comercial) systems out there, your are probably able to find various, more or less, complete caching-solutions. Wordpress has W3 Total Cache, which I believe is one of the more famous ones — but I was just moving away from this, so I had to make my own solution :)

Over the past few years I´ve grown quite fond of Memcached — in short Memcaching is about caching objects in memory. Now objects can be a lot of things eg. a reqular object (instance of some class) an image or even a database result set. Personally I´m currently using Memcache to store the resulting array of photos from my Flickr stream. I´ve been testing the time it takes to load my page with and without the request to Flickr and found that this was one of the more time consuming requests on my page. Also I know for a fact that I do not upload new images every hour, so actually theres no need to fetch this that often.

The idea is pretty simple. Once you have located the objects that you want to cache, you do a quick lookup in Memcache and use the result from here, if it exist, otherwise you would use your normal logic and store it in Memcache afterwads, making it accessible for the next request.

In psydo-code this would look something like this:

function get_foo(foo_id)
    foo = memcached_get("foo:" . foo_id)
    return foo if defined foo

    foo = fetch_foo_from_database(foo_id)
    memcached_set("foo:" . foo_id, foo)
    return foo
end

Obviously the use of Memcache varies from solution to solution — You simply have to find the most time-/resource-consuming places in your system and use it with a timeout-setting that make sence for that procedure to be available.

The result!

After having turned my back on Wordpress and implemented all the above, here´s the result from Google Analytics when viewing the avarage time it takes to load my page — Guess when I made the move :p