Расширение Web Vitals теперь отображает дополнительную информацию об отладке, которая поможет вам определить основные причины проблем Core Web Vitals.
Расширение Web Vitals обеспечивает легкий доступ к диагностической информации Core Web Vitals, что помогает разработчикам измерять и решать проблемы Core Web Vitals. Он дополняет другие инструменты, предоставляемые командой Chrome, чтобы помочь разработчикам улучшить работу своих веб-сайтов.
Мы обновили расширение, чтобы предоставить разработчикам дополнительную информацию об отладке, чтобы облегчить понимание и решение проблем с производительностью.
Отображение отладочной информации в консоли
Расширение Web Vitals уже некоторое время имеет опцию отладки «Консольное ведение журнала». Его можно включить на экране «Параметры»:
До этого последнего обновления выходные данные web-vitals library (которая лежит в основе расширения) записывались в объект JSON:
Затем этот объект можно было расширить, чтобы получить полную информацию, а на такие элементы, как изображение LCP, можно было навести курсор, чтобы выделить их на главной панели:
Это было полезно, но формат вывода не был особенно удобен для пользователя, и мы подумали, что сможем обеспечить лучший опыт для разработчиков. Поэтому мы улучшили расширение, чтобы сделать наиболее важную информацию более видимой, в то же время включая полный объект для тех, кто хочет получить более подробную информацию.
Новая отладочная информация для каждой метрики.
В новом выпуске мы добавили новую отладочную информацию в более удобочитаемом формате, чтобы помочь вам находить и устранять проблемы. Для каждого показателя предоставляется разная информация, поскольку каждый из них различен.
Информация об отладке LCP
Для крупнейшего отрисовки контента (LCP) мы показываем как элемент, так и разбивку на 4 этапа, подробно описанную в нашем руководстве по оптимизации LCP :
Время LCP (2876 миллисекунд — или около 2,9 секунды) выделено желтым цветом, поскольку оно находится в категории «Требуется улучшение».
В этом примере мы видим, Resource load time является самым продолжительным, поэтому, чтобы улучшить время LCP, вам следует оптимизировать его — возможно, избегая размещения их в отдельном домене или используя изображения меньшего размера или более эффективные форматы. В данном случае это происходит из-за искусственного замедления для демонстрации результатов — web.dev — быстрый сайт 😀
На элемент также можно навести курсор, чтобы выделить изображение:
Щелчок правой кнопкой мыши по элементу также позволяет отобразить его на панели элементов.
Здесь элементом LCP является изображение, и наведение курсора на него в консоли справа также выделяет этот элемент на сайте слева.
Информация об отладке CLS
Смещения, способствующие совокупному сдвигу макета (CLS), теперь также отображаются в списке, и на них можно навести указатель мыши, чтобы выделить соответствующий элемент:
На приведенном выше снимке экрана показаны два смещения: первое состоит из двух элементов (когда изображение баннера загружено и содержимое под ним смещено при загрузке), а второе из четырех элементов (когда динамическое объявление загружено и большая часть страницы загружена). сдвинут вниз).
На этом снимке экрана в консоли справа наведен курсор на элемент h2 , и вы можете видеть, что он подсвечивает элемент на сайте слева.
Информация об отладке FID
Для пе��вой задержки ввода (FID) мы показываем затронутый элемент (на который снова можно навести курсор, чтобы выделить его на странице) и тип взаимодействия, а также полный объект JSON, как обычно:
Информация об отладке INP
Для взаимодействия с следующей отрисовкой (INP) мы добавили два новых журнала:
- ИЯФ – самое продолжительное взаимодействие
- Взаимодействия - все взаимодействия
Метрика INP
Прежде всего, мы выделяем метрику INP, когда она меняется:
Подобно LCP, расширение разбивает время INP на три фазы:
- Входная задержка
- Продолжительность обработки
- Задержка презентации
Это поможет вам определить, было ли событие медленным из-за задержки других событий ( задержка ввода ), поскольку сам обработчик событий работал медленно из-за вашего кода ( длительность обработки ), была ли причиной задержка рендеринга постобработки ( презентация задержка ) или комбинацию двух или более из них.
Взаимодействия
INP может работать медленно из-за того, что предыдущие взаимодействия блокировали основной поток и, таким образом, вызывали большую задержку ввода. По этой причине мы перечисляем все взаимодействия в формате, аналогичном протоколу INP:
Это позволяет вам «отслеживать» веб-сайт в реальном времени, взаимодействуя с ним и просматривая в консоли, какие взаимодействия и в каких комбинациях могут вызвать проблему INP.
Это также позволяет вам идентифицировать несколько медленных взаимодействий, а не только самое большое взаимодействие INP, чтобы помочь вам избежать ощущения погони за своим хвостом при улучшении вашей реакции.
Фильтрация журналов консоли
Вся эта дополнительная информация, хотя и полезна, может отвлекать, если вы занимаетесь другой разработко��, не связанной с Core Web Vitals, или в данный момент интересуетесь только одним конкретным Core Web Vitals.
Вы можете использовать параметры фильтрации консоли в DevTools, чтобы отфильтровать некоторые или все сообщения:
- Чтобы удалить все сообщения расширения, вы можете либо отключить это в настройках, либо использовать фильтр
-Extension. - Чтобы просмотреть только LCP, вы можете использовать фильтр
Web Vitals Extension LCP. - Чтобы просмотреть только INP и взаимодействия, вы можете использовать фильтр
Web Vitals Extension -LCP -CLS -FID.
Мы стараемся сократить количество опций для этого расширения, но дайте нам знать, подняв вопрос на GitHub , если фильтрации DevTools недостаточно и вы предпочитаете варианты здесь.
Заключение
Мы надеемся, что новые параметры отладки в последней версии расширения окажутся вам полезными и что они упрощают выявление и решение проблем Core Web Vitals, улучшая взаимодействие с пользователем на вашем веб-сайте.
Помните, что ваш опыт на компьютере разработчика может не отражать то, что ��спыт��ваю�� ваш�� реа��ьные п��льзователи. Прочтите нашу предыдущую публикацию в блоге о том, как вы можете просмотреть данные полей CrUX для вашего сайта в расширении, чтобы понять, насколько ваш опыт соответствует вашим пользователям.
Мы будем признательны за любые отзывы об этих улучшениях или любые другие предложения в нашем трекере проблем GitHub .