Ключевые показатели производительности внешнего интерфейса и способы их сбора
Недавно я начал следить за тем, как приложение работает на интерфейсе.
Я был разочарован тем, сколько времени мне потребовалось, чтобы решить, какие показатели мне следует использовать, но в основном для получения этой статистики. Итак, этот пост - попытка спасти кого-то еще от таких же усилий.
Какие показатели
Они были рассчитаны с использованием нескольких различных источников, включая спецификацию CPP (политики производительности контента), а также несколько статей Контрольный список производительности FE (например, SmashingMag).
Важно помнить, что расширения браузера (например, AdBlock) могут иметь большое (обычно) негативное влияние на производительность, поэтому их отключение перед профилированием имеет решающее значение.
Я выбрал следующие показатели:
Первая значимая отрисовка
. Указывает, когда пользователь впервые видит что-то, отображаемое на странице. Это краска, следующая за макетом с высокой «значимостью макета».
Время взаимодействия
. Указывает, когда страница будет реагировать на действия пользователей, чтобы они могли взаимодействовать с объектами страницы. Взято из события DomInteractive из Navigation Timing API.
Частота кадров при взаимодействии
. Обычно на пользовательском устройстве частота обновления экрана составляет 60 кадров в секунду. Все, что отображается на экране ниже, может выглядеть дрожащим или дерганым.
Распространенной причиной низкой частоты кадров является неоптимизированный Javascript или чрезмерное чтение / запись DOM (перебивание).
Время отклика при взаимодействии
. Чем ниже это значение, тем быстрее это будет происходить для пользователя. Этот показатель не очень конкретен, так как для анимации часто предусмотрены задержки.
Сюда входит время для; щелкните- ›обработать-› растеризовать → перерисовать графическим процессором.
OnLoad завершено
Событие onLoad запускается, когда вся страница завершает загрузку / анализ / рендеринг всего. Сюда не входят активы, загружаемые асинхронно с помощью атрибутов async / defer.
Обработка DOM:
Включает анализ HTML в DOM и CSSOM, а также выполнение любого Javascript.
Отображение страницы
. Обрабатывает загрузку изображений и любых других ресурсов (шрифтов) для страницы. Чем меньше ресурсов, тем меньше это будет.
Получение этих показателей
С помощью смеси инструментов разработчика Chrome и Navigation Timing API мы можем собрать все из них, упомянутые выше. Приведенные ниже расчеты Nav Timing API можно скопировать в консоль вашего веб-сайта и запустить оттуда.
Метрическая | Как получить
Первая значимая краска | (через Chrome Devtools) Временная шкала - ›Журнал событий -› фильтр «firstMeaningfulPaint»
Время взаимодействия | (через Nav Timing API) performance.timing.domInteractive - performance.timing.navigationStart
Частота кадров взаимодействия + время отклика | (через Chrome Devtools) Временная шкала - ›запуск / щелчок / остановка (обратите внимание на зеленые и красные полосы чуть ниже шкалы времени. Зеленый - нормальная частота кадров, красный - высокая. частота кадров. Наведите курсор на полоску результата FPS).
OnLoad | (через Nav Timing API) performance.timing.loadEventEnd - performance.timing.navigationStart
Обработка DOM | (через Nav Timing API) performance.timing.domContentLoadedEventEnd - performance.timing.domLoading
Отрисовка страницы | (через Nav Timing API) performance.timing.loadEventEnd - performance.timing.domContentLoadedEventEnd
Целевые показатели, определенные отраслью
Важно измерить результаты по некоторым KPI (ключевым показателям эффективности), но вот список из нескольких общих отраслевых стандартных целей, которые помогут вам начать работу.
Первая значимая краска ‹1,25 секунды
Время взаимодействия‹ 1,5 секунды
Частота кадров взаимодействия 60 кадров в секунду
Время отклика при взаимодействии ‹100 мс
Быстрые победы
- Сделайте внешние скрипты асинхронными.
- Сделайте внешние стили media = ”print”.
- Измерьте пакет JS и его зависимости.
Я надеюсь, что эта статья была чем-то полезна, сложно понять, что важно измерить, почему и как. Но на данный момент это кажется самым безопасным вариантом.
Я знаю, что ни один из них не включает в себя способы устранения каких-либо потенциальных проблем, но об этом будет в будущем.
