pavel dovbush toster
TRANSCRIPT
![Page 1: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/1.jpg)
Измерение и мониторинг клиентской части сайта у 150М
пользователей
Павел Довбуш @ Badoo Developmenthttp://badoo.com/
![Page 2: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/2.jpg)
Скорость сайта == деньги
- Известные рекомендации по оптимизации- Много статей, книг- Утилита Google Page Speed
![Page 3: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/3.jpg)
Waterfall отчеты
time
DOMContentLoaded
Загрузка документа и статики
onLoad
Знакомая картинка?
![Page 4: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/4.jpg)
Рекомендации
- меньше HTTP запросов- меньше DNS запросов- кэширование- CDN- сжатие: minify, gzip- оптимизация картинок, спрайты
![Page 5: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/5.jpg)
Старт приложения
- оптимизировали загрузку статики- Page Speed 100/100 - Достаточно ли этого?
![Page 6: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/6.jpg)
Скорость сайта == деньги
time
DOMContentLoaded
Загрузка документа и статики
инициализация приложения
onLoadJS init
![Page 7: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/7.jpg)
Что важно пользователю
- явно не рейтинг в Page Speed :)- Время до "рабочей страницы"- Время полной загрузки ("часики" пропали)
![Page 8: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/8.jpg)
Что важно разработчику
Общее время инициализации:- Сколько секунд?- Как найти узкое место?- Переписывание какой страницы (компонента) даст наибольший выигрыш?
![Page 9: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/9.jpg)
Как увидеть реальное влияние изменений?
- На глазок- Перегрев гаджета :)
![Page 10: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/10.jpg)
Как увидеть реальное влияние изменений?
- Искусcтвенные тесты компонент http://jsperf.com/
![Page 11: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/11.jpg)
Как увидеть реальное влияние изменений?
- Waterfall отчеты по запросу http://www.webpagetest.org/
![Page 12: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/12.jpg)
Как увидеть реальное влияние изменений?
- Регулярный мониторинг http://www.gomeznetworks.com/
![Page 13: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/13.jpg)
Как увидеть реальное влияние изменений?
- Измерения внутри приложения, работающего у реальных пользователей - Мы сами расставляем таймеры
![Page 14: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/14.jpg)
Что измерять?
Самый простой набор:- JavaScript/CSS download time (cкорость скачивания)
- DOMContentLoaded- JavaScript init time (первичная инициализация)
- OnLoad
![Page 15: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/15.jpg)
Что измерять? <!DOCTYPE html><html><head><script>var start = Date.now();</script><script src=".../page.js"></script><script>var js_load = Date.now() - start;</script>
![Page 16: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/16.jpg)
Что измерять?<script>document.addEventListener('DOMContentLoaded', function(){
var dom_ready = Date.now() - start;}, false); window.addEventListener('load',function(){
var on_load = Date.now() - start;}, false);</script>
![Page 17: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/17.jpg)
Время инициализации приложения
- Архитектура приложения должна содержать точки для замера - У нас - одна точка входа обертка вокруг DOMContentLoaded - Асинхронная инициализация, подгрузка компонентов - отдельно
![Page 18: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/18.jpg)
Время инициализации приложения
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);
![Page 19: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/19.jpg)
Время инициализации приложения
function Page(){pages.push(this);
} function Example(){
Page.apply(this);} Example.prototype.init = function(){
// document is ready};
![Page 20: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/20.jpg)
Общая информация по всем пользователям
- Как послать результаты измерений на сервер?
* Ajax или hidden-image <script>var img = new Image();img.src = ".../log.php?stats=" + [ js_load, dom_ready, js_init, on_load ].join(',');</script>
![Page 21: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/21.jpg)
Общая информация по всем пользователям
* Внедрение в следующие запросы отчета о предыдущих: Cookies <script>document.cookie = "stats=" + [ js_load, dom_ready, js_init, on_load ].join(',');</script>
![Page 22: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/22.jpg)
Данные в cookies следующего хита
- негарантированная доставка- последний хит теряется- нет лишних запросов- сборщик удаляет сохраненную куку
![Page 23: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/23.jpg)
Сбор данных на сервере - Сбор и агрегация на стороне сервера - отдельная задача для миллиардов хитов в сутки Scribe, агрегация в MySQL, графики в RRD
![Page 24: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/24.jpg)
Сбор данных на сервереwww cluster
www1
www2
www3
wwwN
scribe
scribe
scribe
scribe
MySQL
users
Scribecentral
aggregation
php
![Page 25: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/25.jpg)
Сбор данных на сервере Несмотря на агрегацию, данных очень много 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 агрегированные за неделю!
![Page 26: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/26.jpg)
Описание графиковвремя
выполнения
время100 ms
200 ms
1 s
2 s
логирифмическая шкала 250 ms
час, день, неделя
Легенда: браузер, время выполнения
ie - Internet Explorer 6-9ff - Firefox 2-4+cr - Google Chromewk - Safariop - Opera
время выполнения в разных браузерах
![Page 27: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/27.jpg)
Что можно увидеть на графиках
- Результаты оптимизации
![Page 28: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/28.jpg)
Что можно увидеть на графиках
- Результаты оптимизации
![Page 29: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/29.jpg)
Что можно увидеть на графиках
- ошибки в части браузеров
![Page 30: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/30.jpg)
Что можно увидеть на графиках- последствия редизайна
![Page 31: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/31.jpg)
Детальные измерения
- тестовые пользователи- отчет с точностью до компонент- детальная статистика внутри компонент- любые замеры подозрительных мест
![Page 32: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/32.jpg)
Детальные измерения
time
DOMContentLoaded
Загрузка документа и статики
инициализация приложения
onLoadJS init
![Page 33: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/33.jpg)
Детальные измерения
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);
![Page 34: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/34.jpg)
Профайлинг
- Список компонент с их "весами" - Высоко-уровневый профайлинг - Обоснованный выбор компонента для оптимизации/рефакторинга
![Page 35: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/35.jpg)
Детальная информация на тестовых пользователях
IE6
4 секунды!
FF2
0.5 сек
список компонентови их времен
![Page 36: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/36.jpg)
Мониторинг
![Page 37: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/37.jpg)
Графики
сутки, неделя, месяц, год Разбиение:- по страницам- по браузерам- по странам
![Page 38: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/38.jpg)
Графики
![Page 39: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/39.jpg)
ГрафикиФранция на пражском ДЦ Бразилия на майамском ДЦ
![Page 40: Pavel Dovbush Toster](https://reader034.vdocuments.net/reader034/viewer/2022051112/557fbce4d8b42a36118b4d11/html5/thumbnails/40.jpg)
Планы развития
- Resource Timing - W3C(больше сетевой информации)
- Более детальная аналитика