В сфере SEO нет недостатка в аббревиатурах.

От SEO до FID и INP — вот некоторые из наиболее распространенных проблем, с которыми вы столкнетесь, когда дело дойдет до скорости загрузки страницы.

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

Что именно представляет собой взаимодействие со следующей краской?

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

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

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

Вот пример видео иллюстрирующий как это выглядит в реальной жизни:

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

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

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

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

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

Какое значение INP является хорошим?

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

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

Как измеряется ИНП?

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

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

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

Когда пользователь покидает страницу, эти измерения отправляются в отчет об опыте использования Chrome, который называется CrUXкоторый объединяет данные о производительности для предоставления информации о реальном опыте пользователей, известной как полевые данные.

Каковы наиболее распространенные причины высокого уровня ИНП?

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

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

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

Сначала прочтите наше руководство по измерению показателей CWV и попробуйте предложенные там методы устранения неполадок. Но если это все еще не поможет вам найти, какие взаимодействия вызывают высокий INP, вот где отчет «Производительность» Chrome (или, лучше сказать, Канарские) браузер может помочь.

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

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

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

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

В видео мы увидели, что длительные задачи приводят к увеличению времени взаимодействия, а также список файлов JavaScript, которые отвечают за эти задачи.

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

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

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

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

Под длинной красной панелью задач вы можете увидеть желтую полосу с надписью «Выполнить скрипт», указывающую на то, что длительная задача была в первую очередь вызвана выполнением JavaScript.

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

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

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

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

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

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

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

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

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

Это не часть метрик CWV, но часто коррелирует с высокими INP. Поэтому, чтобы оптимизировать метрику INP, вам следует стремиться снизить TBT.

Какие JavaScript-коды чаще всего вызывают высокий TBT?

Аналитические скрипты, такие как Google Analytics 4, пиксели отслеживания, Google Re-Captcha или реклама AdSense, обычно требуют много времени для оценки скрипта, тем самым способствуя TBT.

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

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

Улучшение вашего INP — не панацея

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

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

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

Дополнительные ресурсы:

---

Главное изображение: BestForBest/Shutterstock