2/27/12

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?
Click here to view full size
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...)

2/13/12

Comparing data visualization tools

I do a lot of work (a lot of work!) visualizing data sets using online tools. To date I've:

1. used by hand "build a table"
2. Google data viz
3. jquery based charting tools
4. jquery + datatables.net

What I've learned:

1. The new "dashboard" toolset from google is simple awesome. The trick is to create a json data source and then use this to drive the google data visualizations.

http://code.google.com/apis/ajax/playground/?type=visualization#full_dashboard
Once you have created a google compliant data source - the rest of the process is straight forward.

++Free, easy to use and very flexible presentation
--The data source itself is finicky. google have strict requirement for defining data types

2. Using datatables.net to create interactive tables for simple data presentation is so easy there is little reason for using anything else...

datatables.net

+++Free, easy to use and VERY flexible in terms of data types. The best part of the entire plugin was its native ability to recognize 'dates' and sort accordingly. Put in 1/1/2012 and 10/1/2012 and the plugin sorts according to data correctly. In google land you have to type the data, and then have the json feed put in the dates as {v:new Date(2012,1,11)} being careful to use zero based dates. This means that if you are already spitting out dates in user friendly format you have to create another routine to spit out dates in json friendly format.

--not quite a cool in terms of charting flexibility.

My take away? Use them both. I created a json data feed which i use when i need a time chart and then use the datatables.net jquery plugin to render chart/spreadsheet data. The result in my opinion is the best of both worlds.

Happy coding!

-bill