Миграция кода с FID на INP

First Input Delay (FID) — метрика, измеряющая задержку первого взаимодействия пользователя с веб-страницей. FID фиксирует время между первым действием пользователя (например, клик или нажатие клавиши) и моментом, когда браузер фактически способен обработать это событие. Основное ограничение FID — он учитывает только первое взаимодействие, игнорируя последующие действия на странице. Это создаёт неполную картину интерактивности, особенно на страницах с динамическим контентом и длительной загрузкой скриптов.

Interaction to Next Paint (INP) — новая метрика Web Vitals, призванная заменить FID. INP учитывает все пользовательские взаимодействия на странице, измеряя задержку реакции на каждое событие и вычисляя медианное или максимальное значение для всех взаимодействий. Такой подход позволяет получить более точную и репрезентативную оценку интерактивности страницы. INP измеряет:

  • задержку ввода (input delay),
  • задержку отрисовки следующего кадра (next paint),
  • и суммарное время реакции на события в течение жизненного цикла страницы.

Мотивация перехода с FID на INP

  • Полная оценка интерактивности: FID фиксирует только первое взаимодействие, а INP охватывает все события, что позволяет точнее выявлять узкие места.
  • Более надежные показатели для SPA: На одностраничных приложениях первый ввод не всегда отражает реальные задержки при работе с динамическим контентом.
  • Соответствие современным стандартам Web Vitals: Google рекомендует использовать INP в качестве основной метрики интерактивности.

Подключение библиотеки Web Vitals для измерения INP

Для работы с метриками используется официальная библиотека web-vitals. Установка через npm или yarn:

npm install web-vitals
# или
yarn add web-vitals

Импорт необходимых функций:

import { getFID, getINP } from 'web-vitals';

Сбор и обработка данных INP

INP предоставляет объект события с ключевыми свойствами:

  • value — задержка события в миллисекундах.
  • id — уникальный идентификатор события.
  • entries — массив всех наблюдаемых событий с их детализацией.

Пример использования:

getINP(metric => {
  console.log('INP value:', metric.value);
  console.log('Event entries:', metric.entries);
});

Особенности обработки:

  • Для оценки производительности рекомендуется хранить не только значение, но и отдельные записи событий (entries) для анализа узких мест.
  • Можно отправлять данные на сервер для долгосрочного мониторинга сессий пользователей.

Миграция существующего кода с FID на INP

Исходный код с FID:

getFID(metric => {
  console.log('FID value:', metric.value);
});

Преобразованный код с INP:

getINP(metric => {
  console.log('INP value:', metric.value);
  metric.entries.forEach(entry => {
    console.log('Interaction type:', entry.name, 'Duration:', entry.duration);
  });
});

Важные изменения:

  1. Обработка нескольких взаимодействий: теперь каждая запись (entry) имеет длительность и тип события.
  2. Статистика для страницы: INP возвращает медианное или максимальное значение, что позволяет выявлять проблемные участки.
  3. Совместимость с аналитикой: старые механизмы сбора FID могут использоваться для отправки данных, достаточно лишь заменить getFID на getINP.

Советы по оптимизации взаимодействия

  1. Минимизировать блокирующие скрипты: долгие задачи в основном потоке увеличивают INP.
  2. Использовать асинхронную загрузку ресурсов: async и defer для скриптов уменьшают задержку интерактивности.
  3. Делить работу на мелкие задачи: использование requestIdleCallback или setTimeout для тяжелых операций снижает влияние на общую метрику.
  4. Оптимизировать обработчики событий: события с длительной обработкой напрямую увеличивают INP.

Пример комплексного сбора INP с аналитикой

import { getINP } from 'web-vitals';

function reportINPToAnalytics(metric) {
  const data = {
    value: metric.value,
    entries: metric.entries.map(entry => ({
      name: entry.name,
      duration: entry.duration,
      startTime: entry.startTime
    }))
  };
  fetch('/analytics', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
}

getINP(reportINPToAnalytics);

Преимущества такой реализации:

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

Практические различия между FID и INP

Метрика Измеряет Преимущество Ограничение
FID Первое взаимодействие Простая реализация Игнорирует последующие события
INP Все взаимодействия Репрезентативная интерактивность Немного более сложная обработка

Переход на INP позволяет перейти от оценки лишь первого впечатления пользователя к объективной оценке всей интерактивности страницы, что критично для современных веб-приложений с динамическим контентом.

Оглавление