Core Web Vitals (CWV) - це основні вебпоказники сайту, за якими Google оцінює зручність сторінок сайту. CWV - є фактором ранжування, тож цим показникам слід приділити увагу, а для цього треба добре розуміти, що оцінюють ці показники і що на практиці призводить до поганих результатів.
Хочу підкреслити, що огляд показників буде актуальним на 2026 рік. Коли Core Web Vitals з’явився в 2020 році, то його метрики були дещо іншими. І цілком ймовірно, що вони будуть ще змінюватись згодом.
LCP (Largest Contentful Paint)
LCP - швидкість завантаження найбільшого контенту в області перегляду (першому екрані).
Хоча LCP оцінює і текстовий контент, такий контент навряд буде повільним. Коли на сайті є проблема з LCP, вона, зазвичай, стосується зображень або відео.
Google вважає, що LCP менше 2,5 секунд - це гарний результат. Від 2,5 до 4 секунд - прийнятний. І все, що більше 4 секунд - є поганим результатом.
Як досягти зеленої зони LCP?
Оптимізація зображень.
Часто на сайтах завантажують занадто важкі зображення. Вони або мають велетенську роздільну здатність (більшу, ніж здатен показати екран), або просто погано стиснуті й займають багато пам’яті без потреби.
Підготовка зображень - це перший крок до зеленої зони LCP, та й швидкого завантаження сайту в цілому.
Підготовка окремих зображень для мобільних пристроїв.
Велика рідкість - побачити на сайті окремі зображення банерів чи фонових зображень для мобільних пристроїв. На смартфон через мобільний інтернет завантажуються файли для десктопної версії, які часто ще й не оптимальні навіть для неї.
Для усіх місць на сайті, де використовуються великі зображення, слід передбачити використання окремих файлів для мобільних пристроїв.
Попереднє завантаження зображень.
Коли браузер відтворює сторінку сайту, він робить це поступово, читаючи код згори донизу, попутно завантажуючи додаткові файли. Коли він доходить до найбільшого зображення в області перегляду, сторінка може вже бути частково відтвореною, але на завантаження зображення може піти якийсь час, особливо на мобільних пристроях. В цей час, користувач буде бачити просто дірку, що і призведе до поганого LCP.
Можна налаштувати попереднє завантаження такого зображення, щоб коли браузер дійде до його відтворення, воно вже було завантажено.
Зменшення часу відповіді серверу (TTFB).
Коли ви в браузері відкриваєте сторінку сайту, браузер відправляє на сервер запит до цієї сторінки. Сервер обробляє запит, виконує програмний код цієї сторінки, збирає інформацію з бази даних, формує html-документ і відправляє його назад браузеру. Час, за який відбуваються ці процеси, називають часом відповіді сервера (TTFB - Time To First Byte). Доки браузер не отримає цей документ, він не може нічого завантажувати і відтворювати сторінку, бо ще не знає, що саме йому робити. Тож, якщо у вас великий TTFB, то навіть на сайті з ідеально оптимізованими зображеннями ви можете отримати поганий LCP.
Причин великого TTFB може бути багато, наприклад: недостатньо серверних ресурсів, повільний програмний код, неоптимізована база даних, атака ботів на сервер. З усіма цими причинами можна і треба працювати.
INP (Interaction to Next Paint)
INP - взаємодія до наступного відтворення. Метрика оцінює загальну швидкість відгуку сторінки на дії користувача, відстежуючи затримку усіх кліків, тапів та дій з клавіатурою протягом усього часу використання сайту. В залік іде найгірший результат.
Хорошим показником INP вважається час до 200 мілісекунд. Від 200 до 500 мілісекунд - це середній результат. І все, що більше половини секунди - це поганий результат.
Як знизити INP на сайті?
Основною причиною поганого показника INP є проблема із JavaScript. Скрипти можуть бути великими, складними, їх може бути дуже багато. Якщо на сайті інтерактивність реалізована такими скриптами, то з моменту дії користувача до моменту відтворення може проходити значний час.
Також, причиною поганого INP може бути великий TTFB, якщо дія на сторінці звертається до серверної логіки через Ajax.
Ну і насамкінець, причиною може бути екстремально поганий CSS, але це неймовірна рідкість.
Для того, щоб тримати INP в зеленій зоні, всі такі проблеми краще вирішувати в докорінно. Хоча, є й інший шлях. INP потребує швидкої реакції сайту на дії користувача. Тож, якщо функції сайту потрібен час на виконання, ви просто можете в цей час показати індикатор завантаження, це влаштує метрику INP, але навряд це сильно влаштує користувачів.
CLS (Cumulative Layout Shift)
CLS - це сукупний зсув макета. Мається на увазі зміна положення елементів інтерфейсу сайту сайту, під час його завантаження. Зсув вимірюється у відносних одиницях, що враховують те, який відсоток на екрані займає елемент, що змістився, і те, наскільки він змістився.
Хороший CLS - до 0,1. Середній - 0,1-0,25. Поганий результат - більше 0,25 одиниць.
Які причини поганого CLS?
В зображень не зазначені атрибути ширини та висоти.
Коли браузер читає html-документ, він одразу його відтворює. Але файли він завантажує пізніше. Тому, якщо у тега зображення не зазначені параметри розміру, браузер не знає, скільки місця треба зарезервувати для зображення. І коли зображення з’являється, контент, що йде нижче зсувається. Якщо вже бути точним, то браузеру, для вирішення цієї проблеми, потрібні не розміри, а співвідношення сторін, але з розмірів він вираховує це співвідношення.
Якщо зазначити параметри розмірів у зображень, то це вирішить більшість проблем зсуву.
Розмір блоку регулюється контентом, якого немає при відтворенні сторінки.
Здебільшого, це буває коли якийсь контент виводиться за допомогою JavaScript, який завантажується і виконується трохи пізніше. Таким контентом можуть бути сторонні рекламні банери або ж контент вашого сайту, наприклад - відгуки.
В більшості таких випадків, можна задати розмір блоку і тоді, коли контент завантажити, він займе своє місце без зсуву.
Підключення шрифтів.
Інколи, використання сторонніх шрифтів на сайті призводить до того, що шрифт може завантажитись з затримкою. Якщо текст почав відтворюватись з одним шрифтом, а потім змінився на інший, то ймовірно він хоч трохи зміниться в розмірах, що призведе до зсуву.
Як перевірити метрики Core Web Vitals?
Ви можете переглянути показники Core Web Vitals у відповідному розділі вашого Search Console. Майте на увазі, що дані можуть не відображатись для сайтів з низькою відвідуваністю. Метрики починають показуватись при досягненні певної кількості відвідувань (кількість не зазначається) за останні 28 днів.
Також ви можете подивитись значення основних метрик в PageSpeed Insights. Але будьте уважні. Сам PageSpeed не проводить вимірювання, він робить імітацію завантаження і аналізує те, що імітував. Його дані можуть бути дуже далекі від реальних. Але якщо у сайту є необхідна кількість відвідувань за 28 днів, то в PageSpeed Insights почне відображатись блок реальних даних Core Web Vitals.