Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Киев 2017
Первый в Украине фестиваль тестирования
Тестирование и мониторинг
производительности фронтенда
с помощью sitespe...
Киев 2017
О себе
nedeliaev@gmail.com
nedeliaev
Alexander Nedeliaev
Тестирование и мониторинг производительности фронтенда ...
Киев 2017
Почему это важно?
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Источник
Киев 2017
Почему это важно?
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Почему это важно?
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Что происходит?
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Navigation timing ...
Киев 2017
80% времени - фронтенд
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Кость широкая
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
https://browserdiet....
Киев 2017
Об ожирении фронтенда
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Оригинальная...
Киев 2017
Нам нужен фитнес-трекер
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Что измерять
• BackEndTime
• FrontEndTime
• First Visual Change
• Last Visual Change
• FullyLoaded
• Speed Index...
Киев 2017
Цели
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Единоразовое измерение
Постоя...
Киев 2017
Наш выбор
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Sitespeed.io is a set of...
Киев 2017
Возможности
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Браузер
• Chrome/
Fire...
Киев 2017
Опции
Параметр Описание
-b "chrome", "firefox"
-c "3g", "3gfast", "3gslow", "2g", "cable", "native", "custom"
-n...
Киев 2017
Единоразовое измерение
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Запуск теста
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
$ docker run --rm
-v ...
Киев 2017
Dashboard
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Summary
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Waterfall
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Coach
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Browsertime
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
PageXray
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Постоянный контроль
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Continuous int...
Киев 2017
Настройка отчетов
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Постоянный контроль
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Демонстрация результатов
Скачать docker-
compose файл
Выполнить
docker-compose
up –d
Запустить тест Открыть Graf...
Киев 2017
Демонстрация результатов
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Демонстрация результатов
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Обсуждение достижений
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Create a new...
Киев 2017
Обсуждение достижений
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Киев 2017
Сравнение результатов
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
https://comp...
Киев 2017
Уточнение цели
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Performance budget
Киев 2017
Уточнение цели
Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
Performance budget
Киев 2017
Альтернативы
Бесплатные
• Google PageSpeed Insight
• YSlow
• WebPagetest.org
Платные
• New Relic
• SpeedCurve
Те...
Киев 2017
Спасибо
nedeliaev@gmail.com
nedeliaev
Alexander Nedeliaev
Тестирование и мониторинг производительности фронтенда...
Upcoming SlideShare
Loading in …5
×

QA Fest 2017.Александр Неделяев.Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

179 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

QA Fest 2017.Александр Неделяев.Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

  1. 1. Киев 2017 Первый в Украине фестиваль тестирования Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io Александр Неделяев
  2. 2. Киев 2017 О себе nedeliaev@gmail.com nedeliaev Alexander Nedeliaev Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  3. 3. Киев 2017 Почему это важно? Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io Источник
  4. 4. Киев 2017 Почему это важно? Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  5. 5. Киев 2017 Почему это важно? Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  6. 6. Киев 2017 Что происходит? Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io Navigation timing API
  7. 7. Киев 2017 80% времени - фронтенд Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  8. 8. Киев 2017 Кость широкая Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io https://browserdiet.com
  9. 9. Киев 2017 Об ожирении фронтенда Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io Оригинальная статья Перевод на Хабре
  10. 10. Киев 2017 Нам нужен фитнес-трекер Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  11. 11. Киев 2017 Что измерять • BackEndTime • FrontEndTime • First Visual Change • Last Visual Change • FullyLoaded • Speed Index Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  12. 12. Киев 2017 Цели Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io Единоразовое измерение Постоянный контроль прогресса Демонстрация результатов Обсуждение достижений Сравнение с результатами других
  13. 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. 14. Киев 2017 Возможности Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io Браузер • Chrome/ Firefox • Профиль сети • View port / User agent • Количество итераций • Запись видео Интеграция • Jenkins • Graphite • InfluxDB • Grafana • Slack • Webpagetest • Google Page Speed Insight Другое • Краулер • Android • Performance budget
  15. 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. 16. Киев 2017 Единоразовое измерение Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  17. 17. Киев 2017 Запуск теста Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io $ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io http://qafest.com Запуск
  18. 18. Киев 2017 Dashboard Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  19. 19. Киев 2017 Summary Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  20. 20. Киев 2017 Waterfall Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  21. 21. Киев 2017 Coach Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  22. 22. Киев 2017 Browsertime Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  23. 23. Киев 2017 PageXray Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  24. 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. 25. Киев 2017 Настройка отчетов Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  26. 26. Киев 2017 Постоянный контроль Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  27. 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. 28. Киев 2017 Демонстрация результатов Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  29. 29. Киев 2017 Демонстрация результатов Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  30. 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. 31. Киев 2017 Обсуждение достижений Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  32. 32. Киев 2017 Сравнение результатов Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io https://compare.sitespeed.io/
  33. 33. Киев 2017 Уточнение цели Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io Performance budget
  34. 34. Киев 2017 Уточнение цели Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io Performance budget
  35. 35. Киев 2017 Альтернативы Бесплатные • Google PageSpeed Insight • YSlow • WebPagetest.org Платные • New Relic • SpeedCurve Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io
  36. 36. Киев 2017 Спасибо nedeliaev@gmail.com nedeliaev Alexander Nedeliaev Тестирование и мониторинг производительности фронтенда с помощью sitespeed.io

×