The Long-Tail of Performance

Slide 1

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

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

ANTICIPATE FAILURE

Slide 11

Slide 12

BETTER EQUIPPED THAN EVER

Slide 13

3.2MB 1.5MB average site median site

Slide 14

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

Slide 15

Slide 16

THE LONG-TAIL IS WHERE THE REAL WORLD HAPPENS

Slide 17

Slide 18

1366px twice as slow as 1920px

Slide 19

cpu bound

Slide 20

Slide 21

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

Slide 22

cpu bound

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

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

Slide 28

font-display: fallback;

Slide 29

https://bit.ly/2uiojSd

Slide 30

Slide 31

Slide 32

Slide 33

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

Slide 34

https://bit.ly/2xxyqlj

Slide 35

Slide 36

Slide 37

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

Slide 38

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

Slide 39

DATA USED IS A USER-CENTRIC METRIC

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

11% yell 23% swear

Slide 47

4% throw their phones

Slide 48

Slide 49

Slide 50

concentrate 50% more

Slide 51

Slide 52

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

Slide 53

Slide 54

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

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Save-Data: On

Slide 61

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

Slide 62

Slide 63

Slide 64

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