slanted W3C logo
Cover page images (keys)

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

May 16, 2013 WWW2013

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?

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-05-14 Page Visibility Recommendation
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)


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


Diagnostics: Error Logging

Diagnostics: Other ideas

Thank you

Performance standards:

These slides at: