“Страница должна загружаться быстрее чем за 1 секунду; количество серверных запросов должно быть сведено к минимуму; CSS и JS файлы должны быть сжаты и не превышать 50 килобайт…” — это лишь малая часть технических решений и рекомендаций, которыми нас снабжает индустрия в погоне за производительностью. Но во всем этом есть одна проблема — пользователям нет никакого дела до килобайтов, миллисекунд и количества запросов. Производительность — это не математика. Производительность — это восприятие. Именно восприятие создает впечатление медлительности сайта с малым количеством серверных запросов, в то время как сайт, возвращающий результаты поиска в течение секунд, может восприниматься как достаточно быстрый для пользователя. И именно восприятие пользователя является единственным мерилом производительности вашего сайта. В докладе будут рассмотрены психологические и технические теории, приемы и примеры, позволяющие управлять восприятием пользователя.

1. В ПОГОНЕ
ЗА
ПР ИЗ
ВОДИТЕЛЬ
НОСТЬЮ
DENYS MISHUNOV • DIGITAL GARDEN AS • @MISHUNOV

2. 2001

3. 2001

4. 2003

5. 2003

6. 2016

9. 2003 2005 2007 2009 2011 2013 2015
СРЕДНИЙ РАЗМЕР
СТРАНИЦЫ
93,7 kB
http://goo.gl/qjmum

10. 2003 2005 2007 2009 2011 2013 2015
СРЕДНИЙ РАЗМЕР
СТРАНИЦЫ
93,7 kB
2466 kB
http://goo.gl/qjmum

11. http://goo.gl/E030E
2%+
КОНВЕРСИЯ
УВЕЛИЧЕНИЯ
ПРОИЗВОДИТЕЛЬНОСТИ
1 СЕКУНДа

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

13. http://goo.gl/JE1gD5
1 СЕКУНДа
КОНВЕРСИЯ
снижения
ПРОИЗВОДИТЕЛЬНОСТИ
4,6%-

14. http://goo.gl/JE1gD5
КОНВЕРСИЯ
снижения
ПРОИЗВОДИТЕЛЬНОСТИ
2 СЕКУНДы
5%-

15. http://goo.gl/JE1gD5
КОНВЕРСИЯ
снижения
ПРОИЗВОДИТЕЛЬНОСТИ
3 СЕКУНДы
7,9%-

17. http://goo.gl/JnXZ2x
19.913s 19.000s 22.213s

18. 33.3 млн. посетителей
http://goo.gl/JnXZ2x
19.913s 19.000s 22.213s

19. 112.6 млн. просмотров
http://goo.gl/JnXZ2x
19.913s 19.000s 22.213s

20. ПРОИЗВОДИТЕЛЬНОСТЬ –
ЭТО НЕ
МАТЕМАТИКА

21. ПРОИЗВОДИТЕЛЬНОСТЬ –
ЭТО
ВОСПРИЯТИЕ

23. ЗАКОН ВЕБЕРА-ФЕХНЕРА

24. JND
(just noticeable difference)
ЗАКОН ВЕБЕРА-ФЕХНЕРА

25. ПРАВИЛО 20%

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

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

28. ПРАВИЛО 20%
СОБЫТИЕ
регрессия

29. +20%
ПРАВИЛО 20%
СОБЫТИЕ
регрессия

30. ЗНАЧИМО
ЗАМЕТНО
!==

32. frontendconf

33. frontendconf
≈5s

34. frontendconf

35. frontendconf
≈2s

36. 2с
5с

37. 2с + 20%
= 2.4с
2с
5с

38. 2с
5с
√5×2

39. 2с
5с3.2с
√5×2

40. АКТИВНАЯ ПАССИВНАЯ
Чувак,
я занят!

41. АКТИВНАЯ ПАССИВНАЯ
Чувак,
я занят! 36%

42. ПАССИВНААКТИВНАЯ
Чувак,
я занят!

43. EVENT
ПРЕДВАРИТЕЛЬНЫЙ СТАРТ
ПРОЦЕСССОБЫТИЕ
СОБЫТИЕАКТИВНАЯ
ФАЗА

46. ПРЕДЗАГРУЗКА
ТОП РЕЗУЛЬТАТОВ
Safari (iOS)
Настройки / Safari / Предзагрузка топ-результ.

50. <link rel=“…" href=“…">
https://www.w3.org/TR/2016/WD-resource-hints-20160225/
RESOURCE HINTS

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

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

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

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

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

56. ПАССИВНАЯ
ФАЗА

57. ПАССИВНАЯ
ФАЗА

58. АКТИВНАЯ
ФАЗАFrontend
Conf
Проходит в
рамках
фестиваля
Российские
интернет-
технологии

59. goo.gl/JnXZ2x

60. goo.gl/JnXZ2x

61. goo.gl/JnXZ2x
АКТИВНАЯ ФАЗАПАССИВНАЯ ФАЗА

62. goo.gl/JnXZ2x
АКТИВНАЯ ФАЗАПАССИВНАЯ ФАЗА

68. ПОЛЕГЧЕ,
ПАРНИША

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

70. СООТВЕТСТВУЙТЕ
ОЖИДАНИЯМ
ПОЛЬЗОВАТЕЛЯ

72. Восприятие
производительности во многих
случаях так же эффективно, как
и сама производительность
“
”

73. Вы держитесь.
Всего доброго,
здоровья вам
и хорошего настроения.

74. https://goo.gl/DMLdz1

75. СПАСИБО
ДЕНИС МИШУНОВ • DIGITAL GARDEN AS • @MISHUNOV
РИСУНКИ: ДЕНИС МИШУНОВ a.k.a “Я”