Автоматизация тестирования клиентской производительности - Лавлинский Николай, Highload++ 2016

Автоматизация
тестирования клиентской
производительности
Лавлинский Николай,
технический директор «Метод Лаб»

О себе
• Клиентская и серверная оптимизация
• Консультации
• Ускорение сайтов
• Пропаганда скорости

Зачем автоматизация?
• Код приложения меняется
• Выявлять проблемы до релиза кода
• Ручное тестирование не подходит
• Контролируемое окружение
• Бюджет

Что мы хотим знать
• Время загрузки
• Время рендеринга
• Различие для состояния кэша
• Влияние сети
• Нет ли деградации?
• Есть ли проблемы конфигурации?

Программная эмуляция браузера

Реальный браузер

3. Готовые решения

Patrick Meenan
• Главный разработчик WebPagetest
• Патриарх движения веб-производительности
• Много полезных видео о WPT:
https://www.youtube.com/user/patmeenan/videos

4. WebPagetest
Private Instance

WebPagetest Private Instance
• То же, но на своей инфраструктуре
• Полный контроль
• Есть поддержка агентов на Amazon EC2
• Open source (BSD):
https://github.com/WPO-Foundation/webpagetest

Location 1
Как это работает WPT PI сервер
Тестовый агент
(Windows)
(Windows)

Что мы получаем из коробки
• Параметры сети
• Chrome, Firefox, IE
• Сбор метрик
• Сбор скриншотов и видео
• Очистка кэша (включая SSL, DNS)

Тестирование на мобильных
устройствах
• Есть поддержка Android 4.4+ (Chrome)
• Есть поддержка iOS (сырая)
• Слабо документировано
• Проблемы стабилизации
• Заменяем на эмуляцию + ограничение CPU

Intel Core I5-6400 vs. Samsung Galaxy S5
4 cores, 2.7 Ghz 4 cores, 2.5 Ghz

Результаты i5 vs. S5
0 500 1000 1500 2000 2500
i5-6400
Galaxy S5
DOMContentLoaded, ms
Load time, ms

Результаты i5 vs. S5
0 50 100 150 200
i5-6400
Galaxy S5
Evaluate script jQuery 3.1, ms
Evaluate script jQuery 3.1, ms

5. Автоматизация
WPT PI

Компоненты системы
• Очередь заданий с сохранением статусов
• Сервер WPT PI
• Обработчик результатов
Очередь заданий WPT PI сервер
(Windows 7)
Обработчик
результатов

Сценарий использования
• Точки входа
• Бюджет (эталон)
• Тесты
• Сравнение результатов
• Если проблема – alert
• Прикладываем URL WPT
• Исправляем

Запрос на тестирование
• POST-запрос на http://wptdomain/runtest.php
• url — что тестировать
• location — тестовый агент (включая браузер и сеть)
• runs — количество тестов
• fvonly – тестировать только FirstView
• video — захват скриншотов и видео
• f — формат данных (XML или JSON)

Результаты тестов
• $ttfb = $result->{data}{median}{firstView}{TTFB};
• $render = $result->{data}{median}{firstView}{render};
• $loadtime = $result->{data}{median}{firstView}{loadTime};
• $full_load = $result->{data}{median}{firstView}{fullyLoaded};

6. Практика
применения

Ситуация №1 – конфигурация и контент
• Текст отдаётся без сжатия
• Статика не кэшируется
• Нет keep-alive
• Настройки TLS?
• Картинки не оптимизированы

Метрики WPT — оптимизация
minify_savings, gzip_savings, image_savings (JSON)
Осторожно: image_savings рассчитывается от JPEG-качества ~70%,
уровень сжатия gzip не учитывается
Можно дополнить оценкой GPSI (png, gif, jpg)

Метрики WPT — трафик по типам
breakdown→(css|html|js|font|image)->bytes (JSON)

Метрики WPT — полная загрузка
Fully Loaded (fullyLoaded — JSON) – измеряется WPT
Fully Loaded Bytes In (bytesIn — JSON)
bytesOut (JSON)

Ситуация №2 – блокировка рендеринга
• Синхронный внешний JS в <head>
• CSS
• Шрифты

Метрики WPT — рендеринг
Start Render (render — JSON) – измеряется WPT
RUM Furst Paint (firstPaint — JSON) —вычисляется браузером

Ситуация №3 – сложный случай

Метрики WPT — Speed Index
Speed Index (SpeedIndex — JSON) – чем меньше, тем лучше
𝑆𝑝𝑒𝑒𝑑𝐼𝑛𝑑𝑒𝑥 =
0
𝑒𝑛𝑑
1 −
𝑉𝐶
100

Ситуация №4 – зависимость от внешних API
• Нет стабильности результатов
• Внешние ресурсы (JS API, счетчики, виджеты)
Решение
• Блокируем запросы по хостам
• Параметр block (хосты через пробел)
• Локальный кэш

Ситуация №5 – CPU-bound
• Большое количество DOM-элементов, JS
• Сложный рендеринг
Решение
• Снимаем ограничение сети
• Увеличиваем количество прогонов

Метрики WPT — CPU
docCPUms (JSON) — затраты CPU на частичную загрузку
fullyLoadedCPUms (JSON) — затраты CPU на полную загрузку
docCPUpct, fullyLoadedCPUpct (JSON) – средний процент CPU
cpuTimes, cpuTimesDoc (JSON) – время CPU из DevTools timeline

Метрики WPT - DOM
domContentLoadedEventStart,
domContentLoadedEventEnd (JSON) – начало и конец события
domContentLoaded

Метрики WPT — load event
Load Time (loadTime — JSON) – время до начала события load
Включает в себя время TTFB (First Byte).
Чтобы исключить, можно использовать: loadTime — TTFB

Добавляем кастомные метрики
• Для одного запуска (параметр custom)
[iframe-count]
return document.getElementsByTagName("iframe").length;
[script-tag-count]
return document.getElementsByTagName("script").length;
• Постоянные метрики (в settings/custom_metrics/iframe-count.js)

Проблемы WPT PI (1)
Нестабильность результатов
• увеличение количества прогонов
• использование медианного варианта теста
• оптимизация Windows тестового агента
• расположение агента рядом с приложением
• блокирование запросов на внешние сервисы

Проблемы WPT PI (2)
Ресурсоёмкость проведения тестов
• Распределяем нагрузку на несколько агентов (сами)
• Меняем настройки тестов (убираем захват видео, количество
прогонов, скорость сети)
Безопасность и обслуживание
• Обновление агентов (обязательно, регулярно)
• Обновление Windows
• Мониторинг (зависшие агенты — перезагрузка)

Подходит
• Внутренний мониторинг скорости
• Сравнение с конкурентами
• Тестирование изменений, технологий
• Оценка уровня оптимизации

Не подходит
• Тестирование микроизменений (до 200 мс)
• Тестирование серверной производительности
• Нагрузочное тестирование, эмуляция действий реальных
пользователей

7. Пример
внедрения

Ускорениесайта.рф
• Сервис тестирования скорости сайтов
• WPT PI + GPSI
• Отчет на e-mail
• 16 метрик (13+2+1)
• Трудозатраты: около 40 часов

Схема: уcкорениесайта.рф
Очередь
WPT PI
сервер
WPT агент
Google
Pagespeed
API
Отчет
(e-mail)
Обработчик
(cron)

Выводы
• Рабочее готовое решение
• Автоматизируем рутину
• Несколько вариантов использования
• Возможность расширения

Что посмотреть
WebPagetest Power Users
• https://www.youtube.com/watch?v=6UeRMMI_IzI
• https://www.youtube.com/watch?v=euVYHee1f1M
Custom metrics
• http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user-experience.html
Tracking Performance
• https://www.youtube.com/watch?v=BAWpwmln6y4
DIY Synthetic - Private WebPagetest Magic
• https://www.youtube.com/watch?v=dL3Sls_MwXo
WebPagetest Private Instances
• https://www.youtube.com/watch?v=enVpzzlhTzE
• https://www.youtube.com/watch?v=loAGkDTMjtY

Спасибо за внимание!
Контакты: nick@methodlab.info
https://www.facebook.com/nick.lavlinsky
https://habrahabr.ru/users/nickmob/
https://www.methodlab.ru/
https://www.youtube.com/channel/UCH_PvxSiuETI_ecbeAmb7_w/
(Канал «Ускорение сайтов»)
Лавлинский Николай,
технический директор «Метод Лаб»

Автоматизация тестирования клиентской производительности - Лавлинский Николай, Highload++ 2016

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Автоматизация тестирования клиентской производительности - Лавлинский Николай, Highload++ 2016

Similar to Автоматизация тестирования клиентской производительности - Лавлинский Николай, Highload++ 2016 (20)

Автоматизация тестирования клиентской производительности - Лавлинский Николай, Highload++ 2016