Интерактивность страницы: метрики отклика на действия

Прямой ответ

Метрики интерактивности описывают задержку между действием пользователя и откликом страницы. Различие метрик — в том, какое действие измеряется и что считается откликом.

new PerformanceObserver((list) => {
  for (const e of list.getEntries()) {
    if (e.duration > 50) {
      console.log('долгая задача', e.startTime, e.duration);
    }
  }
}).observe({ type: 'long-animation-frame', buffered: true });

Отклик на следующее взаимодействие учитывает все действия за сеанс, поэтому отражает опыт пользователя в течение работы со страницей, а не только первое действие. О совокупности метрик скорости — в статье про Core Web Vitals.

Различие метрик и что определяет задержку

Две метрики описывают разные аспекты интерактивности, поэтому оптимизация направляется на соответствующую причину.

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

Отклик на следующее взаимодействие измеряет задержку от действия до следующей отрисовки. Задержка определяется длительностью обработки действия и отрисовки, поэтому сокращается разделением длительной работы.

Практическое следствие: оптимизация первого ввода направлена на загрузку, оптимизация отклика — на обработку действий в течение сеанса.

Отдельный аспект — длительные задачи. Основной поток обрабатывает задачи последовательно, поэтому длительная задача задерживает обработку действия, начатого во время её выполнения. Разделение работы на части сокращает задержку.

Три признака высокой задержки отклика.

Длительная задача при обработке действия. Обработчик выполняет объёмную работу синхронно, поэтому отрисовка откладывается.

Отрисовка большого объёма содержимого. Изменение затрагивает много элементов, поэтому расчёт макета занимает длительное время.

Скрипт, блокирующий основной поток при загрузке. Действие, начатое во время загрузки, обрабатывается после завершения работы скрипта.

О метриках отрисовки — в статье про FCP и LCP; об объёме загружаемого кода — в статье про размер бандла.

Способы сокращения задержки и эксплуатационные ограничения

Сокращение задержки достигается разделением работы и сокращением объёма отрисовки, при этом оба способа имеют ограничения.

Разделение длительной работы. Объёмная задача делится на части, между которыми основной поток освобождается, поэтому действие обрабатывается без ожидания завершения всей работы.

Сокращение объёма отрисовки. Изменение затрагивает меньшее число элементов, поэтому расчёт макета выполняется быстрее.

Отложенная работа при загрузке. Работа, не требуемая для первого взаимодействия, откладывается, поэтому основной поток освобождается раньше.

Практическое следствие: задержка сокращается освобождением основного потока в моменты, когда пользователь может выполнить действие.

Отдельный аспект — измерение. Метрика отклика рассчитывается по распределению задержек за сеанс, поэтому единичное быстрое действие не отражает опыт пользователя. Значение берётся по верхней границе распределения, поэтому редкие длительные задержки влияют на результат.

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

Влияние объёма кода на задержку отклика

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

Выполнение скрипта при загрузке. Объёмный скрипт выполняется дольше, поэтому действие, начатое во время выполнения, ожидает освобождения основного потока.

Инициализация компонентов. Каждый компонент выполняет работу при подключении, поэтому суммарное время инициализации растёт с числом компонентов.

Отложенная инициализация. Компоненты, не требуемые для первого взаимодействия, инициализируются позже, поэтому основной поток освобождается раньше.

Практическое следствие: сокращение объёма кода, выполняемого при загрузке, сокращает задержку обработки первых действий. О составе сборки — в статье про размер бандла.

Практика: сокращение задержки отклика

1. Определите длительные задачи. Наблюдатель показывает задачи, превышающие порог длительности, поэтому работа направлена на конкретные места.

2. Разделите объёмную работу на части. Между частями основной поток освобождается, поэтому действие обрабатывается без ожидания.

3. Сократите объём отрисовки при действии. Изменение меньшего числа элементов сокращает время расчёта макета.

4. Отложите работу, не требуемую сразу. Основной поток освобождается раньше, поэтому первое действие обрабатывается быстрее.

5. Проверяйте распределение задержек. Единичное быстрое действие не отражает опыт пользователя в течение сеанса.

6. Измеряйте на полевых данных. Лабораторные условия не отражают последовательность действий реального пользователя.

7. Пересматривайте при добавлении функциональности. Новый обработчик может выполнять объёмную работу, поэтому задержка растёт.

Рекомендации:

1. Различайте задержку первого ввода и отклик на действия. Первая определяется загрузкой, вторая — обработкой действий в течение сеанса.
2. Учитывайте длительность задачи. Задача, превышающая порог, задерживает обработку действия, начатого во время её выполнения.
3. Проверяйте верхнюю границу распределения. Редкие длительные задержки влияют на метрику, поэтому среднее значение не отражает опыт.
4. Не оптимизируйте по единственному действию. Метрика рассчитывается по последовательности действий за сеанс.
5. Пересматривайте при изменении состава обработчиков. Добавление обработчика с объёмной работой увеличивает задержку.

Практический сценарий: отклик на действия был медленным после загрузки

Контекст: страница загружалась быстро, но первые действия пользователя обрабатывались с заметной задержкой.

1. Диагностика. Наблюдатель показал длительную задачу, выполняемую сразу после загрузки. Действие, начатое во время выполнения задачи, обрабатывалось после её завершения, поэтому задержка составляла несколько сотен миллисекунд.
2. Причина. Работа, не требуемая для первого взаимодействия, выполнялась синхронно при загрузке. Основной поток был занят, поэтому действие ожидало освобождения.
3. Действия. (а) Определили длительную задачу и работу, которую она выполняла; (б) разделили работу на части с освобождением основного потока между ними; (в) отложили часть работы, не требуемую для первого взаимодействия; (г) сократили объём отрисовки, выполняемой в обработчике действия; (д) измерили распределение задержек на полевых данных после изменения.
4. Результат. Задержка обработки действий сократилась, поскольку основной поток освобождается между частями работы.

Вывод: длительная задача при загрузке задерживает обработку действий, начатых во время её выполнения. Разделение работы и отложение некритичной части освобождают основной поток и сокращают задержку отклика.

FAQ

Чем различаются метрики интерактивности? Задержка первого ввода измеряет время до начала обработки первого действия, отклик на следующее взаимодействие — задержку всех действий до следующей отрисовки.

Почему страница загружается быстро, а действия обрабатываются медленно? Основной поток занят длительной задачей после загрузки, поэтому действие, начатое во время её выполнения, ожидает освобождения потока.

Как сократить задержку отклика? Разделением объёмной работы на части с освобождением основного потока и сокращением объёма отрисовки в обработчике действия.

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

Источники: web.dev INP, MDN PerformanceEventTiming, web.dev long animation frames — ссылки в шапке.