Announcing MSFast By Yadid Ramot, Performance Architect, MySpace

Tracking User Experience

An overview of MySpace’s new open-source performance tracking tool - MSFast

We wanted to share with everyone an open-source project we’ve been working on at MySpace that, while relevant for developers, has a broader application for everyone. As developers ourselves, like many of you we are constantly trying to figure out the best way to profile and track the performance of our pages. After deep market research, we realized that the market for profiling tools lack features and capabilities which we think are important for efficient page optimization. These conclusions pushed us to develop a new homebrew tool, MSFast, which will hopefully cover all of these missing pieces.
It seems to us that the average web developer gives too much attention to tracking the time it takes for his content to download, and less-to-no attention to the order of the assets and the behavior of the page as it loads.

Tracking Downloads

The first problem you can have when tracking download speed is that the data is not normalized and could be inaccurate for long term trending. There are too many possible points of failure when tracking your site periodically, such as; your ISP changes your test box’s connection speed unknowingly (repairs/mistakes etc.), added a new hardware that change the bandwidth, installed a new local firewall that slows the connection, etc. These are just examples of local changes that will cause your site to appear slower/faster, but in the real world outside of your test box, these changes won’t be reflected.
Another problem you can have when tracking downloads is, while it’s important to keep in mind the simple equation of [slow connection + heavy content = slow site], there’s nothing much you can do about it to help speed up your site. So, you compressed your content and headers to the limit, removed the cookies and picked the fastest backboned CDN for your site, but on the user’s end, the site still act slow. What’s next?

User Experience

There are a lot of factors that need to be considered when optimizing the user experience on a page, such as ordering and prioritizing downloads, using the right type of download mechanism (blocking vs. async), utilizing the sockets correctly and that’s only for optimizing the content delivery. There are a lot of other elements that could cause bad user experience that has nothing to do with the actual download speed of the page. Elements with a really heavy JavaScript functionality, flash objects with a large amount of sprites that spike the CPU, heavy ActiveX controls that use a lot of memory, weird browser rendering quirks… these and more, can really clog the client’s machine and create a bad user experience when browsing our site.

Page Performance

As far as we know, the current common methods for profiling and capturing page performance are by:

• Running an HTTP sniffer when requesting the page and measuring each request
• Timing the page’s ONLOAD event
• Injecting a code before and after JavaScript calls and timing them

For the download side, using the right HTTP tracking software that generates accurate waterfall graphs can really help developers to re-prioritize requests and optimize the way content delivers by showing the order of downloads and which request blocked the pages vs. which were download in parallel.
On the events side, the ONLOAD and other before/after benchmarks can help developers measure specific and known functionality that blocked the rendering of the page.

What’s Missing?

Using the current available tools, we can track real-time download bottlenecks, JavaScript bottlenecks (as long as we know roughly where they are) and the ONLOAD event. Here’s what we felt was still missing:

• Normalize the download speed to generate accurate results
• Automatically detect performance bottlenecks caused by an object that spikes the CPU or clogs the memory
• A good way to tell when content is displayed and how long it took to render each UI element on the page
• Detect blocking browser rendering quirks

So to sum it all up, for our purposes, the ultimate performance profiling and user experience tracking tool should have:

• Normalize download data – Throttle down the inbound connection to ensure steady speed
• An HTTP sniffer – Track download speed and blocking requests
• JavaScript profiling capabilities – Profile how long it take to execute each function and detect blocking functions
• CPU and Memory profiling capabilities – Detect how much memory and CPU the page consumes and how much each element costs us
• Screenshot capturing abilities – Capture the page as it render to see exactly what was rendered during each event
• A mechanism that tracks the time it takes to render each segment of the page

During the past ~6 months, we at MySpace have been designing and developing a tool that would do exactly that (and more ;] ) and we ended up with “MSFast” - a browser plug-in that gives developers a complete, deep look at everything we could think of, from the moment the page leaves the web-server to the moment the page is completely rendered.

MSFast

In short, the way MSFast works is by setting up a custom proxy server on the client’s machine and using that proxy to 1. Normalize the download speed by throttling inbound data 2. Injecting the page with a set of JavaScript functions that executes a series of tests and measurements.

MSFast main features are:

Measure the CPU and Memory Consumption

MSFast captures the CPU and memory state of the browser’s process from the moment the page leaves the webserver to the moment the page is completely rendered.

Screenshots of the page

MSFast automatically takes screenshots of the page while it renders. These screenshots could then be reviewed against the rest of the collected data to see the actual UI state of the page.

Review downloaded files and show download time estimation on different bandwidths

MSFast captures the page’s HTTP traffic and stores the connection times. Since we throttle the connection and always ensure a constant tracking speed, we can display download estimates for each file, under different bandwidths.

Measure and show estimates of the time it takes to render each section of the page in different connection speeds

When the page loads, MSFast breaks it apart to roughly ~60 sections with an equal amount of HTML characters in them, and measures the time it takes to render each one of these sections. A developer can then review each part of HTML and see the time it will take to render it using different connection speeds.

Review the rendered HTML

Using MSFast, a developer can skip over the rendered code and see which section of HTML was processed by the browser during the page’s lifecycle.

Validate the content of your page against a set of proven “best practice” rules of web development

MSFast has a custom list of “validators” that could run against the tested page and alert the developer if their code goes against a set of common “best practices”. These rules are fully customizable and MSFast exposes an API for writing additional business-specific custom rules.

Open Source

We are dedicated to working with the developer community and see a great opportunity in giving back to the development community by open sourcing MSFast. We hope that this project will be one of the first of many future projects that we will open source ?

For more details and download directions please follow this link – http://www.msfast.com

By Yadid Ramot, Performance Architect, MySpace