Измените языковые настройки Топвизор для работы с сервисом на родном языке. Вы также сможете выбрать и установить язык интерфейса позже в настройках Аккаунта. Измените языковые настройки Топвизор для работы с сервисом на родном языке. 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.

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

    Подписаться 

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

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

    Совет о ссылках на источник

    Совет о ссылках на источник

    Если контент скопировали, но поставили ссылку на источник, учитываются ли такие ссылки в ссылочном профиле?
    Как пользоваться Яндекс.Вордстат

    Как пользоваться Яндекс.Вордстат

    Как собрать семантику с помощью Вордстат, как пользоваться операторами, зачем смотреть частоту и как автоматизировать работу.
     Core Web Vitals: почему значения метрик в Lab data и Field data могут отличаться

    Core Web Vitals: почему значения метрик в Lab data и Field data могут отличаться

    Перевод статьи Филипа Уолтона с сайта web.dev, которая помогает понять, почему данные в лабораторных и полевых отчётах отличаются.