Марина Широчкина "Производительность клиентсайда...
DESCRIPTION
Производительность на стороне клиента богатая проблемная область. Быстрый ответ фронтенда никак не гарантирует, что страницы вашего сервиса будут грузиться с приемлемой скоростью у конечного пользователя. Оптимизации стилей и скриптов не позволяют узнать насколько они улучшили общую производительность страницы целиком. Быстрая загрузка страницы не гарантирует ее быструю отрисовку. Мы сосредоточили свои усилия на измерении скорости отрисовки страницы так, как ее видит конечный пользователь. Рассказ о причинах выбора такого подхода, его плюсах и минусах.TRANSCRIPT
руководитель группы Я.Субботник в Санкт-Петербурге, 1 декабря 2012
Производительность клиентсайда и тестирование скорости отрисовки страницы
Марина Широчкина
Откуда проблемы на клиентсайде?
3
Производительность client-‐side -‐ это
4
Даже если с server-‐side все хорошо,
5
это еще ничего не гарантирует
6
Причины медленной работы • Сетевые проблемы
• Конфигурационные проблемы • Неоптимальная верстка
7
Причины медленной работы • Сетевые проблемы
• Конфигурационные проблемы • Неоптимальная верстка
8
Причины медленной работы • Сетевые проблемы
• Конфигурационные проблемы • Неоптимальная верстка
9
Причины медленной работы • Сетевые проблемы
• Конфигурационные проблемы • Неоптимальная верстка
10
Причины медленной работы • Сетевые проблемы
• Конфигурационные проблемы • Неоптимальная верстка
Зачем нужно тестирование?
12
Best pracTces и оптимизация
13
Был ли профит?
14
Мониторинг скорости загрузки
• NavigaTon Timing h^p://www.w3.org/TR/navigaTon-‐Tming/ • Boomerang (Yahoo) h^ps://github.com/yahoo/boomerang
15
Тестирование скорости загрузки
• WebPageTest h^p://www.webpagetest.org/ • Selenium + BrowserMobProxy+HarStorage h^p://code.google.com/p/selenium/ h^ps://github.com/webmetrics/browsermob-‐proxy h^ps://github.com/pavel-‐paulau/harstorage
Что выбрали мы?
17
Чего хотели мы:
• полный комплект браузеров
18
Чего хотели мы:
• полный комплект браузеров • эмулирование сетевых условий
19
Чего хотели мы:
• полный комплект браузеров • эмулирование сетевых условий • измерять не только сетевые метрики
20
Отрисовка
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Tme(PageStartPaint) = 1880мс
38
Tme(PageEndPaint) = 7140мс
39
В числах и в сравнении
40
Tme(ElementStartPaint)/Tme(ElementEndPaint)
Как получилось?
42
Это работает. Вы даже могли об этом слышать.
http://bit.ly/SjS0FQ
http://bit.ly/ViTiW1
43
Минус N 1 Дорого – пришлось сделать инструмент
44
Минус N 2 Подход «сверху вниз»
User
Layout
Browser
Client’s computer
Network
Server-‐side
45
Плюсы Новые метрики и взгляд с нового ракурса
46
Бывает всякое – проблемы в Chrome
47
Бывает всякое – отрисовка на горячем кеше не всегда быстрее
48
Бывает всякое
49
Все меняется
Коротко об инструменте
51
Доступные условия:
52
Доступные условия: прогрев и очистка
DNS cache Files cache
Cookies
LocalStorage AppCache
53
Доступные условия:
RTT Bandwidth
Packet loss
54
Сценарий теста прост
55
Сырые данные: захват изображения (100 fps±)
56
Сырые данные: запись дампа трафика
57
Обработка данных: конвертация в HAR
58
Обработка данных: извлечение области viewport
59
Обработка данных: удаление соседних дубликатов
60
Обработка данных: удаление единичных циклических аномалий
61
Обработка данных: работа с масками
62
Обработка данных: отчет в формате csv
63
Работа продолжается..
64
Open source? Поговорим в 2013 году
Вопросы?
