В марте 2024 года Google официально заменил метрику First Input Delay (FID) на Interaction to Next Paint (INP) в составе трех ключевых показателей Core Web Vitals (CWV). Это изменение стало не просто корректировкой, а фундаментальной переменой в подходе Google к оценке пользовательского опыта.

Почему Google решил внести это изменение?

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

Проблемы и возможности: Хотя INP сложнее оптимизировать, чем FID, он предоставляет возможность значительно улучшить общую отзывчивость вашего сайта. Сайты, которые соответствуют требованиям INP, вероятно, обеспечивают более высокий уровень пользовательского опыта, что может привести к лучшему вовлечению и общей производительности в SEO.

Однако из-за своей сложности и отсутствия явной информации о специфических проблемных взаимодействиях от Google, вам, как специалисту по SEO или владельцу сайта, предстоит самостоятельно выявлять проблемы INP, анализировать трассировки производительности и решать их соответствующим образом.

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

Содержание:

1. Что такое INP?
2. Понимание взаимодействий: основа INP
3. Как просматривать взаимодействия на вашем сайте
4. 3 шага для выявления проблемных взаимодействий

• Начните с отчета Core Web Vitals в Google Search Console
• Просканируйте ваш сайт с помощью Screaming Frog и API PageSpeed Insights
• Определите плохие взаимодействия с помощью вкладки Performance в Chrome DevTools

5. 6 методов оптимизации вашего INP

• Аудит сторонних скриптов
• Проведение аудита визуальных изменений
• Аудит собственных скриптов
• Приоритет HTML-ссылок над JS-кнопками
• Оптимизация времени дебаунса
• Уступка главному потоку

6. Как измерить успех ваших оптимизаций INP

Что такое INP?

Interaction to Next Paint — это метрика, которую Google использует для измерения отзывчивости веб-страницы на взаимодействия пользователей. Цель INP заключается в том, чтобы время от момента, когда пользователь инициирует взаимодействие, до следующего отображения кадра было как можно короче для всех или большинства взаимодействий.

Google определяет «взаимодействие» как:

• Клик
• Нажатие мышью
• Тап (на устройствах с сенсорными экранами)
• Нажатие клавиш

INP не включает прокрутку, так как это не взаимодействие с самой страницей.

INP измеряется в миллисекундах, и Google классифицирует производительность следующим образом:

• Хорошо — INP равен или меньше 200 мс
• Требуется улучшение — INP больше 200 мс и меньше или равен 500 мс
• Плохо — INP больше 500 мс

Понимание взаимодействий: основа INP

Для эффективной оптимизации INP важно сначала понять, что такое взаимодействие и какие факторы влияют на его время:

• Задержка ввода: Это начальная задержка между взаимодействием пользователя и регистрацией браузером этого взаимодействия.
• Длительность обработки: После распознавания ввода браузер должен обработать действие.
• Задержка представления: Это время, необходимое для обновления браузером дисплея после обработки взаимодействия.

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

Как просматривать взаимодействия на вашем сайте

Теперь, когда вы знакомы с взаимодействиями и INP, пришло время подробно проанализировать взаимодействия на вашем сайте. Я сосредоточусь на использовании Chrome DevTools, так как это предоставляет все необходимые данные без дополнительных инструментов или настроек:

1. Щелкните правой кнопкой мыши на нужной веб-странице и выберите «Inspect». Это откроет Chrome DevTools.
2. Перейдите на вкладку «Performance» и нажмите кнопку записи.
3. Взаимодействуйте со страницей, как это сделали бы ваши пользователи.
4. Нажмите кнопку записи еще раз, чтобы остановить запись. Трассировка автоматически загрузится в вкладку.

3 шага для выявления проблемных взаимодействий

1. Начните с отчета Core Web Vitals в Google Search Console: Это отличное место для начала, так как он предоставляет информацию о том, какие страницы на вашем сайте испытывают проблемы с INP.
2. Просканируйте ваш сайт с помощью Screaming Frog и API PageSpeed Insights: Это позволит вам получить данные INP наряду с другими Core Web Vitals, предоставляя полное представление о производительности вашего сайта.
3. Определите плохие взаимодействия с помощью вкладки Performance в Chrome DevTools: Используйте ее для выявления проблемных элементов на страницах с высокими значениями INP.

6 методов оптимизации вашего INP

1. Аудит сторонних скриптов: Определите и удалите ненужные скрипты, а также отложите загрузку некритичных скриптов.
2. Проведение аудита визуальных изменений: Минимизируйте визуальные изменения после взаимодействий, которые не улучшают пользовательский опыт.
3. Аудит собственных скриптов: Оптимизируйте скрипты, используя объединение и минификацию, а также ленивую загрузку.
4. Приоритет HTML-ссылок над JS-кнопками: Используйте HTML-ссылки для более быстрого отклика.
5. Оптимизация времени дебаунса: Настройте время дебаунса для уменьшения количества запросов к серверу.
6. Уступка главному потоку: Разделите длинные задачи JS на более мелкие, чтобы браузер мог обрабатывать взаимодействия пользователей.

Как измерить успех ваших оптимизаций INP

После внедрения оптимизаций важно провести анализ их воздействия:

• Сравните производительность до и после оптимизации.
• Следите за трендами INP со временем.
• Собирайте и анализируйте данные реального пользовательского мониторинга (RUM).

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