YSlow is an awesome tool. One thing I would recommend as a feature request would be to have a more verbose reporting component. Incidentally, there is a tool that was released not too long ago by a developer on the Exceptional Performance mailing list. It is called PageTest. Furthermore, PageTest uses the YSlow criteria for Exceptional Performance. In addition, PageTest allows you to export the report into an Excel spreadsheet.

The only real drawback to using PageTest is its speed (contradiction? I think so, heh). It is a definite work in progress, but it has the baseline functionality that you need as a web developer to deconstruct your web application’s performance levels. There is always room for improvement, such as, sexifying the UI. An awesome feature would be to have the ability to save a performance testing report, like day X, and then 10 days later after re-factoring your code, you can run a performance test again and then do a comparison between the two reports. The delta would show exactly how much your application benefited, whether it be size (KBs), or load times (ms).

On the whole, web developers should be pushing the limits of their applications in terms of performance. The average user will not use a dog-slow application. Concordantly, web developers should always be thinking about how to balance out the three elements that make a rich internet application–Performance, functionality, and user experience. With PageTest, a web developer will have a much easier time in making decisions to balance out performance, functionality, and user experience because PageTest clearly points out the application’s performance pitfalls.

If you’re using YUI, Prototype, or MooTools and you’re building an application that involves draggable components containing iframes, images, and/or forms, here’s a quick tip to maximize performance during the onDrag event.

Here is a code snippet of basic markup that’ll represent our draggable component.

<div class="moduleContainer">
	<div class="moduleHead">Draggable Title</div>
	<div class="moduleBody">Draggable Content</div>
</div>

Inside your moduleBody, you could have a plethora of component types, but let’s primarily focus on more complex and performance-taxing ones: forms, iframes, images, and embeds.

Within your startDrag event, you can define the following:

var $$ = YAHOO.util.Selector.query;
var elGroup = $$('div.moduleContainer form, div.moduleContainer iframe, div.moduleContainer img, div.moduleContainer embed');

for(var i = 0, len = elGroup.length; i < len; i++) {
    elGroup[i].style.visibility = "hidden";
    //You would need to set it back to visible on your endDrag event.
}

The reason why we set the element’s visiblity property to hidden is because an element will not receive events if it is hidden. During your onDrag(e) event, you’ll notice that every time the element reaches a pixel threshold (usually every 3 pixels), it will invoke the onDrag event. This can get quite taxing while you’re dragging the component around on the viewport. Users will definitely notice the lag.

The reason I only apply this selector to the 4 tags is because of their inherent complex functionality. Iframes have the ability to include content from a source, where as, spans or paragraphs are simply text. When the onDrag event is invoked, I ran into several problems where every time the component would meet a pixel threshold, the iframe would reload its src attribute. Spans, headers, and paragraphs won’t tax your application’s performance during a drag interaction.

If you’re just as addicted to RockBand as I am, you’ve probably YouTube’d videos of people drumming. I’ve found a few that were produced by the same guy, but this guy’s insane at the drums.

AzuriteReaction doing Metallica -…And Justice For All

AzuriteReaction doing Metallica - Ride The Lightning

AzuriteReaction doing Yeah Yeah Yeahs - Maps

The info panel on all his videos say he’s one of the top on the leaderboards on XBox Live–I don’t disagree with that, he’s got insane skills.

Go out and buy it. It is so awesome.

I feel refreshed.