slanted W3C logo
Cover page images (keys)

What's Happening in the Web Performance Working Group of the W3C

April 18, 2013 Computer Measurement Group

Philippe Le Hégaret,, @plhw3org

Interaction Domain Lead, W3C

Who am I?

The World Wide Web Consortium (W3C)

Working Group meeting

How does W3C work?


Web is Central

HTML5: Cornerstone of the Platform

  • Reach multiple devices
    Desktop, mobile, tablet, TV, Automobile?
  • Powerful and modular
    Documents, multimedia, interactivity
  • Multi-application
    eBooks, user interfaces, games
  • Standard scheduled for 2014
HTML5 Logo

Standard Technologies

Core Hypertext Markup Language (HTML)
Video/Audio HTML, WebRTC, Web Audio
Style Cascading Style Sheets (CSS)
Fonts Web Open Font Format (WOFF)
Protocols HTTP, Web Sockets
Graphics Scalable Vector Graphics (SVG), HTML Canvas
Offline access Web APIs: Web Storage, IndexedDB, File API
Device access Web APIs: Geolocation, Multi-touch, Media Capture, etc.
Performance Web APIs: Navigation timing, Page Visibility, Animation timing

Web Client 2012

Web Client


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."
Arvind Jain, Google
Jason Weber, Microsoft

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

Web Performance

We do things like:

… and we implement them!

Our documents

Last Update Title Status Comments
2012-12-17 Navigation Timing Recommendation
2012-12-17 High Resolution Time Recommendation
2012-07-26 User Timing Candidate Recommendation Waiting on tests and impls
2012-07-26 Performance Timeline Candidate Recommendation Waiting on tests and impls
2013-02-19 Page Visibility Proposed Recommendation Waiting on me :)
2012-05-22 Resource Timing Candidate Recommendation Waiting on tests and impls
2012-02-21 Timing control for script-based animations Last Call
Review ended: 2012-03-20
2013-01-31 Navigation Timing 2 First Public Working Draft In progress

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
    return (a=a&&a.timing)

Navigating Timing

High Resolution Time

Navigating Timing 2

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: "
            + - resourceList[i].fetchStart);
video.addEventListener("play", onPlay, false);

Resource Timing

Resource Timing

User Timing

High precision timestamps for web applications

doTask1(); // Some developer code

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

Perf-enhancing specifications

Page Visibility

Determine the current visibility of a page

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

function onvisibilitychange() {
  if (document.hidden)

Page Visibility


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);
function start() {


User Agent timing control for script-based animations

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

? setTimeOut / ? requestAnimationFrame

What's next?

Resource Priorities

Resource Priorities


Error Logging

Thank you

These slides at: