The Long-Tail of Performance

A presentation at WebExpo in September 2018 in Prague, Czechia by Tim Kadlec

Slide 1

Slide 1

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

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

ANTICIPATE FAILURE

Slide 11

Slide 11

Slide 12

Slide 12

BETTER EQUIPPED THAN EVER

Slide 13

Slide 13

3.2MB 1.5MB average site median site

Slide 14

Slide 14

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

Slide 15

Slide 15

Slide 16

Slide 16

THE LONG-TAIL IS WHERE THE REAL WORLD HAPPENS

Slide 17

Slide 17

Slide 18

Slide 18

1366px twice as slow as 1920px

Slide 19

Slide 19

cpu bound

Slide 20

Slide 20

Slide 21

Slide 21

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

Slide 22

Slide 22

cpu bound

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

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

Slide 28

Slide 28

font-display: fallback;

Slide 29

Slide 29

https://bit.ly/2uiojSd

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

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

Slide 34

Slide 34

https://bit.ly/2xxyqlj

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

DATA USED IS A USER-CENTRIC METRIC

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

11% yell 23% swear

Slide 47

Slide 47

4% throw their phones

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

concentrate 50% more

Slide 51

Slide 51

Slide 52

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 53

Slide 54

Slide 54

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

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Save-Data: On

Slide 61

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 62

Slide 63

Slide 63

Slide 64

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

Slide 65

Slide 65

Slide 66

Slide 66

Memory cache

Slide 67

Slide 67

Net stack Memory cache Disk cache

Slide 68

Slide 68

Net stack Memory cache Disk cache

Slide 69

Slide 69

Service Worker Memory cache Net stack Disk cache

Slide 70

Slide 70

BETTER EQUIPPED THAN EVER

Slide 71

Slide 71

BUILD IN LAYERS

Slide 72

Slide 72

THE CHOICE IS OURS

Slide 73

Slide 73

THANK YOU! Tim Kadlec #webexpo @tkadlec