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

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

    Подписаться 

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

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

    Как закрыть сайт от индексации в robots.txt

    Как закрыть сайт от индексации в robots.txt

    Как закрыть сайт от индексации для Яндекса, Google и других поисковых систем в robots.txt: пошаговая инструкция с примерами. Как создать файл самостоятельно. Какие данные нужно скрывать. Как проверить, корректно ли работает запрет. Как избежать ошибок.
    Как зарабатывать на контенте: про SEO-процессы, ТЗ и деньги

    Как зарабатывать на контенте: про SEO-процессы, ТЗ и деньги

    Интервью с агентством «Glider» о том, как работают над контентом и делают так, что он приносит клиентам трафик и лиды. А ещё — про факап, который помог им полностью перестроить процесс работы.
    Как продвигать канал на YouTube с нуля без вложений

    Как продвигать канал на YouTube с нуля без вложений

    Что происходит в YouTube сейчас, как сделать свой канал и сколько можно заработать.