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

ANTICIPATE FAILURE

BETTER EQUIPPED THAN EVER

3.1MB 1.8MB average site median site

3.1MB average site 1.8MB median site 6.5mb 90% percentile

THE LONG-TAIL IS WHERE THE REAL WORLD HAPPENS

“SITUATIONAL DISABILITIES”

1366px twice as slow as 1920px

cpu bound

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

Verdana Bold

Zilla Slab - 67kb Zilla Slab Bold - 67kb

pyftsubset

Basic Latin U+0020-007F # Latin-1 Supplement U+00A0-00FF # Latin Extended-A U+0100-017F # Latin Extended-B U+0180-024F # General Punctuation U+2000-206F # Currency Symbols U+20A0-20CF

pyftsubset ZillaSlab-Bold.ttf —unicodes-file=latin-characters —flavor=woff2

Zilla Slab - 67kb 33kb Zilla Slab Bold - 67kb 33kb

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

DATA USED IS A USER-CENTRIC METRIC

33% e m o c n i e l b a s o disp

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

THE LESS THE CLIENT HAS TO DO, THE BETTER

Save-Data: On

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

20% s r e s u y l i a d n o i l l i m of ~6 a t a D e v a S e l b ena

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

0.26 Mbps! ) n o d n o L t s a E h t u o (S

Memory cache

Net stack Memory cache Disk cache

Service Worker Memory cache Net stack Disk cache

Service Worker Net stack

BETTER EQUIPPED THAN EVER

BUILD IN LAYERS

THE CHOICE IS OURS

THANK YOU! Tim Kadlec #codegarden19 @tkadlec