Download to read offline
![Добавляем кастомные метрики
• Для одного запуска (параметр custom)
[iframe-count]
return document.getElementsByTagName("iframe").length;
[script-tag-count]
return document.getElementsByTagName("script").length;
• Постоянные метрики (в settings/custom_metrics/iframe-count.js)](https://image.slidesharecdn.com/4-161115190242/85/slide-46-320.jpg)
Uploaded byOntico
Автоматизация тестирования клиентской производительности / Николай Лавлинский (Метод Лаб)
Документ описывает автоматизацию тестирования клиентской производительности, акцентируя внимание на важности выявления проблем до релиза кода и необходимости использования специализированных инструментов, таких как WebPageTest. Он делится практическими примерами применения автоматизации, такими как оптимизация времени загрузки и рендеринга, а также обсуждает типичные проблемы и их решения. Также представлены различные метрики для оценки производительности веб-сайтов и рекомендации по их использованию.
More Related Content
Similar to Автоматизация тестирования клиентской производительности / Николай Лавлинский (Метод Лаб)
![Web performance 101 [GDG nsk webdev meetup #3]](https://cdn.slidesharecdn.com/ss_thumbnails/gdg-web-pref-170821085937-thumbnail.jpg?width=640&height=640&fit=bounds)
Автоматизация тестирования клиентской производительности / Николай Лавлинский (Метод Лаб)
- 1.
- 2. О себе • Клиентскаяи серверная оптимизация • Консультации • Ускорение сайтов • Пропаганда скорости
- 3.
- 4. Зачем автоматизация? • Кодприложения меняется • Выявлять проблемы до релиза кода • Ручное тестирование не подходит • Контролируемое окружение • Бюджет
- 5. Что мы хотимзнать • Время загрузки • Время рендеринга • Различие для состояния кэша • Влияние сети • Нет ли деградации? • Есть ли проблемы конфигурации?
- 6.
- 7.
- 8.
- 9.
- 13. Patrick Meenan • Главныйразработчик WebPagetest • Патриарх движения веб-производительности • Много полезных видео о WPT: https://www.youtube.com/user/patmeenan/videos
- 14.
- 16. WebPagetest Private Instance •То же, но на своей инфраструктуре • Полный контроль • Есть поддержка агентов на Amazon EC2 • Open source (BSD): https://github.com/WPO-Foundation/webpagetest
- 17. Location 1 Как этоработает WPT PI сервер Тестовый агент (Windows) Тестовый агент (Windows)
- 18. Что мы получаемиз коробки • Параметры сети • Chrome, Firefox, IE • Сбор метрик • Сбор скриншотов и видео • Очистка кэша (включая SSL, DNS)
- 19. Тестирование на мобильных устройствах •Есть поддержка Android 4.4+ (Chrome) • Есть поддержка iOS (сырая) • Слабо документировано • Проблемы стабилизации • Заменяем на эмуляцию + ограничение CPU
- 20. Intel Core I5-6400vs. Samsung Galaxy S5 4 cores, 2.7 Ghz 4 cores, 2.5 Ghz
- 21. Результаты i5 vs.S5 0 500 1000 1500 2000 2500 i5-6400 Galaxy S5 DOMContentLoaded, ms Load time, ms
- 22. Результаты i5 vs.S5 0 50 100 150 200 i5-6400 Galaxy S5 Evaluate script jQuery 3.1, ms Evaluate script jQuery 3.1, ms
- 23.
- 24.
- 25. Компоненты системы • Очередьзаданий с сохранением статусов • Сервер WPT PI • Обработчик результатов Очередь заданий WPT PI сервер Тестовый агент (Windows 7) Обработчик результатов
- 26. Сценарий использования • Точкивхода • Бюджет (эталон) • Тесты • Сравнение результатов • Если проблема – alert • Прикладываем URL WPT • Исправляем
- 27. Запрос на тестирование •POST-запрос на http://wptdomain/runtest.php • url — что тестировать • location — тестовый агент (включая браузер и сеть) • runs — количество тестов • fvonly – тестировать только FirstView • video — захват скриншотов и видео • f — формат данных (XML или JSON)
- 28. Результаты тестов • $ttfb= $result->{data}{median}{firstView}{TTFB}; • $render = $result->{data}{median}{firstView}{render}; • $loadtime = $result->{data}{median}{firstView}{loadTime}; • $full_load = $result->{data}{median}{firstView}{fullyLoaded};
- 29.
- 30. Ситуация №1 –конфигурация и контент • Текст отдаётся без сжатия • Статика не кэшируется • Нет keep-alive • Настройки TLS? • Картинки не оптимизированы
- 31. Метрики WPT —оптимизация minify_savings, gzip_savings, image_savings (JSON) Осторожно: image_savings рассчитывается от JPEG-качества ~70%, уровень сжатия gzip не учитывается Можно дополнить оценкой GPSI (png, gif, jpg)
- 32. Метрики WPT —трафик по типам breakdown→(css|html|js|font|image)->bytes (JSON)
- 33. Метрики WPT —полная загрузка Fully Loaded (fullyLoaded — JSON) – измеряется WPT Fully Loaded Bytes In (bytesIn — JSON) bytesOut (JSON)
- 34. Ситуация №2 –блокировка рендеринга • Синхронный внешний JS в <head> • CSS • Шрифты
- 35. Метрики WPT —рендеринг Start Render (render — JSON) – измеряется WPT RUM Furst Paint (firstPaint — JSON) —вычисляется браузером
- 36. Ситуация №3 –сложный случай
- 39. Метрики WPT —Speed Index Speed Index (SpeedIndex — JSON) – чем меньше, тем лучше 𝑆𝑝𝑒𝑒𝑑𝐼𝑛𝑑𝑒𝑥 = 0 𝑒𝑛𝑑 1 − 𝑉𝐶 100
- 40. Ситуация №4 –зависимость от внешних API • Нет стабильности результатов • Внешние ресурсы (JS API, счетчики, виджеты) Решение • Блокируем запросы по хостам • Параметр block (хосты через пробел) • Локальный кэш
- 42. Ситуация №5 –CPU-bound • Большое количество DOM-элементов, JS • Сложный рендеринг Решение • Снимаем ограничение сети • Увеличиваем количество прогонов
- 43. Метрики WPT —CPU docCPUms (JSON) — затраты CPU на частичную загрузку fullyLoadedCPUms (JSON) — затраты CPU на полную загрузку docCPUpct, fullyLoadedCPUpct (JSON) – средний процент CPU cpuTimes, cpuTimesDoc (JSON) – время CPU из DevTools timeline
- 44. Метрики WPT -DOM domContentLoadedEventStart, domContentLoadedEventEnd (JSON) – начало и конец события domContentLoaded
- 45. Метрики WPT —load event Load Time (loadTime — JSON) – время до начала события load Включает в себя время TTFB (First Byte). Чтобы исключить, можно использовать: loadTime — TTFB
- 46. Добавляем кастомные метрики •Для одного запуска (параметр custom) [iframe-count] return document.getElementsByTagName("iframe").length; [script-tag-count] return document.getElementsByTagName("script").length; • Постоянные метрики (в settings/custom_metrics/iframe-count.js)
- 47. Проблемы WPT PI(1) Нестабильность результатов • увеличение количества прогонов • использование медианного варианта теста • оптимизация Windows тестового агента • расположение агента рядом с приложением • блокирование запросов на внешние сервисы
- 48. Проблемы WPT PI(2) Ресурсоёмкость проведения тестов • Распределяем нагрузку на несколько агентов (сами) • Меняем настройки тестов (убираем захват видео, количество прогонов, скорость сети) Безопасность и обслуживание • Обновление агентов (обязательно, регулярно) • Обновление Windows • Мониторинг (зависшие агенты — перезагрузка)
- 49. Подходит • Внутренний мониторингскорости • Сравнение с конкурентами • Тестирование изменений, технологий • Оценка уровня оптимизации
- 50. Не подходит • Тестированиемикроизменений (до 200 мс) • Тестирование серверной производительности • Нагрузочное тестирование, эмуляция действий реальных пользователей
- 51.
- 52. Ускорениесайта.рф • Сервис тестированияскорости сайтов • WPT PI + GPSI • Отчет на e-mail • 16 метрик (13+2+1) • Трудозатраты: около 40 часов
- 53. Схема: уcкорениесайта.рф Очередь WPT PI сервер WPTагент Google Pagespeed API Отчет (e-mail) Обработчик (cron)
- 54. Выводы • Рабочее готовоерешение • Автоматизируем рутину • Несколько вариантов использования • Возможность расширения
- 55. Что посмотреть WebPagetest PowerUsers • https://www.youtube.com/watch?v=6UeRMMI_IzI • https://www.youtube.com/watch?v=euVYHee1f1M Custom metrics • http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user-experience.html Tracking Performance • https://www.youtube.com/watch?v=BAWpwmln6y4 DIY Synthetic - Private WebPagetest Magic • https://www.youtube.com/watch?v=dL3Sls_MwXo WebPagetest Private Instances • https://www.youtube.com/watch?v=enVpzzlhTzE • https://www.youtube.com/watch?v=loAGkDTMjtY
- 56. Спасибо за внимание! Контакты:nick@methodlab.info https://www.facebook.com/nick.lavlinsky https://habrahabr.ru/users/nickmob/ https://www.methodlab.ru/ https://www.youtube.com/channel/UCH_PvxSiuETI_ecbeAmb7_w/ (Канал «Ускорение сайтов») Лавлинский Николай, технический директор «Метод Лаб»