Web Performance update
HTML5 Boston
November 25, 2013
Philippe Le Hégaret
W3C Interaction Domain Lead
plh@w3.org
@plhw3org
Impact of Slow Website
Time is Money!
80-90% of the end-user response time is spent on the frontend. Start here.
Bing experiment
| Distinct User Queries | Query refinement | Revenue per User | Any clicks | Satisfaction | Time to Click Increase | |
|---|---|---|---|---|---|---|
| 50ms | - | - | - | - | - | - |
| 200ms | - | - | - | -0.3% | -0.4% | 500ms |
| 500ms | - | -0.6% | -1.2% | -1.0% | -0.9% | 1200ms |
| 1000ms | -0.7% | -0.9% | -1.9% | -2.8% | -1.6% | 1900ms |
| 2000ms | -1.8% | -2.1% | -4.3% | -4.4% | -3.8% | 3100ms |
Useability
| Delay | User Reaction |
|---|---|
| 0-100ms | Instant |
| 100-300ms | Feels sluggish |
| 30-1000ms | Machine is working… |
| 1s+ | Mental switch |
| 10s+ | I'll come back later |
HTTP archive trends
Past 12 months
Challenges
Two main categories:
- Load time
- From the user request to "above the fold"
- User agent speed
- Interaction and dynamic changes
Load time
Global Site Speed Overview: How Fast Are Websites Around The World?
Travel sites
50 performance tricks to make your HTML5 apps and sites faster
Bottlenecks
- Network layer
- Crowded main thread
- Memory:
- DOM
- Events
- Drawing: CSS
- Low-end phones (Android)
- Tooling support
Network layer
| 3G (200 RTT) |
4G (80 RTT) |
|
|---|---|---|
| Control plane | (200-2500) | (50-100) |
| DNS lookup | 200 | 80 |
| TCP Connection | 200 | 80 |
| TLS handshake | (200-400) | (80-160) |
| HTTP Request | 200 | 80 |
User agent speed
What should it do every 16.7ms (60fps)?
- DOM CRUD
- Style Calculation
- Layout
- Compositiing
- Painting
- Network requests
- Image decode
- Data parsing
DOM CRUD
function redisplay(images) {
var i;
var container = document.getElementById("container");
container.textContent = ""; // remove all children
for (i = 0;i < images.length; i++) {
var imgEl = document.createElement("img");
imgEl.src = images[i];
container.appendChild(imgElt);
}
}
Layout
function resize(incrementSize) {
var i;
var container = document.getElementById("container");
for (i = 0;i < container.childNodes.length; i++) {
var elt = container.childNodes.item(i);
var new_width =
elt.getBoundingClientRect().width
+ incrementSize;
elt.style.width = new_width + "px";
}
}
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!
Our documents
| Last Update | Title | Status | Comments |
|---|---|---|---|
| 2012-12-17 | Navigation Timing | Recommendation | |
| 2012-12-17 | High Resolution Time | Recommendation | |
| 2013-10-29 | Page Visibility | Recommendation | |
| 2013-10-31 | User Timing | Proposed Recommendation | |
| 2013-10-31 | Performance Timeline | Proposed Recommendation | |
| 2012-05-22 | Resource Timing | Candidate Recommendation | Need tests and impls |
| 2013-10-31 | Timing control for script-based animations | Candidate Recommendation | Need tests |
| 2013-10-29 | Resource Priorities | First Public Working Draft | In progress |
Timing specifications
Navigating Timing
client-side latency measurements within applications
function onLoad() {
var now = new Date().getTime();
var loadTime =
now-performance.timing.navigationStart;
alert("User-perceived page loading time: "
+ page_load_time);
}
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
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();
}
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);
}
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, dns-prefetch
<link rel="prerender" href="http://example.com/"/> <link rel="dns-prefetch" href="//example.com"/>
- Preemptively fetch and load the specified resource
See also preconnect, preload, prerender proposal
Resource Priorities
lazyload
hints on the download priority of resources in case of network resource contention or visibility
<img src='foo.png' lazyload>
<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
???