Redefining Web Performance

A presentation at DeltaV Conference in May 2018 in London, UK by Tim Kadlec

Slide 1

Slide 1

web performance redefining Tim Kadlec #deltavconf @tkadlec

Slide 2

Slide 2

Slide 3

Slide 3

teensy measly

Slide 4

Slide 4

Unfortunately Harry, I speak in the morning so I can only have one small cocktail.

Slide 5

Slide 5

Unfortunately Harry, I speak in the morning so I can only have one teensy cocktail.

Slide 6

Slide 6

Unfortunately Harry, I speak in the morning so I can only have one measly cocktail.

Slide 7

Slide 7

teensy

  1. informal tiny

Slide 8

Slide 8

measly 3. contemptibly small

Slide 9

Slide 9

Slide 10

Slide 10

bootylicious

  1. See: Lawson, Bruce

Slide 11

Slide 11

literally used in an exaggerated way to emphasize a statement or description that is not literally true or possible

Slide 12

Slide 12

web performance

Slide 13

Slide 13

web performance back-end

Slide 14

Slide 14

web performance back-end > front-end

Slide 15

Slide 15

web performance back-end > front-end > user-centered

Slide 16

Slide 16

performance is a problem

Slide 17

Slide 17

network constrained

Slide 18

Slide 18

71% 2G or 3G

Slide 19

Slide 19

1560kb median 575 4kb 90th percentile

Slide 20

Slide 20

device constrained

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

352kb median 101 3kb 90th percentile

Slide 24

Slide 24

~2400kb median 6915 kb 90th percentile

Slide 25

Slide 25

Slide 26

Slide 26

1244ms median 5268 ms 90th percentile

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

performance is a problem business ^

Slide 31

Slide 31

performance is a problem business ^

Slide 32

Slide 32

performance is a problem content strategy ^

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

performance is a problem security ^

Slide 36

Slide 36

Slide 37

Slide 37

let

myData

= [ 1 ,

2 ,

3 ,

4 ];

let

item

=

1000 ;

if

(item

<

myData.size) {

myData[input];

} }

Slide 38

Slide 38

let

myData

= [ 1 ,

2 ,

3 ,

4 ];

let myData = [ 1 , 2 , 3 , 4 ]; let item = 1000 ; if (item < myData.size) { myData[input]; }

Slide 39

Slide 39

let

item

=

1000 ;

let myData = [ 1 , 2 , 3 , 4 ]; let item = 1000 ; if (item < myData.size) { myData[input]; }

Slide 40

Slide 40

if

(item

<

myData.size) {

let myData = [ 1 , 2 , 3 , 4 ]; let item = 1000 ; if (item < myData.size) { myData[input]; }

Slide 41

Slide 41

myData[input];

let myData = [ 1 , 2 , 3 , 4 ]; let item = 1000 ; if (item < myData.size) { myData[input]; }

Slide 42

Slide 42

let

myData

= [ 1 ,

2 ,

3 ,

4 ];

let

item

=

1000 ;

if

(item

<

myData.size) {

myData[input];

}

Slide 43

Slide 43

performance is a problem an accessibility ^

Slide 44

Slide 44

Slide 45

Slide 45

…make the difference between minimizing my computer use and being able to use the web freely.

Slide 46

Slide 46

Slide 47

Slide 47

performance = time

Slide 48

Slide 48

performance = time level of effort

Slide 49

Slide 49

performance = time level of effort human memory limits

Slide 50

Slide 50

performance = time level of effort human memory limits task completion

Slide 51

Slide 51

performance is a problem user experience ^

Slide 52

Slide 52

Slide 53

Slide 53

web performance how efficiently can users accomplish their goals

Slide 54

Slide 54

performance is a business content strategy

accessibility security user experience problem

Slide 55

Slide 55

performance is a problem but it ’ s fixable!

Slide 56

Slide 56

thank you! Tim Kadlec #deltavconf @tkadlec