Who am I?

• Philippe Le Hégaret, <plh@w3.org>, @plhw3org
• Responsible for the Interaction Domain at W3C
• Interaction Domain contains items like HTML, CSS, SVG, WOFF, Video, various Web APIs, etc.
• Based at MIT in Cambridge, MA

The World Wide Web Consortium (W3C)

• Lead Web to its Full Potential
• 385 Members
• Web ecosystem: users, developers, browsers, etc.

How does W3C work?

• Focus is to create standards that lead to public and commercial benefits
• W3C accepts inputs from all and provides outputs to all
• Each participation brings their expertise, perspective
• 65 Groups. Each has engineers from member companies and W3C staff support
• Liaisons with many organizations: IDPF, IETF, OMA, DLNA, ISO JTC1, ITU-T, Open IPTV Forum, SMPTE, EBU, more.

Agenda

• World Wide Web Consortium
• Open Web Platform
• Web Performance

Web is Central

• Usage
  • Accessed by billions
  • In many languages
  • Vital for information sharing, entertainment, education, commerce
• Technology
  • Common, pervasive, and interoperable
  • Internationalized
  • Widely used by developers
  • Linked sites and linked data

HTML5: Cornerstone of the Platform

Standard Technologies

Web Client 2012

Agenda

• World Wide Web Consortium
• Open Web Platform
• Web Performance

Web Performance Working Group

"The mission of the Web Performance Working Group is to provide methods to enhance aspects of application performance of user agent features and APIs."

Chairs:

Arvind Jain, Google

Jason Weber, Microsoft

25 organizations: Microsoft, Google, Mozilla, eBay, dynaTrace, Intel, Akamai, etc.

Web Performance

We do things like:

• Navigation and Resource Timing: .redirectStart, .domainLookupStart, etc.
• Page Visibility: document.hidden
• .requestAnimationFrame
• .now() (now in sub-milliseconds!)

… and we implement them!

Our documents

Timing specifications

Navigating Timing

client-side latency measurements within applications

function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  alert("User-perceived page loading time: " + page_load_time);
}

Navigating Timing

  sd=function() {
    var a=window.performance
          ||window.webkitPerformance;
    return (a=a&&a.timing)
            &&a.loadEventStart-a.fetchStart
  }

Navigating Timing

High Resolution Time

• One function:

  window.performance.now()

• Accurate to a thousandth of a millisecond
  (subject to hardware or software constraints)
• Monotonic clock: not subject to system clock adjustments or skew
• HRT 2 will introduce support for Web Workers

Navigating Timing 2

• support for unified interface to store and retrieve performance metric data
• support for sub-millisecond resolution
• Add timing information for link negotiation
  (network interface on/off timing)

Resource Timing

client-side latency measurements within applications

function onPlay() {
  var resourceList = window.performance.getEntriesByType("resource");
  // for all resources in ResourceList
    if (resource.initiatorType == "video") {
      alert("autoplay loading time: "
            + performance.now() - resourceList[i].fetchStart);
    }
}
video.addEventListener("play", onPlay, false);

Resource Timing

Resource Timing

• Support for img, video, iframe, css, XHR, etc.
• default to 150 resources in the buffer (see also setResourceTimingBufferSize)
• Support for cross-origin resources: Timing-Allow-Origin

User Timing

High precision timestamps for web applications

performance.mark("mark_fully_loaded");
doTask1(); // Some developer code
performance.mark("mark_above_the_fold");

var perfEntries = performance.getEntriesByType("mark");
// for all perfEntries, do something

Perf-enhancing specifications

Page Visibility

Determine the current visibility of a page

document.hidden
document.addEventListener('visibilitychange', ...);

function onvisibilitychange() {
  if (document.hidden)
   video.pause();
  else 
   video.play();
}

Page Visibility

requestAnimationFrame

Script-based animations where the user agent is in control of limiting the update rate of the animation

function animate(time) {
  if (!document.hidden) {
    // if visible, draw
    canvas.drawImage(myVideoElement, 0, 0);
  }
  window.requestAnimationFrame(animate);
}
function start() {
  window.requestAnimationFrame(animate);
}

requestAnimationFrame

function animate() {
  $("#raf_count").innerHTML = ++raf_count;
  window.requestAnimationFrame(animate);  
}
// RAF
window.requestAnimationFrame(animate);  
// setTimeout
window.setTimeout(animate2, 0);

What's next?

• Resource Timing 2
• Pre-render
• Display performance
• Async scroll
• HTTP Archive (HAR) format
• Resource Priorities
• Beacon
• Diagnostics

Resource Priorities

• hints on the download priority of resources
• new HTML attribute, e.g. "defer"?

Resource Priorities

• hints on the download priority of resources
• new HTML and JS attribute, e.g. "defer"?

Beacon

• Use case: Analytics will typically attempt to send data to a web server prior to the unloading of the document
• XHR doesn't work for this: user agents ignore async XHR made at unload
• asynchronously transfer data from the user agent to a web server
• user agent taking the responsibility to eventually send the data

Error Logging

• Use Case: site may not know that end users are hitting a problem
• store and retrieve error data related to the previous and current navigations
• targeted for HTTP response code

Thank you

These slides at:
http://www.w3.org/2013/Talks/0418-webperf/