Web Performance
Working Group update

Velocity 2013 NYC

October 15, 2013
Philippe Le Hégaret
W3C Interaction Domain Lead

W3C Web Performance Working Group

Chairs: Arvind Jain (Google), Jason Weber (Microsoft)
"The mission of the Web Performance Working Group is to provide methods to enhance aspects of application performance of user agent features and APIs."

Web Performance

We do things like:

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

… and we implement them!

What's next?

  • Navigation Timing 2
  • Pre-render
  • Resource Priorities
  • Beacon
  • Diagnostics: Errors
  • JavaScript Preflight Injection
  • Display performance
  • Async scroll
  • HTTP Archive (HAR) format
  • Resource Timing 2
  • High Resolution Time 2

Navigation Timing 2

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


<link rel="prerender" href="..."/>
  • Preemptively fetching and load the specified resource

Resource Priorities

lazyload and postpone

hints on the download priority of resources in case of network resource contention or visibility

<img src='foo.png' lazyload>
<img src='bar.png' postpone>
video {
 resource-priorities: postpone;

When to run a script?

<script src="..."

Synchronous: fetched and executed immediately
lazyload async>
lazyload async defer>
Asynchronous: fetch other non-lazyload resources, then execute as soon as available
Asynchronous: as soon as available
defer lazyload>
Executed when the page has finished parsing


function unload() {
  return beacon("POST", "/log", analyticsData);
  • Use case: send data to a web server before unloading of the document
  • User agents ignore asynchronous XMLHttpRequests made in an unload handler.
  • Beacon: asynchronous transfer of data from the user agent to a web server, under the responsibility of the user agent

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

JavaScript Preflight Injection

  Preflight-Cookie: /monitoring.js
  • Use Case: CDN monitoring of Web applications
  • HTTP-based loading mechanism for JavaScript monitoring code

Display Paint
async scroll

  • Frame rate and throughput of the display paint
  • Monitor scroll performance of the viewport


Ideas? Feedback?