"Когда загрузится страница нам нужно знать...
DESCRIPTION
Последние несколько лет вопросам производительности веб-страниц уделяется много внимания. Уже давно известно, как можно ускорить загрузку страниц, однако далеко не все разработчики заботятся об этом. При этом сайты с каждым днём становятся все более объёмными и сложными. Существует масса сервисов и утилит, дающих детальную информацию о работе сайта и позволяющих оценить время его загрузки. Но в большинстве случаев эти данные отражают ситуацию на машине разработчика либо соответствуют какому-то условному сценарию: например, можно проводить синтетические тесты с заданной шириной канала и определённым набором браузеров. Узнать реальную картину можно, только получая данные от самих пользователей. Мы поговорим о том, какие возможности существуют для этого, посмотрим на инструменты для сбора такой информации и разберём особенности их работы в разных браузерах.TRANSCRIPT
![Page 1: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/1.jpg)
1
![Page 2: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/2.jpg)
2
Когда загрузится страница нам нужно знать наверняка
Карев Иван
![Page 3: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/3.jpg)
3
Немного о себе
• В веб-разработке более 6ти лет • Последние 2 года – главные страницы
Яндекса • Занимаюсь вопросами производительности
ivan-‐karev@yandex-‐team.ru @newbfg
![Page 4: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/4.jpg)
4
О чем будем говорить
• Время загрузки страницы – общие вопросы, немного истории
• Наши эксперименты на главной странице – успехи, неудачи, сомнения
• К чему мы пришли
![Page 5: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/5.jpg)
5
Почему это важно?
• Нужно быть уверенным, что все хорошо • Нужно уметь сравнивать с другими сервисами • Нужно уметь оценивать изменения (изменение платформы, дизайна, …)
![Page 6: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/6.jpg)
6
Почему фронтенд?
"backend” 14% “frontend” 86%
gLearn glass – Steve Souders
![Page 7: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/7.jpg)
7
Что именно измерять?
Загрузка страницы: • До 100мс – мгновенно • До 1с – ожидание… • Больше 1с – переключение внимания onload
![Page 8: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/8.jpg)
8
Что именно измерять?
Загрузка страницы: Начало • До 100мс – мгновенно • До 1с – ожидание… • Больше 1с – переключение внимания Окончание onload
![Page 9: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/9.jpg)
9
Начало визуальных изменений
![Page 10: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/10.jpg)
10
Задача
• Узнать время начала визуальных изменений • в разных браузерах • с разными сетевыми условиями • с нужной периодичностью
![Page 11: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/11.jpg)
11
Инструмент - Шуттилка
• Время начала/окончания визуальных изменений страницы и ее частей • Все нужные браузеры • Гибкая настройка сетевых условий • Высокая пропускная способность, история запусков • Горячий/холодный кэш, куки и т.д.
![Page 12: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/12.jpg)
12
Синтетические тесты
![Page 13: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/13.jpg)
13
Начало визуальных изменений у пользователей
![Page 14: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/14.jpg)
14
Как измерить?
• Сравним данные Шуттилки и данные, полученные на странице • Разные браузеры, разные сетевые условия • Ищем закономерности
![Page 15: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/15.jpg)
15
Что измерить?
1. Скрипты на странице (end of body – start of head)
![Page 16: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/16.jpg)
16
Chrome, 20mbit, 20ms
-‐200
Шуттилка
(Шуттилка -‐ скрипт)
Запуски
Врем
я
![Page 17: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/17.jpg)
17
Chrome, 1mbit, 100ms
-‐3600
![Page 18: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/18.jpg)
18
Firefox, 20mbit, 20ms
40
![Page 19: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/19.jpg)
19
Firefox, 1mbit, 100ms
-‐3100
![Page 20: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/20.jpg)
20
IE, 20mbit, 20ms
-‐400
![Page 21: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/21.jpg)
21
IE, 1mbit, 100ms
-‐3800
![Page 22: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/22.jpg)
22
Что измерить?
1. Скрипты на странице (end of body – start of head) + есть корреляция – зависят от сетевых условий – зависят от браузера – погрешность
![Page 23: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/23.jpg)
23
Что измерить?
1. Скрипты на странице (end of body – start of head) 2. Navigation Timing API
![Page 24: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/24.jpg)
24
Navigation Timing API
![Page 25: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/25.jpg)
25
performance.timing
navigationStart redirect domainLookup connect request response domInteractive domContentLoaded loadEvent
![Page 26: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/26.jpg)
26
Navigation Timing API
domContentLoaded – navigationStart?
![Page 27: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/27.jpg)
27
Chrome, 20mbit, 20ms
-‐500
Запуски
Врем
я
![Page 28: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/28.jpg)
28
Chrome, 1mbit, 100ms
-‐4200
![Page 29: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/29.jpg)
29
Firefox, 20mbit, 20ms
-‐480
![Page 30: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/30.jpg)
30
Firefox, 1mbit, 100ms
-‐4100
![Page 31: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/31.jpg)
31
IE, 20mbit, 20ms
-‐750
![Page 32: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/32.jpg)
32
IE, 1mbit, 100ms
-‐5100
![Page 33: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/33.jpg)
33
Что измерить?
1. Скрипты на странице (end of body – start of head) 2. Navigation Timing API
+ есть корреляция – зависят от сетевых условий – зависят от браузера – погрешность
![Page 34: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/34.jpg)
34
Что измерить?
1. Скрипты на странице (end of body – start of head) 2. Navigation Timing API 3. Экспериментальные API
![Page 35: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/35.jpg)
35
IE9+
performance.timing.msFirstPaint
![Page 36: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/36.jpg)
36
Chromium’s
chrome.loadTimes().firstPaintTime
![Page 37: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/37.jpg)
37
Chrome, 20mbit, 20ms
-‐100
Запуски
Врем
я
![Page 38: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/38.jpg)
38
Chrome, 1mbit, 100ms
-‐100
![Page 39: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/39.jpg)
39
IE, 20mbit, 20ms
0
![Page 40: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/40.jpg)
40
IE, 1mbit, 100ms
0
![Page 41: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/41.jpg)
41
И еще
• Другие сетевые условия • Горячий/холодный кэш
![Page 42: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/42.jpg)
42
Проверим на пользователях!
![Page 43: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/43.jpg)
43
yandex.ru, всё вместе, 50%
![Page 44: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/44.jpg)
44
Что в итоге
• Есть способ измерять визуальные изменения у пользователей
![Page 45: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/45.jpg)
45
Что в итоге
• Есть способ измерять визуальные изменения у пользователей • Пока без поддержки в Firefox
![Page 46: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/46.jpg)
46
Что в итоге
• Есть способ измерять визуальные изменения у пользователей • Пока без поддержки в Firefox • Есть погрешность в chrome.loadTimes()
![Page 47: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/47.jpg)
47
Погрешность в chrome.loadTimes()
10% 20% 30% 40% 50% 60% 70% 80% 0
200
400
600
800
1000
1200
1400
1600
1800
![Page 48: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/48.jpg)
48
Погрешность в chrome.loadTimes(): до
Запуски
Врем
я
![Page 49: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/49.jpg)
49
Погрешность в chrome.loadTimes(): после
30
Запуски
Врем
я
![Page 50: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/50.jpg)
50
Что в итоге
• Есть способ измерять визуальные изменения у пользователей • Пока без поддержки в Firefox • Есть погрешность в chrome.loadTimes(), исправим • Opera?
![Page 51: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/51.jpg)
51
Opera16, 20mbit, 20ms
Шуттилка
(Шуттилка -‐ скрипт) Запуски
Врем
я
![Page 52: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/52.jpg)
52
Opera16, 1mbit, 100ms
![Page 53: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/53.jpg)
53
Что в итоге
• Есть способ измерять визуальные изменения у пользователей • Пока без поддержки в Firefox • Есть погрешность в chrome.loadTimes(), исправим • Неправильные данные в Opera, ждем исправлений
![Page 54: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/54.jpg)
54
Что в итоге
• Есть способ измерять визуальные изменения у пользователей • Пока без поддержки в Firefox • Есть погрешность в chrome.loadTimes(), исправим • Неправильные данные в Opera, ждем исправлений • Мобильные устройства
![Page 55: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/55.jpg)
55
mobilehtml5.org
![Page 56: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/56.jpg)
56
yandex.ru, IEMobile, 50%
![Page 57: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/57.jpg)
57
Что в итоге
• Есть способ измерять визуальные изменения у пользователей • Пока без поддержки в Firefox • Есть погрешность в chrome.loadTimes(), исправим • Неправильные данные в Opera, ждем исправлений • Мобильные устройства • Отчет о времени загрузки страниц в Метрике
![Page 58: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/58.jpg)
58
Отчет о времени загрузки страниц
![Page 59: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/59.jpg)
59
Отчет о времени загрузки страниц
![Page 60: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/60.jpg)
60
Это будет работать, если сайт загружается так, как вы ожидаете.
![Page 61: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/61.jpg)
61
Нужно измерять продуктовые метрики, а не только технические.
![Page 62: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/62.jpg)
62
Что дальше?
speedIndex
![Page 63: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/63.jpg)
63
Бонус
Chrome vs Opera
![Page 64: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/64.jpg)
64
Chrome vs Opera, 20mbit, 20ms
Запуски
Врем
я
Chrome
Opera
![Page 65: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/65.jpg)
65
Chrome vs Opera, 1mbit, 100ms
600ms
Opera
Chrome
Запуски
Врем
я
![Page 67: "Когда загрузится страница нам нужно знать наверняка". Иван Карев, Яндекс](https://reader035.vdocuments.net/reader035/viewer/2022062319/557ee83cd8b42ad17d8b45a6/html5/thumbnails/67.jpg)
67
Спасибо за внимание