Недавнее введение компанией Google взаимодействия с Next Paint (INP) в качестве фактора ранжирования вызвало интерес владельцев веб-сайтов и экспертов по SEO. Понимание того, что влечет за собой INP и как его оптимизировать, может оказать существенное влияние на производительность веб-сайта в поисковых системах. Давайте углубимся в детали.
Содержание
Что случилось
12 марта Google интегрировал в свои веб-показатели новый фактор ранжирования под названием INP (Interaction to Next Paint). FID (первая входная задержка) был заменен.
INP оценивает не только начальную скорость загрузки экрана, но и скорость работы сайта после клика или действия.
Причина изменения метрики проста: INP дает общую оценку взаимодействия с сайтом. Речь идет не только о том, как быстро загружается страница, но и о том, как быстро работает сайт.
Основное отличие состоит в том, что вместо измерения только начального взаимодействия NPI учитывает все взаимодействия. И вместо того, чтобы измерять только часть задержки, INP измеряет общее время от начала взаимодействия до обработки обработчика событий и до тех пор, пока браузер не сможет отобразить следующий кадр. Таким образом, он оценивает ответ до следующего рендеринга. Механизм оценки INP обеспечивает понимание реакции сайта.
Внедрение Interaction to Next Paint (INP) знаменует собой крупнейшее обновление фактора Core Web Vitals с момента его запуска.
INP в основных веб-показателях
INP является частью набора показателей Core Web Vitals, используемого Google для оценки скорости сайта.
Core Web Vitals оценивает показатели скорости страницы и используется при ранжировании сайта. Он оценивает три сигнала:
- Взаимодействие с Next Paint — оценивает скорость взаимодействия после загрузки страницы.
- Largest Contentful Paint — измеряет скорость загрузки основного контента.
- Cumulative Layout Shift — проверяет, меняется ли макет после загрузки.
Как работает коэффициент и расчет значения INP
Как рассчитывается INP? INP измеряет отзывчивость, то есть способность страницы быстро реагировать на взаимодействия с пользователем. INP измеряет время между взаимодействием пользователя (например, щелчком мыши) и ответом сайта. Если пользователь нажимает кнопку и сайт начинает обработку и рендеринг, задержка является частью INP.
ИЯФ является комплексной мерой взаимодействия. Взаимодействие состоит из трёх последовательных задержек:
- Задержка ввода: взаимодействие на странице начинается с ввода данных.
- Обработка запроса: Браузер отвечает на ввод данных.
- Отображение результата: браузер выполняет запрос и отображает обновленную страницу.
Значение INP должно быть меньше 200 миллисекунд. Он оценивает взаимодействие с сайтом перед отображением результата.
Задержка ввода: это задержка между нажатием пользователем кнопки и получением ответа от этой кнопки. Например, когда пользователь нажимает кнопку «Загрузить больше», веб-сайт начинает загружать и запускать аналитические сценарии, а затем предоставляет желаемый результат. Эта задержка является частью меры INP.
Время обработки: насколько быстро веб-сайт обрабатывает запрос, например загрузку данных на страницу.
Время рендеринга: как быстро происходит рендеринг на странице после получения данных, готовых к отображению.
Как оптимизатор может выявить страницы с низким INP? Значение метрики следует анализировать для десктопной и мобильной версий сайта.
Перед оптимизацией следует выявить страницы с плохими значениями метрик.
Как измерить INP
Как определить стоимость ИНФ? Используйте бесплатные инструменты, такие как Информация о PageSpeed Или Маяк. Значение INP может не отображаться. Отчеты с таких сайтов, как indexoid.com Элементы взаимодействия отсутствуют, поэтому значение INP не отображается.
Однако синтетические данные не идеальны. Google оценивает метрику на основе базы данных CrUX.
Узел — это официальный набор реальных данных Web Vitals.
По данным Google документацияМетрики сайта оцениваются на основе их производительности в реальных условиях при 75-м процентиле всех загрузок страниц:
«Для общего рейтинга эффективности страницы или сайта мы используем 75-й процентиль всех посещений этой страницы или сайта. 75-й процентиль был выбран на основе двух критериев. Во-первых, процентиль должен гарантировать, что большинство посещений страницы или сайта достигли целевого уровня эффективности. Тогда выбросы не должны сильно влиять на выбранное значение процентиля. »
Конкретные значения показателей INP, которые считаются хорошими:
- INP, равный или меньше 200 миллисекунд, означает, что страница имеет хорошую скорость отклика.
- INP между 200 и 500 миллисекундами указывает на то, что сайт нуждается в улучшении.
- INP больше 500 миллисекунд означает, что страница неисправна.
- Наведение курсора и прокрутка не влияют на INP.
Для сбора реальных данных вы можете подключиться к сервису RUM (Real User Monitoring). Например, Cloudflare предлагает бесплатный сервис RUM, который собирает NPI как часть своего набора данных. Также возможно извлечение данных из Search Console.
Как оптимизировать INP
После выявления проблемных страниц переходите к устранению конкретных проблем, что можно сделать с помощью бесплатного инструмента Chrome DevTools.
Вы можете создать запись взаимодействия и затем проанализировать ее.
Меры:
- Откройте инструмент «DevTools» и переключитесь на вкладку «Производительность».
- Нажмите «Запись», чтобы начать запись.
- Нажмите любую кнопку на странице.
- Остановите запись.
- Разверните «Взаимодействия», чтобы найти красную полосу, показывающую время ответа сайта.
- Разверните «Основной», чтобы найти конкретные процессы, вызывающие задержку.
- Выше описан процесс диагностики проблем. Каждый вопрос необходимо решать индивидуально ввиду уникальности каждого сайта. Однако типичные проблемы сайта, такие как использование систем аналитики, можно обойти с помощью бесплатного сервиса Cloudflare Zaraz.
Среди основных рекомендаций по оптимизации:
- Оптимизируйте долго выполняющиеся задачи, если на сайте используется JavaScript.
- Большой DOM может потребовать значительной работы по рендерингу, а взаимодействия часто изменяют DOM. Лучше всего избегать больших и сложных макетов и изменений макета и минимизировать размер DOM, когда это возможно.
- Сложные селекторы CSS также могут вызывать большой объем работы в ответ на взаимодействие с пользователем.
- Если ваш веб-сайт отображает значительную часть клиентского HTML с использованием JavaScript, важно понимать, как работает клиентский код. HTML-рендеринг может повлиять на интерактивность.
Поделитесь своими мыслями и вопросами в комментариях.
