Site Creation

Fri 30 March 2012

I host my website on NearlyFreeSpeech (NFS), which is a great host. Storage is quite expensive, so is bandwidth to an extent - which is what made me think of using Amazon S3 to store stuff (big fan of Amazon's services). Now how do I automate moving all my static content to S3? W3 total cache seemed the right candidate.

W3tc

Installation was not supported if my web server ran PHP in safe mode, which is what NFS with its fast PHP option runs. Not a problem, pulled the latest version from trunk. The menu is quite nice and things are easy to setup. Being overenthusiastic, I enabled all the caching techniques. Soon, I see obnoxious page load times:

alt text

At this point I had no understanding of how web hosting works, so the initial blame fell on NFS and its "slow"ness because of the (supposed) overloading of its servers.

False!

After a quick "cloud" support ticket on NFS, which works on a per-ticket cost basis, I was told that the w3tc plugin was in fact the real culprit, not NFS. Disabled all caching except browser caching, and hoohah no more delay. Currently, the whole page loads in ~1 second, with the first GET request suffering a waiting time of < 500ms on average, unlike previously. The tools I used? Firebug, Chrome's own Network analysis from its developer tools, Pingdom which has a nice waterfall display, and YSlow from Yahoo. All good.

S3 vs. Cloudfront

S3 was quite easy to setup from W3tc's settings page. I uploaded all static content to a bucket on S3, from which it is currently served (cdn.hchenji.com). S3 is not exactly a CDN, it is just a highly reliable storage service. Using Amazon's Cloudfront (served as a cloudfront.net URL) will geographically optimize the serving of page components, which makes it a CDN. How much will this reduce the delay by?

Actually...it worsened the page load time to about 1.5 s as compared to the current ~1 second with S3 based content serving. Why? Probably the extra PHP processing that the plugin does. I do not have time to investigate this, but if anyone knows more about this please leave a comment. No more Cloud for me, S3 is good enough.

Smushing

YSlow recommended smushing my css backgroung image, which is the blue border that you see at the top. It is actually a very small file that is made to repeat horizontally. The embedded metadata can be stripped, it serves no purpose. This is part of what Smush.it does, the other part being lossless compression. Using this service caused a 99% reduction in file size. Page load times? About 100ms saved! I did not know that service existed if not for YSlow.


Comments

{