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

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

Transcript

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