"Ожирение' фронтенда в наши дни - заболевание очень распространенное. Пациентов с таким диагнозом мы каждый день видим в окне браузера. Как противостоять распространению 'заболевания' и контролировать 'проблемных' пациентов? В своем докладе я расскажу Вам о том, как с помощью бесплатного инструмента sitespeed.io находить проблемы производительности фронтенда на ранних этапах разработки и в продакшн среде, как мониторить производительность на постоянной основе и создавать емкие и понятные отчеты для всех участников процесса разработки и эксплуатации.

1. Киев 2017
Первый в Украине фестиваль тестирования
Тестирование и мониторинг
производительности фронтенда
с помощью sitespeed.io
Александр Неделяев

2. Киев 2017
О себе
nedeliaev@gmail.com
nedeliaev
Alexander Nedeliaev
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

3. Киев 2017
Почему это важно?
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Источник

4. Киев 2017
Почему это важно?
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

5. Киев 2017
Почему это важно?
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

6. Киев 2017
Что происходит?
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Navigation timing API

7. Киев 2017
80% времени - фронтенд
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

8. Киев 2017
Кость широкая
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
https://browserdiet.com

9. Киев 2017
Об ожирении фронтенда
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Оригинальная статья
Перевод на Хабре

10. Киев 2017
Нам нужен фитнес-трекер
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

11. Киев 2017
Что измерять
• BackEndTime
• FrontEndTime
• First Visual Change
• Last Visual Change
• FullyLoaded
• Speed Index
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

12. Киев 2017
Цели
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Единоразовое измерение
Постоянный контроль прогресса
Демонстрация результатов
Обсуждение достижений
Сравнение с результатами других

13. Киев 2017
Наш выбор
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Sitespeed.io is a set of open-source tools
that helps make your web pages faster.
https://www.sitespeed.io
$ docker pull sitespeedio/sitespeed.io

14. Киев 2017
Возможности
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Браузер
• Chrome/
Firefox
• Профиль сети
• View port /
User agent
• Количество
итераций
• Запись видео
Интеграция
• Jenkins
• Graphite
• InfluxDB
• Grafana
• Slack
• Webpagetest
• Google Page
Speed Insight
Другое
• Краулер
• Android
• Performance
budget

15. Киев 2017
Опции
Параметр Описание
-b "chrome", "firefox"
-c "3g", "3gfast", "3gslow", "2g", "cable", "native", "custom"
-n: Number of iterations
--video Enable video recording
--preScript
--postScript
Path to selenium scripts
-d How deep to crawl
-m Max number of pages to test
-mobile Access pages as on fake mobile device
-h Show help
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Конфигурация

16. Киев 2017
Единоразовое измерение
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

17. Киев 2017
Запуск теста
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
$ docker run --rm
-v "$(pwd)":/sitespeed.io
sitespeedio/sitespeed.io
http://qafest.com
Запуск

18. Киев 2017
Dashboard
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

19. Киев 2017
Summary
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

20. Киев 2017
Waterfall
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

21. Киев 2017
Coach
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

22. Киев 2017
Browsertime
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

23. Киев 2017
PageXray
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

24. Киев 2017
Постоянный контроль
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Continuous integration
Установить и
запустить
Jenkins
Создать проект
Добавить build
step
Установить
Publish HTML
Reports плагин
$ docker run --privileged --rm
-v "$(pwd)":/sitespeed.io
sitespeedio/sitespeed.io
--outputFolder output
http://qafest.com

25. Киев 2017
Настройка отчетов
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

26. Киев 2017
Постоянный контроль
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

27. Киев 2017
Демонстрация результатов
Скачать docker-
compose файл
Выполнить
docker-compose
up –d
Запустить тест Открыть Grafana
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Performance dashboard
Docker compose file
docker-compose run sitespeed.io
http://qafest.com/
--graphite.host=graphite

28. Киев 2017
Демонстрация результатов
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

29. Киев 2017
Демонстрация результатов
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

30. Киев 2017
Обсуждение достижений
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Create a new app
on api.slack.com
Activate
incoming
webhooks
Add new
webhook to
workspace
Copy webhook
url and run the
test
$ docker run --rm sitespeedio/sitespeed.io
http://qafest.com/ --slack.hookUrl
https://hooks.slack.com/services/xxx/yyy
Slack configuration

31. Киев 2017
Обсуждение достижений
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

32. Киев 2017
Сравнение результатов
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
https://compare.sitespeed.io/

33. Киев 2017
Уточнение цели
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Performance budget

34. Киев 2017
Уточнение цели
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Performance budget

35. Киев 2017
Альтернативы
Бесплатные
• Google PageSpeed Insight
• YSlow
• WebPagetest.org
Платные
• New Relic
• SpeedCurve
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

36. Киев 2017
Спасибо
nedeliaev@gmail.com
nedeliaev
Alexander Nedeliaev
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io