1

2

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

Карев Иван

3

Немного о себе

•  В веб-разработке более 6ти лет •  Последние 2 года – главные страницы

Яндекса •  Занимаюсь вопросами производительности

ivan-­‐karev@yandex-­‐team.ru  @newbfg  

4

О чем будем говорить

•  Время загрузки страницы – общие вопросы, немного истории

•  Наши эксперименты на главной странице – успехи, неудачи, сомнения

•  К чему мы пришли

5

Почему это важно?

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

6

Почему фронтенд?

"backend”  14%   “frontend”  86%  

gLearn  glass  –  Steve  Souders  

7

Что именно измерять?

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

8

Что именно измерять?

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

9

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

10

Задача

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

11

Инструмент - Шуттилка

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

12

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

13

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

14

Как измерить?

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

15

Что измерить?

1. Скрипты на странице (end of body – start of head)

16

Chrome, 20mbit, 20ms

-­‐200  

Шуттилка  

(Шуттилка  -­‐  скрипт)  

Запуски  

Врем

я  

17

Chrome, 1mbit, 100ms

-­‐3600  

18

Firefox, 20mbit, 20ms

40  

19

Firefox, 1mbit, 100ms

-­‐3100  

20

IE, 20mbit, 20ms

-­‐400  

21

IE, 1mbit, 100ms

-­‐3800  

22

Что измерить?

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

23

Что измерить?

1.  Скрипты на странице (end of body – start of head) 2.  Navigation Timing API

24

Navigation Timing API

25

performance.timing

navigationStart redirect domainLookup connect request response domInteractive domContentLoaded loadEvent

26

Navigation Timing API

domContentLoaded – navigationStart?

27

Chrome, 20mbit, 20ms

-­‐500  

Запуски  

Врем

я  

28

Chrome, 1mbit, 100ms

-­‐4200  

29

Firefox, 20mbit, 20ms

-­‐480  

30

Firefox, 1mbit, 100ms

-­‐4100  

31

IE, 20mbit, 20ms

-­‐750  

32

IE, 1mbit, 100ms

-­‐5100  

33

Что измерить?

1.  Скрипты на странице (end of body – start of head) 2.  Navigation Timing API

+ есть корреляция – зависят от сетевых условий – зависят от браузера – погрешность

34

Что измерить?

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

35

IE9+

performance.timing.msFirstPaint

36

Chromium’s

chrome.loadTimes().firstPaintTime

37

Chrome, 20mbit, 20ms

-­‐100  

Запуски  

Врем

я  

38

Chrome, 1mbit, 100ms

-­‐100  

39

IE, 20mbit, 20ms

0  

40

IE, 1mbit, 100ms

0  

41

И еще

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

42

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

43

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

44

Что в итоге

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

45

Что в итоге

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

46

Что в итоге

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

47

Погрешность в chrome.loadTimes()

10%   20%   30%   40%   50%   60%   70%   80%  0  

200  

400  

600  

800  

1000  

1200  

1400  

1600  

1800  

48

Погрешность в chrome.loadTimes(): до

Запуски  

Врем

я  

49

Погрешность в chrome.loadTimes(): после

30  

Запуски  

Врем

я  

50

Что в итоге

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

51

Opera16, 20mbit, 20ms

Шуттилка  

(Шуттилка  -­‐  скрипт)  Запуски  

Врем

я  

52

Opera16, 1mbit, 100ms

53

Что в итоге

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

54

Что в итоге

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

55

mobilehtml5.org

56

yandex.ru, IEMobile, 50%

57

Что в итоге

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

58

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

59

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

60

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

61

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

62

Что дальше?

speedIndex

63

Бонус

Chrome vs Opera

64

Chrome vs Opera, 20mbit, 20ms

Запуски  

Врем

я  

Chrome  

Opera  

65

Chrome vs Opera, 1mbit, 100ms

600ms  

Opera  

Chrome  

Запуски  

Врем

я  

66

Иван Карев Разработчик интерфейсов

ivan-karev@yandex-team.ru

67

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