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.
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 інструментів розробника
