The Long-Tail of Performance

A presentation at Umbraco Codegarden in May 2019 in Odense, Denmark by Tim Kadlec

Slide 1

Slide 1

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

Slide 2

Slide 2

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

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

Slide 11

Slide 11

ANTICIPATE FAILURE

Slide 12

Slide 12

Slide 13

Slide 13

BETTER EQUIPPED THAN EVER

Slide 14

Slide 14

3.1MB 1.8MB average site median site

Slide 15

Slide 15

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

Slide 16

Slide 16

Slide 17

Slide 17

THE LONG-TAIL IS WHERE THE REAL WORLD HAPPENS

Slide 18

Slide 18

THE LONG-TAIL IS WHERE THE REAL WORLD HAPPENS

Slide 19

Slide 19

“SITUATIONAL DISABILITIES”

Slide 20

Slide 20

Slide 21

Slide 21

1366px twice as slow as 1920px

Slide 22

Slide 22

cpu bound

Slide 23

Slide 23

Slide 24

Slide 24

cpu bound

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

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

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

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

Slide 33

Slide 33

https://bit.ly/2xxyqlj

Slide 34

Slide 34

Slide 35

Slide 35

Slide 36

Slide 36

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

Slide 37

Slide 37

Verdana Bold

Slide 38

Slide 38

Zilla Slab - 67kb Zilla Slab Bold - 67kb

Slide 39

Slide 39

pyftsubset

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

DATA USED IS A USER-CENTRIC METRIC

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

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

Slide 50

Slide 50

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

11% yell 23% swear

Slide 54

Slide 54

4% throw their phones

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

concentrate 50% more

Slide 59

Slide 59

Slide 60

Slide 60

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

Slide 61

Slide 61

Slide 62

Slide 62

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

Slide 63

Slide 63

Slide 64

Slide 64

Slide 65

Slide 65

<div data-cid=”site/dynamic-image.jpg”> <noscript> <img src=”https://cdn.xx.com/image.jpg” alt=“”> </noscript> </div>

Slide 66

Slide 66

Slide 67

Slide 67

THE LESS THE CLIENT HAS TO DO, THE BETTER

Slide 68

Slide 68

Slide 69

Slide 69

Slide 70

Slide 70

Save-Data: On

Slide 71

Slide 71

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

Slide 72

Slide 72

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

Slide 73

Slide 73

Slide 74

Slide 74

Slide 75

Slide 75

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 76

Slide 76

Slide 77

Slide 77

Slide 78

Slide 78

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

Slide 79

Slide 79

Memory cache

Slide 80

Slide 80

Net stack Memory cache Disk cache

Slide 81

Slide 81

Net stack Memory cache Disk cache

Slide 82

Slide 82

Service Worker Memory cache Net stack Disk cache

Slide 83

Slide 83

Service Worker Net stack

Slide 84

Slide 84

BETTER EQUIPPED THAN EVER

Slide 85

Slide 85

BUILD IN LAYERS

Slide 86

Slide 86

BUILD IN LAYERS

Slide 87

Slide 87

THE CHOICE IS OURS

Slide 88

Slide 88

THE CHOICE IS OURS

Slide 89

Slide 89

THANK YOU! Tim Kadlec #codegarden19 @tkadlec