Web Performance
Working Group update
Velocity 2013 NYC
October 15, 2013
Philippe Le Hégaret
W3C Interaction Domain Lead
plh@w3.org
@plhw3org
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)
Prerender
<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>
lazyload async>
lazyload async defer> - Asynchronous: fetch other non-lazyload resources, then execute as soon as available
- async>
- Asynchronous: as soon as available
- defer>
defer lazyload> - Executed when the page has finished parsing
Beacon
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
window.performance.getEntriesByType("error");
- 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
and
async scroll
- Frame rate and throughput of the display paint
- Monitor scroll performance of the viewport
???