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.
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?
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
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.
- 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
- 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 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.
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