The quest for page speed - CDN's, Minify and more...

As I've started working more and more with jquery and image/data rich websites the issue of page load speed has become increasingly important. Back in the day people worried about images taking a long time to download, then as high speed internet became more common, many developers started "wasting" bandwidth and happily tossed in beautiful background image, rounded corners and all sorts of geegaws and doodads (technical term).

Now with "high speed" internet a god given right for all (sarcasm) page load speed has suprisingly become important again. When you have high speed - many sites appear to load instantly - enough so that instant has become the new norm. When taken against instant, a 3 - 5 second page load time is an eternity - so suddenly developers are having to craft sites that can deliver a very media rich experiences while still loading very fast. So... what to do?

1. Use CSS where ever possible.
From radius corner to background gradient to styled form buttons and fields, CSS can increasingly take over for the small png's of old. Take a look at some of my favorite examples of CSS generated "images"
Background generator: http://www.chromeexperiments.com/detail/background-generator/
CSS Button generator: http://www.cssbuttongenerator.com/

2. Use a CDN
How about using google as your own content delivery network for free? The big boys serve much of their content from delivery networks (basically a bunch of synchronized servers around the world - each of which can be used to supply the requested file faster that having to ping a server from the other side of the world). If you are using large CSS files and/or large script files, using a CDN can improve performance for your visitors from the other side of the world. To get started wander over to appengine.google.com and create a free account. Upload your files to the google network and then serve them like this:
http://your-application-id.appspot.com/assets/yourfile.png


What I found was that initially page load times from outside the US went up - then slowly went down several hours after I started serving assets from the google CDN. Perhaps it takes sometime for the files to propagate across the google network?

page load times for jquery based login page after primary js files were moved to google CDN. Spike was immediately after the js files where uploaded to google CDN and page code was modified to call CDN files.

update: even after a few days the google CDN delivered content is still introducing variability into the page load times (as measured via monitor.us) More research is needed but don't take the improvement in performance for granted...





3. Use minify on your JS files.
I was suprised to see that my beautiful js files were slowing down my page load by a good bit. Using minify you can reduce file size greatly - then serve them through google cdn and watch your page speed go way down and your user satisfaction go up (a little bit...)