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

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

    Подписаться 

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

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

    Как архитектура SPA-сайтов влияет на метрики Core Web Vitals

    Как архитектура SPA-сайтов влияет на метрики Core Web Vitals

    Что такое SPA-сайты, почему их показатели по CWV могут быть хуже, чем у обычного сайта, и что с этим планирует делать Google. Отвечает команда Chrome.
    Как продвигаться ссылками в 2022 году

    Как продвигаться ссылками в 2022 году

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

    Мультиязычное SEO под голосовой поиск: гайд

    Перевод статьи с Search Engine Watch. Автор рассказывает, как подбирать ключи, как переводить контент и какую структуру URL использовать.
    ;