Реалтайм статистика скорости работы нативных и...
TRANSCRIPT
![Page 1: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/1.jpg)
Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей
Pavel Dovbush@
![Page 2: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/2.jpg)
RUMReal User Monitoring
Реальный UX
![Page 3: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/3.jpg)
DOMContentLoaded, onLoad
W3C Navigation Timing W3C Resource Timing W3C User Timing
Нативные приложения
Что
![Page 4: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/4.jpg)
W3C Navigation Timing
![Page 5: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/5.jpg)
W3C Resource Timing
![Page 6: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/6.jpg)
Load time - 32s
![Page 7: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/7.jpg)
UX vs. onLoad
source
![Page 8: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/8.jpg)
Что такое UX?
VS.
![Page 9: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/9.jpg)
performance.mark(name)
performance.measure(name, mark1, mark2)
W3C User Timing
![Page 10: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/10.jpg)
WebSite hit
![Page 11: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/11.jpg)
WebApp hit
![Page 12: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/12.jpg)
Android hit
![Page 13: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/13.jpg)
Как собрать данные?
Специализированные
Всё-в-одном
![Page 14: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/14.jpg)
Собираем сами
WEB cluster
Хранилище
Графики
Приложение
![Page 15: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/15.jpg)
github.com/dpp-name/jinba
tiny.cc/jinba
Jinba
![Page 16: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/16.jpg)
Микро-библиотека JavaScript Android iOS Windows phone
Набор соглашений
Инфраструктура Сбор Визуализация Аналитика
Jinba
![Page 17: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/17.jpg)
npm install jinba-js-client
var Jinba = require('jinba-js-client');;
var r = new Jinba.Request(location.pathname, app_label: 'example' );;
r.startMeasurement('some-id', 'init');;doInit(function callback() r.stopMeasurement('some-id');;
);;
r.end();;
Пример
![Page 18: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/18.jpg)
[ name: '/',value: 321,tags: app_label: 'example', errorStatus: 0 ,measurements:
[ name: 'init', value: 275 ,…. name: 'foo-1', value: 0 , name: 'bar-2', value: 17 ,….
Данные
![Page 19: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/19.jpg)
Отфильтровать мусор
Защита от паразитного трафика
Записать в хранилище
Как можно быстрее!
Прием данных
![Page 20: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/20.jpg)
Быстрая вставка
Разные “срезы”
Возможность считать персентили
Хранить данные годами
Требования к хранилищу
![Page 21: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/21.jpg)
MySQL
Syslog
Hadoop
InfluxDB
StatsD
Хранилище
![Page 22: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/22.jpg)
MySQL engine
Данные в памяти (за N минут)
UDP вставка
Отчеты по тэгам
Реалтайм!
pinba.org
![Page 23: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/23.jpg)
tagN_info - отчеты по многим тэгам
Персентили
Гистограммы
Фильтрация по тегам реквеста
Pinba для Jinba
![Page 24: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/24.jpg)
Pinba
1.4M
25K
RPS
TPS
![Page 25: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/25.jpg)
CREATE TABLE v2_jinba_country (...) ENGINE=PINBA COMMENT='tagN_info:timer,mode,country::75,95';;
pinbaSchema.createReport(mysqlClient: mysqlClient,tablePrefix: 'v2_jinba',name: 'country',tags: ['timer', 'mode', 'country']
);;
Создание отчета
![Page 26: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/26.jpg)
mysql> desc v2_jinba_country;+-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐+-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐+| Field | Type |+-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐+-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐+| timer | varchar(64) || mode | varchar(64) || country | varchar(64) || req_count | int(11) || req_per_sec | float || hit_count | int(11) || hit_per_sec | float || timer_value | float || timer_median | float || index_value | varchar(256) || p75 | float || p95 | float |+-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐+-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐+
Создание отчета
![Page 27: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/27.jpg)
mysql> select timer, mode, hit_per_sec,timer_value/hit_count as timer_avg, timer_median, p75, p95
from v2_jinba where mode='webapp-‐badoo' and timer='usable' \G*************************** 1. row ***************************
timer: usablemode: webapp-‐badoo
hit_per_sec: 739.025timer_avg: 0.898577200534488
timer_median: 0.589789p75: 0.854372p95: 2.18598
Создание отчета
![Page 28: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/28.jpg)
Гистограмма% of hits
time
![Page 29: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/29.jpg)
Pinba - последние 5-10-15 минут
История - RRD в перспективе InfluxDB
Хранение истории
![Page 30: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/30.jpg)
pinba2influxdb
createDB(influxClient, dbName)
selectData(mysqlClient, dbName, tags)
insertData(influxClient, dbName, result)
InfluxDB
![Page 31: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/31.jpg)
Как рисовать?
![Page 32: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/32.jpg)
grafanaUtils
createReportDashboard(url, grafanaKey, schema, name)
"domain_country": "rows_by": "timer","tags": ["mode","timer","domain","country"]
Grafana
![Page 33: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/33.jpg)
Как рисовать?
![Page 34: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/34.jpg)
Что получилось
JinbaClient
JinbaServer
Pinba
JinbaScripts
InfluxDB
Grafana
![Page 35: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/35.jpg)
Тип запроса
Таймер
Страница / Экран
Страна
Браузер / Устройство
Аналитика
![Page 36: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/36.jpg)
Тип запроса
Таймер
Страница / Экран
Страна
Браузер / Устройство
Аналитика
9
31
40
50
10
5.5 M
![Page 37: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/37.jpg)
WebSite
![Page 38: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/38.jpg)
WebApp
![Page 39: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/39.jpg)
Android
![Page 40: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/40.jpg)
Среднее и персентили
![Page 41: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/41.jpg)
Результаты оптимизации
![Page 42: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/42.jpg)
Последствия редизайна
![Page 43: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/43.jpg)
Сравнение стран
![Page 44: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/44.jpg)
Сравнение браузеров
![Page 45: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/45.jpg)
Сравнение страниц
![Page 46: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш](https://reader033.vdocuments.site/reader033/viewer/2022051404/586f904f1a28ab54768b7915/html5/thumbnails/46.jpg)
Только вы можете определить `usable`
Юзабилити важнее технических метрик
Не смешивайте типы запросов
Выделяйте общие группы
Персентили, а не среднее
Итого