Измените языковые настройки Топвизор для работы с сервисом на родном языке. Вы также сможете выбрать и установить язык интерфейса позже в настройках Аккаунта. Измените языковые настройки Топвизор для работы с сервисом на родном языке. ru Русский Выбрать

В Chrome DevTools появилась панель Recorder

В Chrome DevTools появилась панель Recorder

В инструментах разработчика DevTools появилась новая панель – «Recorder». С её помощью можно записать, воспроизвести и измерить, как быстро реагирует сайт на действия пользователя. Например, в процессе оформления заказа.

Панель Recorder поможет измерить метрику «Отзывчивость». Это тестовая метрика Core Web Vitals, которую Google анонсировал недавно.

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

Панель доступна для версии Chrome Canary. Пока в рамках теста.

Как открыть Recorder panel

  • Откройте DevTools. Для этого нажмите комбинацию клавиш: для Mac OS – Command+Option+I, для Windows – Control+Shift+I.
  • Кликните на More Options > More tools > Recorder.
    Как открыть панель Recorder
    Как открыть панель Recorder

Зачем использовать

  • записать весь пользовательский путь, а не только первое взаимодействие. Можно записать как пользователь добавил товар в корзину, перешёл в корзину, начал оформлять заказ, заполнил платёжные реквизиты и т.д.;
  • воспроизвести пользовательский путь. При воспроизведении также можно имитировать медленное интернет-соединение. Для этого в настройках в раскрывающемся списке выберите «медленный 3G»;
  • измерить производительность. Если кликнуть на кнопку «Measure Performance», то сначала вы увидите воспроизведение пути пользователя, а потом разбивку на секунды на панели «Performance». На этой панели можно установить флажок Web Vitals и определять, как улучшить скорость ответа страницы:
Как выглядит разбивка на секунды на панели производительности
Как выглядит разбивка на секунды на панели производительности

Google предлагает протестировать панель с помощью демонстрационной страницы заказа кофе

Вот, как это выглядит:

    Подробнее о том, как пользоваться новой панелью – в статье Chrome Developers.

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

    Подписаться 

    0 0
    Оставьте свой комментарий
    Чтобы оставить комментарий, авторизуйтесь

    Советуем почитать

    О работе Техподдержки в Топвизоре и бесплатной проверке позиций

    О работе Техподдержки в Топвизоре и бесплатной проверке позиций

    Как связаться с Поддержкой, как предложить идею улучшения сервиса и сэкономить на проверке позиций.
    Pixel Facebook: как «догнать» пользователей сайта в соцсетях

    Pixel Facebook: как «догнать» пользователей сайта в соцсетях

    Простая инструкция по установке и использованию пикселя в Facebook.
    Новая модель индексации на основе Machine Learning от Google

    Новая модель индексации на основе Machine Learning от Google

    Как Google собирается использовать машинное обучение для ранжирования сайтов.