Web Performance Management Tool

Using visual analysis to help web developers


In conjunction with the performance formula that I generated for improving performance in an IBM product, there was a need for each web application team to assess their current performance and predict how much improvement they could get from compressing and consolidating static files.

This was a task for a tool that would let them play with values and visually analyze the how those changes would effect their application.


To produce this visual analysis tool I build a spreadsheet in Microsoft Excel which allowed each team to modify the number of static files they planned on using, and see how much that would contribute to performance improvement.

For some teams this showed them that simple changes would suffice, for other teams it highlighted the fact that their application was doing far too much computation on the client side, and that they needed to make greater changes in their application to meet the target.

Daylight Time Visualization

What kind of real difference does changing daylight time make?

The Effect of Daylight Time
Boston, MA, USA
Waking DarknessTotal Savings
Sleeping Light
You'll need to use Firefox 1.5+ to see this...
Daylight Time Starts:
Daylight Time Ends:
Activate Daylight Time


Mostly out of spite for the Bush administration's move to change the time of year that daylight time in the US starts and ends, I wanted to get a better sense for what effect the change has on day to day life.

What it called for was a tool to show the daylight curves for a certain place throughout the year. The curves should be interactive so that you can change when DST starts and ends, then see how much benefit it had.

The benefit was measured in the amount of "Sleeping Light" that is saved. That is to say that the biggest impact we can have on energy is to limit the amount of time that we sleep while it is light out. You'll see from the way that the daylight curves change during DST, that the focus is to "push" daylight into the waking hours.


Partially as an experiment in using the first release of the HTML <canvas> tag, the tool is written in DHTML and Javascript using the <canvas> tag for all of the drawing.

To use the application, click on the "Activate Daylight Time" checkbox. This will change the curves to account for the one hour shift in time due to DST.

The vertical bars that indicate the start and end of DST have square handles which allow you to modify time of year that DST starts and ends.

Move the bars and see the amount of sleeping light that is saved as the start and end times change.