Что такое новый показатель INP (Interaction To Next Paint): Все, что нужно знать

Узнайте новый показатель Core Web Vital от Google, что означает хороший INP-результат и как он может улучшить вашу общую SEO-производительность. В сфере SEO всегда хватает акронимов.

От SEO до FID и INP – это некоторые из самых распространенных терминов, с которыми вы встретитесь, когда речь идет о скорости загрузки страниц.

Появился новый показатель: INP, расшифровывающийся как Interaction to Next Paint. Он определяет, как страница реагирует на конкретные действия пользователей и измеряется с помощью лабораторных и полевых данных Google Chrome.

Что такое Interaction To Next Paint?

Interaction to Next Paint, или INP, это новый показатель Core Web Vitals , предназначенный для оценки общей задержки взаимодействия на странице в течение всего пользовательского пути.

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

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

Чем INP отличается от FID?

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

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

• Любой щелчок мыши на интерактивном элементе.
• Любое касание интерактивного элемента на любом устройстве с сенсорным экраном.
• Нажмите клавишу на физической или экранной клавиатуре.

Какое значение INP хорошее?

По данным Google, хорошее значение INP составляет примерно 200 миллисекунд или меньше. Оно имеет следующие пороговые значения:

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

Как измеряется INP?

Google измеряет INP с помощью анонимных данных из браузеров Chrome, выбирая образец из самых длинных взаимодействий, происходящих при посещении страницы пользователем.

Каждое взаимодействие состоит из нескольких фаз: время представления, время обработки и задержка ввода. Вызов ответных событий содержит общее время выполнения для всех трех фаз.

Если на странице менее 50 взаимодействий, INP учитывает взаимодействие с наихудшей задержкой; если более 50, он игнорирует самые длинные взаимодействия на каждые 50 взаимодействий.

После того, как пользователь покидает страницу, эти измерения отправляются в отчет Chrome User Experience Report (CrUX), который агрегирует данные о производительности для представления о реальных пользовательских опытах, известных как полевые данные.

Каковы распространенные причины высоких значений INP?

Понимание причин высоких значений INP является ключевым для оптимизации производительности вашего сайта. Вот распространенные причины:

• Длинные задачи, блокирующие основной поток, задерживая взаимодействие пользователя.
• Синхронные обработчики событий по кликам, как мы видели в примере видео выше.
• Изменения в DOM, вызывающие многочисленные перерисовки и перечисления, обычно встречающиеся, когда размер DOM слишком велик (более 1,500 HTML элементов).

Как устранить проблемы с INP?

Во-первых, ознакомьтесь с нашим руководством по измерению метрик Core Web Vitals и попробуйте предложенные там методы устранения неисправностей. Если это не помогло определить, какие взаимодействия вызывают высокий INP, воспользуйтесь отчетом Performance в браузере Chrome (или еще лучше, Canary).

• Перейдите на веб-страницу, которую вы хотите проанализировать.
• Откройте DevTools вашего браузера Canary, не имеющего расширений (обычно нажатием F12 или Ctrl+Shift+I).
• Откройте вкладку Performance.
• Отключите кэш во вкладке Network.
• Выберите мобильный эмулятор.
• Нажмите кнопку Record и взаимодействуйте с элементами страницы, как обычно.
• Остановите запись, как только захватите интересное взаимодействие.

После этого, используя меню "slowdown", снизьте производительность ЦБ в 4 раза, чтобы симулировать средние мобильные устройства и выберите сеть 4G, которую используют 90% мобильных устройств на открытом воздухе. Если вы не измените эти настройки, симуляция будет выполняться с мощным ЦБ вашего ПК, не соответствующим мобильным устройствам.

Это очень важный нюанс, поскольку Google использует полевые данные, собранные с реальных пользователей. Вы можете не сталкиваться с проблемами INP на мощном устройстве – это сложный момент, усложняющий отладку INP. Выбирая эти настройки, вы максимально приближаете состояние эмулятора к состоянию реального устройства.

Вот видео-пособие , что демонстрирует весь процесс. Я настоятельно рекомендую попробовать это при прочтении статьи, чтобы получить практический опыт.

Мы обнаружили на видео, что долгие задачи влекут задержку взаимодействия, и список файлов JavaScript, ответственных за эти задачи.

Если развернуть раздел Interactions, можно увидеть детальный разбор длинного задания, связанного с этим взаимодействием, и нажатие на URL-адреса скриптов откроет строки кода JavaScript, ответственные за задержку, которую вы можете оптимизировать.

Отчет о производительности: основной поток Отчет о производительности: основной поток Отчет о производительности: пример длинного задания. Отчет о производительности: пример длинного задания. На вкладке Source показаны задержки, вызванные конкретными строками JavaScript. На вкладке Source показаны задержки, вызванные конкретными строками JavaScript.

Длительность взаимодействия 321 мс состоит из:

• Задержка ввода: 207 мс.
• Продолжительность обработки: 102 мс.
• Задержка представления: 12 мс.

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

Под длинной красной полосой можно увидеть желтую полосу с пометкой “Evaluate Script”, что указывает на то, что длинная задача была в основном вызвана выполнением JavaScript.

На первом снимке времени расстояние между (точкой 1) и (точкой 2) является задержкой, вызванной долгой задачей из-за оценки скрипта.

Что такое оценка скриптов?

Оценка скриптов является ключевым этапом выполнения JavaScript. Во время этого процесса браузер выполняет код по строкам, включая назначение переменных значений, определение функций и регистрацию обработчиков событий.

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

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

Это обеспечивает надлежащую регистрацию обработчика событий и возможность реагировать на взаимодействие.

На снимке экрана (точка 2) задержка в 207 мс, вероятно, возникла из-за того, что браузер все еще оценивал скрипт, содержавший обработчик событий для клика.

Здесь вступает в действие показатель Total Blocking Time (TBT), измеряющий общее время, в течение которого длинные задания (дольше 50 мс) блокируют основной поток, пока страница не станет интерактивной.

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

Хотя это не часть основных метрик Core Web Vitals, высокий TBT часто коррелирует с высокими показателями INP. Поэтому для оптимизации INP следует стремиться снизить TBT.

Какие JavaScript вызывают Высокий TBT?

Аналитические скрипты, такие как Google Analytics 4 , пиксели отслеживания, Google reCaptcha или объявления AdSense, обычно вызывают долгое время оценки скриптов, тем самым повышая TBT.

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

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

Улучшение INP – Не Панацея

Следует отметить, что улучшение INP не является панацеей, гарантирующей мгновенный успех в SEO .

Это лишь один из многих аспектов, которые следует учитывать в рамках комплекса качественных изменений, которые могут повлиять на общую производительность SEO.

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