В погоне за производительностью

A presentation at Frontend Dev Conf in April 2016 in by Denys Mishunov

Slide 1

Slide 1

В ПОГОНЕ за ПРОИЗВОДИТЕЛЬНОСТЬЮ DENYS MISHUNOV • Digital garden AS

Slide 2

Slide 2

Конверсия 1 СЕКУНДа УВЕЛИЧЕНИЯ ПРОИЗВОДИТЕЛЬНОСТИ http://goo.gl/E030E 2

  • %

Slide 3

Slide 3

Конверсия 1 СЕКУНДа УВЕЛИЧЕНИЯ ПРОИЗВОДИТЕЛЬНОСТИ http://goo.gl/E030E $482.2 миллиарда

Slide 4

Slide 4

Конверсия 2,2 СЕКУНДЫ УВЕЛИЧЕНИЯ ПРОИЗВОДИТЕЛЬНОСТИ https://goo.gl/0fx4ma 15,4 + %

Slide 5

Slide 5

Конверсия 2,2 СЕКУНДЫ УВЕЛИЧЕНИЯ ПРОИЗВОДИТЕЛЬНОСТИ https://goo.gl/0fx4ma 10,28 миллионов/ год

Slide 6

Slide 6

Конверсия 1 СЕКУНДа снижения ПРОИЗВОДИТЕЛЬНОСТИ http://goo.gl/JE1gD5

4,6 %

Slide 7

Slide 7

Конверсия 2 СЕКУНДы снижения ПРОИЗВОДИТЕЛЬНОСТИ http://goo.gl/JE1gD5

5 %

Slide 8

Slide 8

Конверсия 3 СЕКУНДы снижения ПРОИЗВОДИТЕЛЬНОСТИ http://goo.gl/JE1gD5

7,9 %

Slide 9

Slide 9

Slide 10

Slide 10

$107,1 миллиарда

Slide 11

Slide 11

Slide 12

Slide 12

= = !

Slide 13

Slide 13

ПРОИЗВОДИТЕЛЬНОСТЬ это не МАТЕМАТИКА

Slide 14

Slide 14

ПРОИЗВОДИТЕЛЬНОСТЬ это ВОСПРИЯТИЕ

Slide 15

Slide 15

“ The perception of performance is just as effective as actual performance in many cases ”

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

“ Мы не воспринимаем то, что вокруг нас. Мы воспринимаем только то что говорит нам наш мозг⋯ Наше сознание отстает от самих событий примерно на 80 миллисекунд и когда вам кажется что событие только происходит, оно уже свершилось. David Eagleman ”

Slide 20

Slide 20

JND (just noticeable difference)

Slide 21

Slide 21

ПРАВИЛО 20% СОБЫТИЕ

Slide 22

Slide 22

ПРАВИЛО 20% СОБЫТИЕ 20%

Slide 23

Slide 23

5-10 секунд

Slide 24

Slide 24

1 ACTIVE PASSIVE

Slide 25

Slide 25

2 ACTIVE PASSIVE

Slide 26

Slide 26

Slide 27

Slide 27

предварительный старт ПРОЦЕСС СОБЫТИЕ EVENT СОБЫТИЕ ФАЗА АКТИВНАЯ

Slide 28

Slide 28

ЗАГРУЗКА TOP HITS Settings / Safari / Preload Top Hits

Slide 29

Slide 29

ОТКРЫТИЕ В НОВОЙ ВКЛАДКЕ

Slide 30

Slide 30

ОТКРЫТИЕ В НОВОЙ ВКЛАДКЕ

Slide 31

Slide 31

rel=“dns-prefetch” rel=“preconnect” rel=“prefetch” rel=“prerender” https://www.w3.org/TR/2016/WD-resource-hints-20160225/

Slide 32

Slide 32

РАННЕЕ ЗАВЕРШЕНИЕ ПРОЦЕСС СОБЫТИЕ EVENT СОБЫТИЕ ФАЗА АКТИВНАЯ

Slide 33

Slide 33

PASSIVE PHASE

Slide 34

Slide 34

ACTIVE PHASE

Slide 35

Slide 35

Slide 36

Slide 36

АКТИВНАЯ ФАЗА ПАССИВНАЯ ФАЗА

Slide 37

Slide 37

1 Occupied time feels shorter than unoccupied time. ! Баланс между Активной и Пассивной фазами.

Slide 38

Slide 38

2 People want to get started ! Предварительный старт.

Slide 39

Slide 39

3 Anxiety makes waits seem longer. ! Субъективный параметр. Сложно контролировать в веб.

Slide 40

Slide 40

4 ! Uncertain waits are longer than known, finite waits. Прогресс-индикаторы.

Slide 41

Slide 41

5 Unexplained waits are longer than explained waits. ! Прогресс-индикаторы.

Slide 42

Slide 42

6 Unfair waits are longer than equitable waits. ! Соответствуйте ожиданиям пользователя.

Slide 43

Slide 43

7 The more valuable the service, the longer the customer will wait. ! Бизнес-задача.

Slide 44

Slide 44

8 ! Solo waits feel longer than group waits. не поддается контролю в веб.

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

Полегче, ПАРНИША

Slide 54

Slide 54

“ Быстрее может быть лучше, но только если скорость это именно то чего хочет пользователь. Не каждый пользователь желает закончить контакт с вашей компанией со скоростью света. William J. McEwen ”

Slide 55

Slide 55

6 Unfair waits are longer than equitable waits. 7 The more valuable the service, the longer the customer will wait.

Slide 56

Slide 56

Соответствуйте ожиданиям ПОЛЬЗОВАТЕЛЯ

Slide 57

Slide 57

Slide 58

Slide 58

G N I K C O H S : Y R E V O C S I D ! O B E S S E R G O R P a z . o c . b fn a s i R A B C A L P THIS BANK HAS A FAKE PROG THIS IS SOME NEXT-LEVEL BULLSHIT RESS TOTA LLY BAR!

Slide 59

Slide 59

Slide 60

Slide 60

https://goo.gl/DMLdz1