QA Fest 2017.Александр Неделяев.Тестирование и мониторинг производительности фронтенда с помощью 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
Editor's Notes
- #7: Найти похожее
- #14: This is the super simple version, leaving out all other tools that are used: sitespeed.io gets a URL from the user Open the browser Start record a video of the screen Access the URL in the browser When the page is finished, take a screenshot of the page Run some JavaScripts to analyze the page Stop the video and close the browser Analyze the video to get metrics like FirstVisualChange and SpeedIndex Generate a HTML report and/or send the metrics to Graphite or store the metrics however you want, building your own plugin. Enjoy!
- #21: обрезать