Клиентская производительность – бесконечный процесс. Разрабатываются новые фичи, меняется дизайн, технологии, браузеры – контролировать скорость нужно постоянно. В этих условиях требуется автоматизированный процесс тестирования скорости клиентской части приложения. При этом тестировать нужно в настоящих браузерах, в максимально похожем на реальность окружении. В этом докладе будем говорить о том, как совместить все эти требования и не потратить много месяцев на построение собственного "велосипеда". Предлагается рабочее решение задачи с использованием open source решения WebPagetest Private Instance. Рассмотрим основные достоинства и проблемы решения, а также способы использования этого инструмента.

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

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

3. 1. Задача

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

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

6. 2. Средства

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

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

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

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

14. 4. WebPagetest
Private Instance

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

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

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

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

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

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

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

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

24. RESTful API
(JSON, XML)

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

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

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

28. Результаты тестов
• $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};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

55. Что посмотреть
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

56. Спасибо за внимание!
Контакты: 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/
(Канал «Ускорение сайтов»)
Лавлинский Николай,
технический директор «Метод Лаб»