Взаимодействие со следующей отрисовкой: что это и как это сделать?

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

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

Именно об этом и говорит «Взаимодействие со следующей отрисовкой» (INP).

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

Почему это имеет значение?

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

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

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

Что такое взаимодействие со следующей отрисовкой (INP)?

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

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

Для большинства взаимодействий с пользователем рекомендуемое значение INP составляет менее 200 миллисекунд (мс). Значение INP более 300 мс считается плохим и будет восприниматься пользователями как медленное

Взаимодействие со следующей отрисовкой как основная веб-важность

Взаимодействие с Next Paint было представлено как один из трех показателей Google Core Web Vitals 12 марта 2024 года. Он заменил предыдущий показатель «Задержка первого ввода».

В качестве показателя Core Web Vitals плохое взаимодействие с Next Paint может повлиять на ваш рейтинг в поиске Google.

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

INP является преемником первой входной задержки (FID). Оба показателя являются показателями оперативности.

FID и INP различаются двумя способами:

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

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

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

Взаимодействие с Next Paint обычно оценивает наихудшую задержку ввода на странице. Однако если пользователей встречается много, выбросы будут отброшены, и Google оценит 98-й процентиль задержки взаимодействия.

Таким образом, если INP страницы составляет 250 миллисекунд, 2% пользовательских взаимодействий имели задержку больше этого значения.

��ак работает взаимодействие со следующей отрисовкой (INP)?

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

Вот как работает INP:

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

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

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

• SEO (поисковая оптимизация):INP и другие основные веб-показатели являются частью сигналов Google об удобстве страниц, которые влияют на рейтинг веб-сайта на страницах результатов поиска. Это подчеркивает важность ИЯФSEO-метрика.

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

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

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

а. Входная задержка

Ожидание фоновых операций на веб-сайте, чтобы предотвратить запуск обработчика событий.

б. Время обработки

Выполнение обработчиков событий в JavaScript.

в. Задержка презентации

Работа с другими ожидающими операциями, пересчет макета страницы и рисование содержимого страницы. INP измеряются в миллисекундах (мс). Хороший тест составляет менее 200 мс, а все, что находится между этим значением и 500 мс, считается нуждающимся в улучшении. Задержка 500 мс или более считается плохой.

На значение INP могут влиять несколько переменных, включая размер и сложность веб-страницы, а также количество загруженных файлов JavaScript и CSS.

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

• Тест скорости сайта DebugBear
• Статистика скорости страниц Google
• Расширение Chrome для ускорения нашего сайта
• Отладчик INP
• Консоль поиска Google
• Библиотека веб-показателей

Инструменты тестирования скорости веб-сайта могут помочь вам определить значение INP веб-сайта. Этот тип приложения может п��едоставить информацию о том, как работают ваши показатели Core Web Vitals, и предложить рекомендации по их оптимизации.

Google PageSpeed ​​Insights — популярный инструмент для анализа INP ипроизводительность сайта. Он оценит сайт и даст рекомендации по применению лучших практик. Вы также можете проверить, насколько быстро ваш сайт загружается ��а мобильных и настольных устройствах.

PageSpeed ​​Insights представляет два типа результатов. В верхней части отображаются показатели Core Web Vitals сайта из отчета Chrome UX, представляющего собой набор реальных показателей производительности от пользователей Chrome.

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

Если данные INP сайта недоступны, посмотрите на общее время блокировки (TBT). Эта метрика оценивает новую форму реагирования. Основное внимание уделяется тому, как долго веб-сайт не может реагировать на взаимодействие пользователя во время загрузки.

Внизу приведены идеи о том, как улучшить показатели Core Web Vitals, а именно:

Как оптимизировать взаимодействие со следующей отрисовкой (INP)?

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

а. Улучшение производительности JavaScript

JavaScriptявляется ключевым компонентом многих веб-сайтов. Он предлагает множество интерактивных элементов; однако это также может замедлить скорость сайта.

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

Чтобы улучшить скорость реагирования, оптимизируйте свой JavaScript. Вы можете добиться этого:

• Минимизация файлов JavaScriptуменьшает объем JavaScript, позволяя загружать большебыстро.

• Включите сжатие GZip.Еще один распространенный способ сжатия файлов и данных веб-сайта.

• Использование JavaScript-фреймворка.Этот инструмент поможет вам организовать ваш код JavaScript и сделать его более эффективным. AngularJS и jQuery — хорошо известные примеры.

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

Неэффективный JavaScript может блокировать основной поток, вызывая задержки рендеринга. Разделение кода, отложенная загрузка, использование веб-воркеров и отказ от длительных операций в основном потоке — все это варианты уменьшения задержки JavaScript.

б. Используйте веб-работников

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

Предположим, у вас есть веб-сайт WordPress, на котором загружены фотографии, видео и данные. Веб-работники могут перенести эти дорогостоящие операции JavaScript в фоновый поток, предотвращая зависание вашего интерфейса.

Другой способ избежать задержки основного потока — разделить большие задания JavaScript на более мелкие.

в. Разбивка длинных задач

Разбивка больших задач позволяет веб-браузеру обрабатывать их небольшими частями за раз. В результате основной поток может выполнять более важные задачи.

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

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

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

д. Приоритизация готовности ввода

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

Вот как определить приоритет готовности ввода и повысить INP:

1. Некритичный JavaScript будет отложен

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

2. Регулирование

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

3. Устранение дребезга

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

4. Слушатели событий, которые не участвуют активно

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

е. Обеспечьте немедленную обратную связь

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

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

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

Ознакомьтесь с этими примерами сигналов быстрой обратной связи:

1. Индикаторы нагрузки

Отображение счетчика или индикатора выполнения во время выполнения процесса, особенно при представлении данных или переключении на новую страницу.

2. Всплывающие сообщения подтверждения

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

3. Проверка полей формы

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

Заключение

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

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

Так что вперед и раскройте возможности оптимизированного INP!

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

Часто задаваемые вопросы