INP / Interaction to Next Paint

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

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

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

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

Взаимодействие - это группа обработчиков событий, которые запускаются во время одного и того же логического жеста пользователя. Например, взаимодействия "коснитесь" на устройстве с сенсорным экраном включают в себя несколько событий, таких как pointerup, pointerdown и click . Взаимодействие может осуществляться с помощью JavaScript, CSS, встроенных элементов управления браузера (таких как элементы формы) или их комбинации.

В рамках INP отслеживаются только следующие типы взаимодействия: нажатие мышью. Нажатие на устройстве с сенсорным экраном. Нажатие клавиши на физической или экранной клавиатуре.

Значение INP ниже или на уровне 200 миллисекунд означает, что страница имеет хорошую скорость отклика. Рекомендуется ориентироваться на значение 75-ти процентного показателя, отдельно рассчитанного для мобильных и десктопных устройств.

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

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

Страница может не возвращать значение INP. Это может произойти по ряду причин, включая следующие:

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

Лучший способ измерить INP вашего сайта — собрать показатели от реальных пользователей. 

Как прокачать INP:

• Разбиение больших скриптов на более мелкие
• Использование Web Workers для тяжелых вычислений
• Применение requestIdleCallback
• Удаление неиспользуемого кода
• Минимизация операций с DOM
• Использование document.createDocumentFragment()
• Применение Virtual DOM (например, React)
• Использование CSS-анимаций вместо JavaScript
• Применение will-change для оптимизации отрисовки
• Работа с композиционными свойствами
• Асинхронная загрузка некритичных скриптов
• Использование defer для важных скриптов
• Минификация и объединение файлов
• Использование Service Workers
• Кэширование часто используемых ресурсов
• Оптимизация сетевых запросов