Delay | User Reaction |
---|---|
0-100ms | Instant |
100-300ms | Feels sluggish |
300-1000ms | Machine is working… |
1s+ | Mental switch |
10s+ | I'll come back later |
50 performance tricks to make your HTML5 apps and sites faster
Two main categories:
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 |
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); }
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);
setResourceTimingBufferSize
)
Timing-Allow-Origin
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
navigator.serviceWorker.register(…)
hints on the download priority of resources in case of network resource contention or visibility
<img src='foo.png' lazyload>
<link rel="preconnect" href="//cdn.example.com"> <link rel="prefetch" href="thankyou.html" type="text/html"> <link rel="prerender" href="part2.html">
function updateImages() { images.forEach(function (imgLink) { imgEl = document.createElement("img"); // no img pool! imgEl.src = imgLink; container.appendChild(imgElt); }); }
container.childNodes.forEach(function (elt) { new_width = elt.getBoundingClientRect().width + incrementSize; elt.style.width = new_width + "px"; // read/write reflow! });
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); }
Determine the current visibility of a page
document.hidden document.addEventListener('visibilitychange', ...); function onvisibilitychange() { if (document.hidden) video.pause(); else video.play(); }
#container { will-change: opacity; }
function unload() { return beacon("POST", "/log", analyticsData); }