Velocity online conference March 2011

Very rough notes from the event that just ended a few minutes ago

======== 1 ========

Tony Gentilcore (google) and Anderson Quach (MSFT) talked about the W3C working group and the specs for measuring performance:

• Navigation timing spec - HTML document: DNS, handshakes, load events
• Resource timing - how long JS, CSS, audio, video... take
• User timing - interactions, such as clicking a link

Challenges: user security, privacy. Small overhead for browsers. Useful actionable data out.

Navigation timing:

• window.performance - IE9 has no vendor prefix
• otherwise window.webkitPerformance
• FF4 probably shipping it too

Properties:

window.performance.timing
  .domainLookup
  .connect
  .domContentLoaded
  .loadEvent
  ....etc

Specs: http://test.w3.org/webperf/specs/NavigationTiming/

Resource Timing spec - upcoming

foreach resource 
  redirect
  fetchStart
  fetchEnd
  ...

User Timing - upcoming

  mark('pagelet')
  mark('something-else')
  ...
  
  >>> getMarks();
  {
    'pagelet': 123456767
  }

Stretch goals:

• painting times
• CPUs
• visibility (is the page in a background tab)
• allow real yealding setTimeout(0)
• don't animate faster than the browser paints

mailto: public-web-perf@w3c.org

======== 2 ========

Above the Fold Time: Measuring Web Page Performance Visually
Speaker: Jake Brutlag
Help from: Zoe Abrams, Pat Meenan (webpagetest) Google

What the user perception of page load timing is.

AFT (Above the Fold Timing) algo
AFT: When content above the fold stops changing and reaches its final state

Integrated in WebPageTest.org

Motivation

• AFT more representative than DOMContentLoaded or onload
• onload - different in IE and FF, e.g. async scripts block onload or not

Method:

• video capture
• AFT cutoff time - upper bound, e.g. 45 sec for DSL
• split pixels into static and dymanic (ads)
• AFT = latest change of a static pixel

Magic number - 5 determined empirically
static pixels are those that change less than 5 times

Application - validate other metrics, cross-browser, visual
Limitation - lab only

{I ran webpagetest.org on facebook.com with AFT on.
The results are very close to onload, as expected.
It's a simple page. Results:
http://www.webpagetest.org/result/110315_P9_5MDJ/
}

== break ==

Note from the sponsor StrangeLoop: a downloadable "State of the Union"
A study of top 2000 Alexa retail sites. Findings:

1. 11.2 sec onload avg
2. top 100 sites slower than the lower ranked
3. those using CDNs are not faster
4. failed to implement the basics - YSlow stuff

======== 3 ========

Next-gen YSlow
Betty Tso and Marcel Duran, Yahoo!

YSlow for Chrome last week
Not as accurate as Firefox cause headers, timing come from:
1. Crawl DOM
2. x-domain requests

Announcing YSlow bookmarklet version
for mobile and all other browsers to be released early april
YSlow now on Git?

Lots coming up, e.g:

• Multi-language support
• HAR-to-YSlow
• YSlow export to JDrop

Bookmarket works like:
1. crawl DOM
2. Use YQL to get headers

     SELECT * FROM data.headers WHERE
      url IN ('http://...', 'http://...')

======== 4 ========

Visibility into Mobile Performance
Steve Souders, Google

Demo #1: http://blaze.io/mobile/
WebPageTest.org framework connected to iPhone and Android apps
Mobile waterfalls
Demo #2: pcapperf
1. setup wifi hotspot on a pc/mac
2. tcpdump to capture .pcap file
3. upload .pcap to http://pcapperf.appspot.com app
4. observe waterfall via pcap2har and harviewer
5. run pagespeed on the har
Demo #3: JDrop
http://jdrop.org
Upload JSON so you can run something on mobile and view/analyze results in desktop's large screen
Works with the bookmarklet tools part of Steve's package of mobile meta-tool

Tell your friends about this post on Facebook and Twitter