Последние несколько лет вопросам производительности веб-страниц уделяется много внимания. Уже давно известно, как можно ускорить загрузку страниц, однако далеко не все разработчики заботятся об этом. При этом сайты с каждым днём становятся все более объёмными и сложными. Существует масса сервисов и утилит, дающих детальную информацию о работе сайта и позволяющих оценить время его загрузки. Но в большинстве случаев эти данные отражают ситуацию на машине разработчика либо соответствуют какому-то условному сценарию: например, можно проводить синтетические тесты с заданной шириной канала и определённым набором браузеров. Узнать реальную картину можно, только получая данные от самих пользователей. Мы поговорим о том, какие возможности существуют для этого, посмотрим на инструменты для сбора такой информации и разберём особенности их работы в разных браузерах.

1. 1

2. 2
Когда загрузится страница
нам нужно знать наверняка
Карев Иван

3. 3
Немного о себе
• В веб-разработке более 6ти лет
• Последние 2 года – главные страницы
Яндекса
• Занимаюсь вопросами производительности
ivan-­‐karev@yandex-­‐team.ru
@newbfg

4. 4
О чем будем говорить
• Время загрузки страницы
– общие вопросы, немного истории
• Наши эксперименты на главной странице
– успехи, неудачи, сомнения
• К чему мы пришли

5. 5
Почему это важно?
• Нужно быть уверенным, что все хорошо
• Нужно уметь сравнивать с другими сервисами
• Нужно уметь оценивать изменения (изменение платформы, дизайна, …)

6. 6
Почему фронтенд?
"backend”
14%
“frontend”
86%
gLearn
glass
–
Steve
Souders

7. 7
Что именно измерять?
Загрузка страницы:
• До 100мс – мгновенно
• До 1с – ожидание…
• Больше 1с – переключение внимания
onload

8. 8
Что именно измерять?
Загрузка страницы:
Начало
• До 100мс – мгновенно
• До 1с – ожидание…
• Больше 1с – переключение внимания
Окончание
onload

9. 9
Начало визуальных изменений

10. 10
Задача
• Узнать время начала визуальных изменений
• в разных браузерах
• с разными сетевыми условиями
• с нужной периодичностью

11. 11
Инструмент - Шуттилка
• Время начала/окончания визуальных изменений страницы и ее частей
• Все нужные браузеры
• Гибкая настройка сетевых условий
• Высокая пропускная способность, история запусков
• Горячий/холодный кэш, куки и т.д.

12. 12
Синтетические тесты

13. 13
Начало визуальных изменений у пользователей

14. 14
Как измерить?
• Сравним данные Шуттилки и данные, полученные на странице
• Разные браузеры, разные сетевые условия
• Ищем закономерности

15. 15
Что измерить?
1. Скрипты на странице (end of body – start of head)

16. 16
Chrome, 20mbit, 20ms
-­‐200
Шуттилка
(Шуттилка
-­‐
скрипт)
Запуски
Время

17. 17
Chrome, 1mbit, 100ms
-­‐3600

18. 18
Firefox, 20mbit, 20ms
40

19. 19
Firefox, 1mbit, 100ms
-­‐3100

20. 20
IE, 20mbit, 20ms
-­‐400

21. 21
IE, 1mbit, 100ms
-­‐3800

22. 22
Что измерить?
1. Скрипты на странице (end of body – start of head)
+ есть корреляция
– зависят от сетевых условий
– зависят от браузера
– погрешность

23. 23
Что измерить?
1. Скрипты на странице (end of body – start of head)
2. Navigation Timing API

24. 24
Navigation Timing API

25. 25
performance.timing
navigationStart
redirect
domainLookup
connect
request
response
domInteractive
domContentLoaded
loadEvent

26. 26
Navigation Timing API
domContentLoaded – navigationStart?

27. 27
Chrome, 20mbit, 20ms
-­‐500
Запуски
Время

28. 28
Chrome, 1mbit, 100ms
-­‐4200

29. 29
Firefox, 20mbit, 20ms
-­‐480

30. 30
Firefox, 1mbit, 100ms
-­‐4100

31. 31
IE, 20mbit, 20ms
-­‐750

32. 32
IE, 1mbit, 100ms
-­‐5100

33. 33
Что измерить?
1. Скрипты на странице (end of body – start of head)
2. Navigation Timing API
+ есть корреляция
– зависят от сетевых условий
– зависят от браузера
– погрешность

34. 34
Что измерить?
1. Скрипты на странице (end of body – start of head)
2. Navigation Timing API
3. Экспериментальные API

35. 35
IE9+
performance.timing.msFirstPaint

36. 36
Chromium’s
chrome.loadTimes().firstPaintTime

37. 37
Chrome, 20mbit, 20ms
-­‐100
Запуски
Время

38. 38
Chrome, 1mbit, 100ms
-­‐100

39. 39
IE, 20mbit, 20ms
0

40. 40
IE, 1mbit, 100ms
0

41. 41
И еще
• Другие сетевые условия
• Горячий/холодный кэш

42. 42
Проверим на пользователях!

43. 43
yandex.ru, всё вместе, 50%

44. 44
Что в итоге
• Есть способ измерять визуальные изменения у пользователей

45. 45
Что в итоге
• Есть способ измерять визуальные изменения у пользователей
• Пока без поддержки в Firefox

46. 46
Что в итоге
• Есть способ измерять визуальные изменения у пользователей
• Пока без поддержки в Firefox
• Есть погрешность в chrome.loadTimes()

47. 47
Погрешность в chrome.loadTimes()
10%
20%
30%
40%
50%
60%
70%
80%
0
200
400
600
800
1000
1200
1400
1600
1800

48. 48
Погрешность в chrome.loadTimes(): до
Запуски
Время

49. 49
Погрешность в chrome.loadTimes(): после
30
Запуски
Время

50. 50
Что в итоге
• Есть способ измерять визуальные изменения у пользователей
• Пока без поддержки в Firefox
• Есть погрешность в chrome.loadTimes(), исправим
• Opera?

51. 51
Opera16, 20mbit, 20ms
Шуттилка
(Шуттилка
-­‐
скрипт)
Запуски
Время

52. 52
Opera16, 1mbit, 100ms

53. 53
Что в итоге
• Есть способ измерять визуальные изменения у пользователей
• Пока без поддержки в Firefox
• Есть погрешность в chrome.loadTimes(), исправим
• Неправильные данные в Opera, ждем исправлений

54. 54
Что в итоге
• Есть способ измерять визуальные изменения у пользователей
• Пока без поддержки в Firefox
• Есть погрешность в chrome.loadTimes(), исправим
• Неправильные данные в Opera, ждем исправлений
• Мобильные устройства

55. 55
mobilehtml5.org

56. 56
yandex.ru, IEMobile, 50%

57. 57
Что в итоге
• Есть способ измерять визуальные изменения у пользователей
• Пока без поддержки в Firefox
• Есть погрешность в chrome.loadTimes(), исправим
• Неправильные данные в Opera, ждем исправлений
• Мобильные устройства
• Отчет о времени загрузки страниц в Метрике

58. 58
Отчет о времени загрузки страниц

59. 59
Отчет о времени загрузки страниц

60. 60
Это будет работать, если сайт загружается так, как вы
ожидаете.

61. 61
Нужно измерять продуктовые метрики, а не только
технические.

62. 62
Что дальше?
speedIndex

63. 63
Бонус
Chrome vs Opera

64. 64
Chrome vs Opera, 20mbit, 20ms
Запуски
Время
Chrome
Opera

65. 65
Chrome vs Opera, 1mbit, 100ms
600ms
Opera
Chrome
Запуски
Время

66. 66
Иван Карев
Разработчик интерфейсов
ivan-karev@yandex-team.ru

67. 67
Спасибо за внимание