Профилирование веб-приложений в современных условиях

Слайды доклада с DevFest 2016

Transcript

1. Профилирование веб- приложений в современных условиях Олег Федосеев, руководитель отдела backend-разработки @olegfedoseev o.fedoseev@office.ngs.ru
2. Профилирование веб- приложений в современных условиях Олег Федосеев o.fedoseev@office.ngs.ru ! olegfedoseev " olegfedoseev
3. НГС.ТЕХНОЛОГИИ
4. Про меня • Руководитель backend разработки в НГС.ТЕХНОЛОГИИ • Ведущий архитектор N1.RU • Пишу код более 8 лет • Последние пару лет пишу не только код :)
5. Краткий план • Почему производительность важна? • Что влияет на скорость загрузки? • Как это всё измерить? • Как использовать WebPageTest?
6. Краткий план • Почему производительность важна? • Что влияет на скорость загрузки? • Как это всё измерить? • Как использовать WebPageTest?
9. Скорость интернета 1 kbit/s в 1988 100 mbit/s в 2016
10. wpostats.com • По данным Google DoubleClick, 53% мобильных 
 пользователей уходят после 3-х секунд ожидания • Сайты, загружающиеся за 5 секунд, получают в 2 раза больше прибыли, чем загружающиеся за 19 секунд • Сократив время загрузки на 36%, AliExpress получил +10% заказов и +27% конверсий на новых пользователей
11. Производительность сайта - это важное конкурентное преимущество бизнеса
12. Краткий план • Почему производительность важна? • Что влияет на скорость загрузки? • Как это всё измерить? • Как использовать WebPageTest?
13. Что влияет на загрузку страницы?
14. Что влияет на загрузку страницы? • Скорость канала
15. Что влияет на загрузку страницы? • Скорость канала • Качество канала
16. Что влияет на загрузку страницы? • Скорость канала • Качество канала • Количество запросов
17. Что влияет на загрузку страницы? • Скорость канала • Качество канала • Количество запросов • Сложность контента
18. Краткий план • Почему производительность важна? • Что влияет на скорость загрузки? • Как это всё измерить? • Как использовать WebPageTest?
19. Как измерять производительность сайта?
20. Navigation Timing API • Информация об основном запросе • Поддержка всех браузеров* https://www.w3.org/TR/navigation-timing/
21. Resource Timing API • Информация о запросах к ресурсам • Поддержка всех основных браузеров* https://www.w3.org/TR/resource-timing/
22. Данные из API
23. Сбор метрик • Самостоятельно • Яндекс.Метрика • Google Analytics • NewRelic • Любой сервис с поддержкой RUM (Real User Monitoring)
24. Проблемы RUM (Real User Monitoring) • Очень высокая вариативность и неконтролируемые условия • Мало информации об окружении • Очень скромный набор данных • Неполный охват клиентов
25. RUM vs. Synthetic Monitoring • Повторяемость • Контролируемое окружение • Информация о потребляемых ресурсах • Поддержка разных устройств • Возможность использовать для приватных ресурсов
26. Краткий план • Почему производительность важна? • Что влияет на скорость загрузки? • Как это всё измерить? • Как использовать WebPageTest?
27. WebPageTest.org • Создан в ~2008 году в AOL • Развивается и поддерживается Google • Поддерживает Chrome, Firefox, IE, Safari • Есть экспериментальная поддержка для Android и iOS • Написан на PHP и C++ https://github.com/WPO-Foundation/webpagetest Patrick Meenan ! patmeenan
29. Схема работы Агент 1 (C++) Агент 2 (C++) Агент 3 (C++)
30. Схема работы Агент 1 (C++) Агент (Node.js) Агент N (C++)
31. Возможности WebPageTest • Тонкая настройка клиента и его поведения • Запись видео, tcpdump, Timeline’а, Chrome Trace’а и т.д. • Блокировка отдельных доменов • Эмуляция мобильных устройств (Chrome) • Тестовые скрипты
32. Результаты теста
34. Speed Index
35. Speed Index
36. Speed Index
37. Speed Index
38. Speed Index
39. Статистика по запросу
40. Информация о выполнении JS
43. Мониторинг производительности https://grafana.wikimedia.org/dashboard/db/performance-metrics https://wikitech.wikimedia.org/wiki/WebPageTest
44. Как это делаем мы Самара Челябинск Новосибирск
45. Заключение • Измеряйте производительность правильно • Установите бюджет производительности • Отслеживайте как меняется производительность • Делайте ваши сайты быстрыми!
46. Рекомендуемая литература
47. Спасибо! Вопросы? Олег Федосеев o.fedoseev@office.ngs.ru ! olegfedoseev # olegfedoseev " olegfedoseev