Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

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

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

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

More Related Content

Slideshows for you

More from QAFest

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

Editor's Notes

  • Найти похожее
  • 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!
  • обрезать

×