I’ll try to summarize all the links and information shared in the conference last night.
1. Web Standards to Measure Real-world Performance [slides]
- by Tony Gentilcore (Google) & Anderson Quach (Microsoft)
They explained a bit about the Web Performance Working Group and jumped straight into the implementation of it in Chrome and IE9.
The three key things that will be available as per the spec are:
- HTML document : Navigation Timing
- HTML resources: Resource timing. e.g Images, audio, video, etc.
- Interactive scenarios: clicking on links
Navigation timing[spec]:
The events that will be available as part of this spec are summarized in this image below:

Navigation timing overview
Demo
Security, performance constraints, determining apps in the background and change polling behavior are some other things they spoke about.
2. Above the Fold Time: Measuring Web Page Performance Visually[slides]
- by Jake Brutlag (Google)
This is a completely new area in performance for me and something very interesting. As Jake defines in his slide, ATF(Above the Fold Time) is “Time when content that stops changing and is above-the-fold reaches its final state.”
AFT brings a new set of metrics to look at and can take web page optimization to a whole new level. Imagine a site optimized for better AFT v/s a site optimized for better Page load time.
I wont go into the details of how the AFT is calculated, why 5 sec is taken as a cutoff time, etc. All those details and more are mentioned in his slides.
What I am excited about is that this feature is already available in WPT(http://www.webpagetest.org/). Go to the video tab and enable AFT.

Once the test is complete(it will take a min of 4 mins, so be patient), the AFT stats and images are available in the summary view. I ran a test on Y! search & here are the results. Go to the screen shot link on the top nav and see the AFT details image.
All of the AFT technology and implementation are part of webpagetest and is available to download at http://code.google.com/p/webpagetest/.
3. Introducing Next-gen YSlow [slides]
- by Betty Tso (Yahoo!) & Marcel Duran (Yahoo!)
Note: YSlow for Chrome is now available for download.
Marcel spent a few minutes on how the current YSlow is designed, and the MVC pieces of it. He also mentioned the limitations of the Chrome plugin sandbox architecture and how YSlow for chrome uses cross domain ajax.
The BIG announcement for the day was YSlow for all browsers(IE, Opera, Safari, etc.), including mobile and tablet browsers. It’s not an Add-in, it’s a Javascript bookmarklet.
This version of YSlow is powered by HTML, CSS & YUI for building the view. JS, HTTP headers and YQL is used for the controller. The bookmarklet opens an iframe and injects the HTML contents of the Doc into it. YQL is used to process component headers & generate results.
Note: This version of YSlow will be available in early April. (The attendees of the conf. had a sneak peek at this). As per Marcel, it works & works just like YSlow for Chrome.
- The data generated by YSlow will be available in a YQL open table
- A new Mobile friendly interface will be launched - powered by YUI
- Jdrop integration (more about that later)
- Will be Open sourced soon – on Git
- Multi lingual support
If you have any question, ask them here at the exceptional-performance group.
In my opinion, stick to the Firefox version of YSlow, it gives the most accurate & correct value compared to other options.
4. Visibility into Mobile Performance [slides]
- by Steve Souders (Google)
Steve’s talk was more interesting as it contained demos, demos and demos.
1. Blaze.io (http://www.blaze.io/mobile/)
Blaze.io is for mobile browsers what webpagetest.org is for desktop browsers. Blaze.io has taken the webpagetest source code and modified it to run with iOS and Android browsers.
It let’s you view the HAR file of the transaction. Here’s a sample of Blaze.io run on Yahoo! mobile
Other than that, it even records a video of how the page renders & loads in the selected mobile browser. Now that is awesome.
Problems with this approach: It considers data: URIs as separate HTTP requests (as shown by Steve in his Demo)
II. pcapperf (http://pcapperf.appspot.com/)
Let’s you convert .pcap files to HAR files. He explained how we can get the waterfall chart for a mobile browser.
a. Set-up internet sharing on your mac (Ethernet to Wifi)
b. connect your mobile device to the computers Wifi hotspot
c. start network sniffing tool (wireshark or tcpdump) and capture traffic sent to the wireless interface.
d. save .pcap file and upload to URL mentioned above. That will give you a HAR file.
This procedure is explained in detail over here.
Limitations of this approach: This method wont consider the actual bandwidth of the mobile user, e.g 3G or edge(Since we are running a test using ethernet -> Wifi).
Also, it wont take into account changes done by providers to images and other elements of a page.
III. Jdrop (http://jdrop.org/)
Jdrop allows users to store JSON on the cloud. It was mainly built to store performance data gathered from mobile devices.
You need to sign in to Jdrop, get the bookmarket and visit any mobile page and run ‘DOM monster’(other applications will support Jdrop soon), DOM Monster will then let you export the data it generates to Jdrop, which can be viewed on a desktop. Steve has made some data public on Jdrop for others to view it. The data is organized with information like Browser type, Application that exported data & website. Jdrop also let’s you view and export the HAR file.
Get the mobile bookmarklet demoed by Steve from here.
Overall this was a great improvement compared to last years Velocity Online Conference. Kudos to the organizers for keeping it short and interesting.