Недавнее введение Google Interaction to Next Paint (INP) в качестве фактора ранжирования вызвало интерес как у владельцев веб-сайтов, так и у экспертов по SEO. Понимание INP и его оптимизации может существенно повлиять на производительность веб-сайта в поисковых системах. Давайте углубимся в детали.
Содержание
Что случилось
12 марта Google добавил в свои веб-показатели новый фактор ранжирования под названием INP (Interaction to Next Paint). FID (первая входная задержка) был заменен.
INP оценивает не только скорость начальной загрузки экрана, но и скорость работы сайта после клика или действия.
Причина изменения показателя проста: INP предоставляет комплексную оценку вовлеченности сайта. Дело не только в том, насколько быстро загружается страница, но и в том, насколько быстро работает сайт.
Ключевое отличие: вместо того, чтобы просто измерять начальное взаимодействие, INP учитывает все взаимодействия. И вместо того, чтобы измерять только часть задержки, INP измеряет всю продолжительность от начала взаимодействия, посредством обработки обработчика событий, до тех пор, пока браузер не сможет отобразить следующее изображение. Таким образом, ответ оценивается до следующего рендеринга. Механизм оценки INP гарантирует понимание отзывчивости сайта.
Внедрение Interaction to Next Paint (INP) представляет собой крупнейшее обновление фактора Core Web Vitals с момента его создания.
INP в основных веб-показателях
INP является частью набора показателей Core Web Vitals, используемого Google для оценки скорости сайта.
Core Web Vitals оценивает показатели скорости страницы и используется для ранжирования сайта. Он оценивает три сигнала:
- Взаимодействие с Next Paint – оценивает скорость взаимодействия после загрузки страницы.
- Самая большая по содержанию отрисовка — измеряет, насколько быстро загружается основной контент.
- Cumulative Layout Shift — проверяет, смещается ли макет после загрузки.
Как работает коэффициент и как рассчитывается значение INP
Как рассчитывается INP? INP измеряет отзывчивость, то есть способность страницы быстро реагировать на взаимодействия с пользователем. INP измеряет, сколько времени проходит между взаимодействием с пользователем (например, щелчком мыши) и ответом сайта. Когда пользователь нажимает кнопку и сайт начинает обработку и рендеринг, задержка является частью INP.
INP — это комплексная метрика взаимодействия. Взаимодействие состоит из трех последовательных задержек:
- Задержка ввода: взаимодействие на странице начинается с ввода данных.
- Обработка запроса: Браузер реагирует на ввод данных.
- Отображение результата: браузер выполняет запрос и отображает обновленную страницу.
Значение INP должно быть меньше 200 миллисекунд. Он оценивает взаимодействие сайта перед отображением результата.
Задержка ввода. Это относится к задержке между нажатием пользователем клавиши и получением ответа от этой клавиши. Например, когда пользователь нажимает кнопку «Загрузить больше», веб-сайт начинает загрузку и выполнение сценариев анализа, а затем предоставляет желаемый результат. Эта задержка является частью метрики INP.
Время обработки: насколько быстро веб-сайт обрабатывает запрос, например. Б. загрузка данных на страницу.
Задержка рендеринга: как быстро страница отображается после получения данных, готовых к отображению.
Как оптимизатор может выявить страницы с плохим 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, который собирает INP как часть своего набора данных. Также возможно извлечение данных из Search Console.
Как оптимизировать INP
После выявления проблемных страниц можно переходить к выявлению конкретных проблем. Это возможно с помощью бесплатного инструмента Chrome DevTools.
Вы можете создать набор данных взаимодействия, а затем проанализировать его.
Шаги:
- Откройте инструмент «DevTools» и перейдите на вкладку «Производительность».
- Нажмите «Запись», чтобы начать запись.
- Нажмите любую кнопку на странице.
- Остановите запись.
- Разверните «Взаимодействия», чтобы найти красную полосу, обозначающую задержку ответа сайта.
- Разверните Main, чтобы найти конкретные процессы, вызывающие задержки.
- Процесс диагностики проблемы показан выше. В связи с уникальностью каждого сайта, каждый вопрос следует решать индивидуально. Типичные проблемы сайта, такие как: Однако некоторые проблемы, такие как использование систем аналитики, можно обойти с помощью бесплатного сервиса Cloudflare Zaraz.
Основные рекомендации по оптимизации включают в себя:
- Оптимизируйте длинные задачи, когда сайт использует JavaScript.
- Большой DOM может потребовать значительных усилий по рендерингу, и взаимодействия часто меняют DOM. Лучше всего избегать больших и сложных макетов и изменений макета и минимизировать размер DOM, где это возможно.
- Даже сложные селекторы CSS могут потребовать значительного объема работы в ответ на взаимодействие с пользователем.
- Если ваш веб-сайт отображает значительную часть клиентской части HTML с использованием JavaScript, важно понимать, как HTML-рендеринг может повлиять на интерактивность.
Поделитесь своими мыслями и вопросами в комментариях.