Отладка INP в DevTools и трассировке

INP (Interaction to Next Paint) измеряет время отклика страницы на пользовательские взаимодействия и фиксирует задержку до следующего визуального обновления. Этот показатель особенно важен для оценки реальной отзывчивости интерфейса.

Инструменты для измерения INP

  1. Web Vitals JavaScript API Подключение библиотеки web-vitals позволяет программно отслеживать INP. Пример кода:
import { getINP } from 'web-vitals';

getINP((metric) => {
  console.log('INP value:', metric.value);
  console.log('INP entries:', metric.entries);
});
  • metric.value — числовое значение задержки в миллисекундах.
  • metric.entries — массив событий EventTiming, которые вызвали задержку.

  1. Chrome DevTools Performance Panel Для глубокой отладки INP следует использовать вкладку Performance:

    • Включить запись профиля с опцией “Enable advanced paint instrumentation”.
    • Зафиксировать интеракцию (клик, прокрутку, ввод текста) и остановить запись.
    • В панели Experience будет отображено событие Interaction to Next Paint, которое показывает, сколько времени прошло от пользовательского события до следующего кадра рендеринга.

Анализ событий INP

Типичные причины высокой задержки:

  • Долгие задачи JavaScript (Long Tasks) > 50 мс.
  • Блокирующие рендеринг стили и шрифты.
  • Обширные операции с DOM, особенно при больших списках или таблицах.
  • Сложные анимации без использования requestAnimationFrame.

Использование Event Timing API для диагностики:

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'event') {
      console.log('Event type:', entry.name);
      console.log('Duration:', entry.duration);
      console.log('StartTime:', entry.startTime);
    }
  }
}).observe({ type: 'event', buffered: true });
  • entry.name — название события (click, keydown, input).
  • entry.startTime — момент начала события относительно загрузки страницы.
  • entry.duration — задержка обработки события, напрямую влияющая на INP.

Трассировка и поиск узких мест

  1. Запись трассировки (Tracing)

    • Открыть DevTools → Performance → Record → выполнить действия.
    • Сохранить .json файл трассировки для анализа.
    • Использовать панель Experience → INP, чтобы выделить длинные задачи.

  2. Детальный анализ с Long Tasks

    • В панели Main Thread ищутся задачи длительностью >50 мс.

    • Каждое событие, связанное с INP, можно разложить на:

      • Событие DOM.
      • Callback JavaScript.
      • Рендеринг и композитинг.

    • Выявляются блокировки, которые задерживают визуальный отклик.

  3. Применение фильтров по Event Timing

    • Фильтровать события по типу (click, keydown).
    • Выявлять повторяющиеся узкие места.
    • Проверять влияние сторонних скриптов на задержку INP.

Оптимизация на основе данных INP

  • Разделение длинных задач на микротаски через setTimeout или requestIdleCallback.
  • Ленивая загрузка неважных скриптов и компонентов.
  • Использование виртуализации списков для больших DOM-структур.
  • Минимизация синхронных операций в обработчиках событий.

Интеграция Web Vitals с DevTools

  • Можно включить экспериментальный флаг Web Vitals in DevTools:

    • Открыть chrome://flags/#web-vitals-in-devtools.
    • Активировать отображение INP прямо на панели Performance.

  • Это позволяет сопоставить значения INP с конкретными событиями и визуальными кадрами, ускоряя процесс оптимизации.

Практические советы

  • Сохранять трассировки для разных сценариев пользовательских действий: клик, скролл, ввод.
  • Сравнивать INP на мобильных устройствах, где задержки часто выше.
  • Анализировать как сторонние библиотеки влияют на основное взаимодействие.
  • Применять фильтры по длительным задачам и событиям с высокой задержкой для локализации узких мест.

Хотя INP измеряется автоматически, глубокая отладка с использованием DevTools и Event Timing позволяет выявлять конкретные узкие места и принимать целевые меры для улучшения отзывчивости страницы.

Оглавление