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 използва сесийни прозорци с интервал от 1s и ограничение от 5s, INP е 98-ия персентил на закъснението на взаимодействието, а LCP замръзва при първо взаимодействие — така че вашите числа съответстват на Search Console.
First Contentful Paint и Time To First Byte стоят до голямата тройка, така че можете да различите бавен сървър от изображение на тежък герой, преди да започнете да оптимизирате грешното нещо.
Изброява най-бавните ви взаимодействия с типа на събитието и участващия елемент, така че може да се намери мудно падащо меню или филтър, вместо да се предполага.
Едно щракване копира всяка метрика, оценка и селектор за нарушение като обикновен текст — готов за поставяне в билет, заявка за изтегляне или клиентски имейл.
Потвърдете, че 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+ инструмента за разработчици за вашия браузър.
