The Long-Tail of Performance

THE LONG-TAIL OF PERFORMANCE Tim Kadlec #webexpo @tkadlec

ANTICIPATE FAILURE

BETTER EQUIPPED THAN EVER

3.2MB 1.5MB average site median site

3.2MB average site 1.5MB median site 5.7mb 90% percentile

THE LONG-TAIL IS WHERE THE REAL WORLD HAPPENS

1366px twice as slow as 1920px

cpu bound

“Your website’s only as strong as the weakest device you’ve tested it on.” Ethan Marcotte

cpu bound

Zilla Slab Zilla Slab Bold Zilla Slab Italic Open Sans Open Sans Italic Open Sans Semibold

font-display: fallback;

https://bit.ly/2uiojSd

Zilla Slab Zilla Slab Bold Zilla Slab Italic Open Sans Open Sans Italic Open Sans Semibold

https://bit.ly/2xxyqlj

Zilla Slab Zilla Slab Bold Zilla Slab Italic Open Sans Open Sans Italic Open Sans Semibold

1s 150kb 12% t h g i e less w t u o y a l less faster TTIE

DATA USED IS A USER-CENTRIC METRIC

11% yell 23% swear

4% throw their phones

concentrate 50% more

Core content Essential HTML and CSS, usable non-JS experience Enhancements JavaScript, enhanced CSS, fonts, images, widgets Leftovers Analytics, advertising, third-party content

https://twitter.com/philhawksworth/status/990890920672456707

Save-Data: On

let saveData = false; if (request.headers['save-data'] == 'on') { saveData = true; } // OR if ("connection" in navigator) { if (navigator.connection.saveData === true) { } }

this.addEventListener('fetch', event => { if(navigator.connection.saveData === true){ if (/.jpg$|.gif$|.png$/.test(event.request.url)) { //return a highly compressed or smaller image event.respondWith( fetch(saveDataUrl, { mode: 'no-cors' }) ); } if (event.request.url.includes('fonts.googleapis.com')) { // return nothing and use fallback fonts instead event.respondWith( new Response('', { status: 408, statusText: 'Ignore fonts to save data.' }) ); } } }); https://bit.ly/2I3cJxs

Memory cache

Net stack Memory cache Disk cache

Service Worker Memory cache Net stack Disk cache

BETTER EQUIPPED THAN EVER

BUILD IN LAYERS

THE CHOICE IS OURS

THANK YOU! Tim Kadlec #webexpo @tkadlec