Core Web Vitals показывает три показателя, по которым ранжируется Google — LCP, CLS и INP — измеренные в реальном времени на странице, которую вы просматриваете, оцениваются по пороговым значениям Google и отслеживаются до точного элемента, стоящего за каждым числом.
Core Web Vitals частично определяет рейтинг ваших страниц, но обычные способы его измерения неудобны. Лабораторные инструменты имеют синтетическую нагрузку, которую никто не испытывает. Search Console сообщает о реальных пользователях с опозданием на четыре недели, сгруппированных по сегментам URL. Ни один из них не скажет вам, какой элемент на странице перед вами является проблемой.
Этот инструмент измеряет страницу, которую вы на самом деле просматриваете, по мере ее использования. LCP, CLS и INP получают плитку со своим значением, оценкой «Хорошо», «Требует работы» или «Плохо» в соответствии с опубликованными пороговыми значениями Google, а также полосу, показывающую, где вы сидите. FCP и TTFB располагаются рядом с ними для контекста, поскольку медленный LCP, вызванный медленным сервером, отличается от проблемы, вызванной тяжелым изображением.
Определения соответствуют тому, что Chrome сообщает CrUX, что важно, если вы собираетесь сравнивать цифры с Search Console. CLS использует окна сеансов — окно заканчивается после перерыва в одну секунду или через пять секунд, и побеждает худшее окно — вместо того, чтобы наивно складывать каждую смену вместе. INP — это 98-й процентиль задержки взаимодействия, что для обычного посещения является самым медленным взаимодействием. LCP перестает меняться при первом взаимодействии, точно так же, как это делает Chrome.
Самое полезное, что каждое число атрибутировано. На панели указаны элементы с наибольшим размером краски, элементы, которые сместились, и самые медленные взаимодействия, а кнопка «Показать» прокручивает до любого из них и выделяет его на странице. Вместо того, чтобы знать, что CLS равен 0,31, вы видите баннер, который опускает ваш контент. Отчет о копировании передает вам все это в виде текста для билета.
Три показателя рейтинга обновляются по мере использования страницы: прокрутка перемещает CLS, нажатие и ввод перемещения INP. Каждый из них имеет рейтинг «Хорошо», «Требует доработки» или «Плохо» в соответствии с пороговыми значениями Google.
Называет самый большой элемент краски, элементы, которые сместились, и самые медленные взаимодействия. Нажмите «Показать», чтобы перейти к любому из них и выделить его прямо на странице.
CLS использует окна сеансов с интервалом в 1 с и ограничением в 5 с, INP — это 98-й процентиль задержки взаимодействия, а LCP зависает при первом взаимодействии — поэтому ваши цифры совпадают с данными Search Console.
Первая контентная отрисовка и время до первого байта находятся рядом с большой тройкой, поэтому вы можете отличить медленный сервер от тяжелого главного изображения, прежде чем начнете оптимизировать что-то не то.
Перечисляет самые медленные взаимодействия с типом события и задействованным элементом, поэтому можно найти медленный раскрывающийся список или фильтр, а не гадать.
Одним щелчком мыши копируются все показатели, рейтинги и селекторы, вызывающие нарушения, в виде обычного текста — их можно вставить в заявку, запрос на включение или электронное письмо клиенту.
Подтвердите, что LCP, CLS и INP включены в новый шаблон, прежде чем он будет запущен в эксплуатацию, вместо того, чтобы узнавать об этом в Search Console месяц спустя.
Search Console сообщит вам, что группа URL-адресов не соответствует CLS; откройте один из них с помощью этого инструмента и посмотрите, какой именно элемент выполняет сдвиг.
Прокрутите страницу и наблюдайте, как CLS поднимается, затем нажмите «Показать», чтобы выделить рекламу с поздней загрузкой, баннер или веб-шрифт, который перемещает ваш контент.
Просматривайте фильтры, меню и модальные окна, затем прочитайте список самого медленного взаимодействия, чтобы узнать, какой элемент управления требует сотен миллисекунд.
Запишите цифры, внедрите исправление, затем еще раз измерьте ту же страницу и сравните два отчета рядом.
Щелкните значок Core Web Vitals в доке DevSuite Pro. Плитки показателей появляются сразу же, используя все, что уже записано на странице.
LCP имеет смысл только с самого начала загрузки страницы, поэтому перезагрузите ее с открытой панелью, если вам нужны показания, которым вы можете доверять.
Прокрутите всю страницу, чтобы проверить CLS, и нажмите, коснитесь и введите, чтобы сгенерировать измерения INP. Плитки обновляются по мере вашего продвижения.
Нажмите «Показать» рядом с элементом LCP, источником смещения макета или медленным взаимодействием. Страница прокручивается до него и выделяет его, чтобы не было двусмысленности относительно того, какой элемент за это отвечает.
Нажмите «Копировать отчет», чтобы получить сводную текстовую информацию по каждому показателю, рейтингу и селектору. Нажмите Reset, чтобы снова запустить CLS и INP с нуля.
Установите DevSuite Pro бесплатно и разблокируйте более 71 инструментов разработчика для вашего браузера.
