6. Скорость сайта == деньги
DOMContentLoaded JS init onLoad
time
инициализация
приложения
Загрузка документа и
статики
7. Что важно пользователю
- явно не рейтинг в Page Speed :)
- Время до "рабочей страницы"
- Время полной загрузки ("часики" пропали)
8. Что важно разработчику
Общее время инициализации:
- Сколько секунд?
- Как найти узкое место?
- Переписывание какой страницы
(компонента) даст наибольший выигрыш?
10. Как увидеть реальное влияние
изменений?
- Искусcтвенные тесты компонент http://jsperf.com/
11. Как увидеть реальное влияние
изменений?
- Waterfall отчеты по запросу http://www.webpagetest.org/
12. Как увидеть реальное влияние
изменений?
- Регулярный мониторинг http://www.gomeznetworks.com/
13. Как увидеть реальное влияние
изменений?
- Измерения внутри приложения,
работающего у реальных пользователей
- Мы сами расставляем таймеры
14. Что измерять?
Самый простой набор:
- JavaScript/CSS download time
(cкорость скачивания)
- DOMContentLoaded
- JavaScript init time
(первичная инициализация)
- OnLoad
17. Время инициализации приложения
- Архитектура приложения должна
содержать точки для замера
- У нас - одна точка входа
обертка вокруг DOMContentLoaded
- Асинхронная инициализация, подгрузка
компонентов - отдельно
18. Время инициализации приложения
var pages = [];
document.addEventListener('DOMContentLoaded',
function(){
var begin = Date.now();
for (var i=0; i < pages; i++){
pages[i].init();
}
var js_init = Date.now() - begin;
}, false);
19. Время инициализации приложения
function Page(){
pages.push(this);
}
function Example(){
Page.apply(this);
}
Example.prototype.init = function(){
// document is ready
};
20. Общая информация по всем
пользователям
- Как послать результаты измерений на
сервер?
* Ajax или hidden-image
<script>
var img = new Image();
img.src = ".../log.php?stats=" +
[ js_load, dom_ready, js_init, on_load ].join
(',');
</script>
21. Общая информация по всем
пользователям
* Внедрение в следующие запросы отчета
о предыдущих: Cookies
<script>
document.cookie = "stats=" +
[ js_load, dom_ready, js_init, on_load ].join
(',');
</script>
22. Данные в cookies следующего
хита
- негарантированная доставка
- последний хит теряется
- нет лишних запросов
- сборщик удаляет сохраненную куку
23. Сбор данных на сервере
- Сбор и агрегация на стороне сервера -
отдельная задача для миллиардов хитов в
сутки
Scribe, агрегация в MySQL, графики в RRD
24. Сбор данных на сервере
users www cluster
www1
scribe
aggregation
www2
scribe
www3 Scribe
scribe php
central MySQL
wwwN
scribe
25. Сбор данных на сервере
Несмотря на агрегацию, данных очень много
mysql> select TABLE_NAME,TABLE_ROWS,DATA_LENGTH,INDEX_LENGTH from
information_schema.TABLES where TABLE_NAME='CookieStatsGrouped';
+--------------------+------------+-------------+--------------+
| TABLE_NAME | TABLE_ROWS | DATA_LENGTH | INDEX_LENGTH |
+--------------------+------------+-------------+--------------+
| CookieStatsGrouped | 55866578 | 3519037440 | 2808102912 |
+--------------------+------------+-------------+--------------+
6Tb агрегированные за неделю!
26. Описание графиков
время время выполнения
выполнения в разных браузерах
2s
1s
логирифмическая
250 ms
шкала
200 ms
100 ms
время
час, день, неделя
Легенда: браузер, время выполнения
ie - Internet Explorer 6-9
ff - Firefox 2-4+
cr - Google Chrome
wk - Safari
op - Opera
31. Детальные измерения
- тестовые пользователи
- отчет с точностью до компонент
- детальная статистика внутри компонент
- любые замеры подозрительных мест
32. Детальные измерения
DOMContentLoaded JS init onLoad
time
инициализация
приложения
Загрузка документа и
статики
33. Детальные измерения
var pages = [];
document.addEventListener('DOMContentLoaded',
function(){
for (var i=0; i < pages; i++){
var begin = Date.now();
pages[i].init();
var cmp_init = Date.now() - begin;
console.log( pages[i].name + ' - ' + cmp_init );
}
}, false);
34. Профайлинг
- Список компонент с их "весами"
- Высоко-уровневый профайлинг
- Обоснованный выбор компонента для
оптимизации/рефакторинга
35. Детальная информация на
тестовых пользователях
IE6
FF2
список компонентов
и их времен
4 секунды!
0.5 сек
