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

Опубликовано: 2022-07-17
200 Milliseconds Sound Fast? Interaction To Next Paint Can Help Boost the Responsiveness Of Your Website

Мэй вышла с ревом. Какой месяц. Обновление Google Core, две новые пользовательские метрики Web Vitals и WordPress 6.0!

25 мая Google объявила о начале масштабного основного обновления. Ожидается, что майское обновление ядра 2022 года продлится две недели. Люди сообщали об изменениях на страницах результатов поиска. Заметили ли вы какие-либо изменения в своей поисковой выдаче?

Также был выпущен WordPress 6.0, второй крупный выпуск WordPress 2022 года. WordPress 5.9, выпущенный в январе 2022 года, представил полное редактирование сайта (FSE) для редактора блоков. С Вордпресс 6.0. внимание снова сосредоточено на расширении и улучшении функций редактора блоков. Все ли веб-сайты вашего клиента обновлены до версии WordPress 6.0?

Обновления везде! Что произошло важного для моих веб-сайтов?

Важным шагом Google в мае стало добавление показателей « Время до первого байта » (TTFB) и « Взаимодействие до следующей отрисовки» (INP) в свои показатели Web Vitals. Добавление новых метрик — это способ Google сказать: «Сосредоточьтесь на том, что жизненно важно».

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

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

Core Web Vitals растет! pagespeed.web.dev только что получил обновление, рата RUM теперь включает взаимодействие до следующей отрисовки (INP) и время до первого байта (TTFB). Оба отличный выбор, если вы спросите меня! INP, на мой взгляд, является гораздо лучшим способом измерения отклика, чем первая задержка ввода, которой можно легко манипулировать. Время до первого байта всегда должно было быть более важным, поскольку оно предшествует любому показателю производительности. Нет ответа = нет краски, нет взаимодействия и т. д.!.

Арьен Карел

Что такое взаимодействие с Next Paint (INP) и почему это важно?

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

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

Google.com

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

Элементов пользовательского интерфейса много. KeyDown происходит при нажатии клавиши. KeyUp происходит при отпускании клавиши. Есть DragOver, Drop, OnFocus и многие другие. Каждое взаимодействие оценивается, обрабатывается и результат предоставляется пользователю.

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

Interaction to Next Paint (INP) измеряет задержку взаимодействия с нашим веб-сайтом. Вот некоторые примеры таких взаимодействий:

  • Событие мыши — например, нажатие кнопки для изменения цвета предмета одежды.
  • Интерактивный элемент, активируемый на сенсорном экране пальцем — возможно, на карте.
  • Нажатие клавиши на мобильном или настольном устройстве — чтобы показать ответ на вопрос.

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

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

Сколько денег теряет ваш сайт электронной коммерции из-за задержки, низкой производительности и, честно говоря, управляемого хоста WordPress, технология которого устарела для сегодняшних ожиданий клиентов?

Ракета.нет

Как я могу измерить взаимодействие Google с метрикой Next Paint?

Чтобы измерить взаимодействие Google с Next Paint, перейдите на страницу PageSpeed ​​Insights и измерьте INP вашей страницы. Запомнить. Вы измеряете именно эту страницу, а не весь сайт.

INP похож на Cumulative Layout Shift (CLS) тем, что значения измерений будут меняться, пока пользователь остается на вашей веб-странице. Как только пользователь покидает страницу, выполняется измерение, в результате чего создается общее значение INP. На некоторых страницах будет больше взаимодействий, чем на других. Взаимодействие с некоторыми страницами может не произойти, если действие не выбрано.

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

Адаптивный веб-сайт означает больше, чем гибкие блоки в вашем CSS

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

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

Взаимодействие с Next Paint означает измерение времени, которое требуется элементам на странице, чтобы отреагировать на взаимодействие. Теперь мы можем увидеть, сколько времени потребуется для изменения изображения продукта, если пользователь выберет другой цвет, или сколько времени потребуется, чтобы ответ появился на экране. Скорость здесь может стать нокаутом для многих пользователей. Помните – скорость побеждает.

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

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

Ракета.нет

Микровзаимодействия — это разница между хорошим веб-сайтом и отличным веб-сайтом

Сохраняйте задержку взаимодействия. Избавьтесь от взаимодействий, говорите?

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

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

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

ЮзабилитиGeek.com

Разговор дешевый. Пусть Rocket покажет вам, что ДЕЙСТВИТЕЛЬНО означает самый быстрый хостинг WordPress!

Экономия производительности сайта, времени и денег вашего агентства? Да. Платформа Rocket имеет встроенные функции, которые устраняют необходимость в платных версиях безопасности, оптимизации изображений, CDN и подключаемых модулях загрузки контента JS. Это функции, встроенные в вашу новую любимую платформу (продукт, ранее известный как Managed WordPress Hosting).

Давайте поговорим о том, как мы можем перенести ваш сайт на Rocket.net, самый быстрый из доступных хостингов WordPress. Запустите свою миссию сегодня!