2learn

Измерение и диагностика

Что это такое

Измерение — это сбор чисел, описывающих настоящие визиты. Диагностика — поиск конкретного запроса, скрипта или элемента, ответственного за плохое из них. Это разные занятия: полевая панель сообщает, что показатель проваливается на телефонах Android среднего класса, а запись производительности сообщает, какой из ваших скриптов вредит.

Почему это важно

Работа над производительностью без измерений превращается в список суеверий: минифицировать всё, откладывать каждый скрипт, добавить preload, надеяться. Она же становится и незащитимой, потому что никто не может сказать, помогла ли она. Дисциплина из двух шагов — установите число, найдите причину, измените одно, перемерьте — заставляет усилие сходиться. Она же мешает изменению, которое улучшает один показатель, тихо портить другой. А это достаточно обычно, чтобы повторное измерение не было необязательным.

Ключевые идеи

Полевые и лабораторные данные отвечают на разные вопросы

Полевые данные приходят из настоящих сессий, агрегируются со временем и говорят, плохо ли пользователям — по классу устройства, соединению и странице. Лабораторные данные приходят из контролируемого прогона и говорят, что можно улучшить и примерно почему. Полем решают, чем заняться; лабораторией выясняют, почему.

Начинайте с устройства пользователя, а не своего

Сегментируйте полевые данные по устройству и соединению. Страница, удобная на быстром ноутбуке, может сильно проваливаться на нижней половине парка устройств, а именно эта половина и уходит. Если полевых данных нет, ограничьте CPU и сеть в лаборатории, чтобы приблизиться к ним.

Водопад показывает порядок, а flame chart — стоимость

Сетевой водопад отвечает на вопрос «что блокировало что и когда», и именно там видны ресурсы, которые блокируют отрисовку, и поздние находки. Дорожка основного потока в записи производительности отвечает на вопрос «что было дорого», и там видны долгие задачи, лишние перекомпоновки и чрезмерный объём скриптов. Вместе они объясняют почти любой провал показателя.

Водопад:        html  →  css (блокирует отрисовку)  →  главное изображение (поздно)  →  app.js
Основной поток: [ долгая задача 420мс ] ... [ действие ] [ 180мс до отрисовки ]

Читать запись в том порядке, в каком её прожил браузер, а не в том, в каком написан код, и есть весь навык.

Меняйте одно и перемеряйте

Два изменения сразу дают результат, который невозможно ничему приписать, и вдобавок одно из них могло сделать хуже. Держите протокол измерения неизменным — тот же профиль устройства, та же страница, тот же маршрут, в идеале среднее нескольких прогонов, — чтобы разницей было изменение, а не погода.

Задайте бюджет и следите за ним в конвейере

Бюджет производительности — число, на котором падает сборка: килобайты JavaScript, предельный размер самого большого изображения, порог лабораторного показателя. Без него каждая функция добавляет понемногу, и никто не замечает, пока страница не станет достаточно медленной для отдельного проекта.

Остерегайтесь измерять только первый визит

Повторный визит со всем закэшированным куда быстрее холодного старта, а настоящая аудитория — смесь того и другого. Измеряйте холодную загрузку с пустым кэшем, а тёплый случай проверяйте отдельно, не усредняя их в число, которое не описывает ни то, ни другое.

Практика

Найдите единственную причину одного плохого показателя

Запишите загрузку страницы с ограниченными CPU и сетью. Определите единственный ресурс или задачу, ответственные за худший показатель, и выпишите доказательства.

Готово, когда: вы показываете конкретный запрос или конкретную функцию с её длительностью, а не описываете область в общем.

Внесите изменение и докажите его

Примените одно исправление найденной причины, затем повторите то же самое измерение.

Готово, когда: показатель сдвинулся в ожидаемую сторону, вы можете назвать величину сдвига, а остальные показатели не изменились или стали лучше.

Частые ошибки

  • Оптимизация без базовой линии — узнать, помогло ли изменение, неоткуда; исправить: сначала запишите число в тех же условиях.
  • Несколько изменений сразу — результат нельзя приписать, и регрессия прячется внутри улучшения; исправить: одно изменение на измерение.
  • Доверие единственному лабораторному прогону — разброс между прогонами велик; исправить: повторяйте и сравнивайте средние или берите медиану нескольких прогонов.
  • Измерение только с тёплым кэшем — холодный старт, который большинство пользователей получает первым, вообще не измеряется; исправить: проверяйте с отключённым кэшем.
  • Игнорирование сегмента устройств — на машинах команды страница в порядке; исправить: сегментируйте полевые данные по устройству и ограничению.

Что читать дальше

Разобранные примеры

Файлы cookie аналитики ставятся только с вашего согласия. До вашего выбора ничего не загружается и никуда не отправляется.