Паблішер може покращити ефективність свого веб-сайту і для цього потрібно виміряти Core Web Vitals. В цій статті ви дізнаєтесь про те, як вимірювати швидкість завантаження, інтерактивність і візуальну стабільність для кращої взаємодії з користувачем.
Google визначив набір показників, на яких власники сайтів повинні зосередити свою увагу під час оптимізації своїх сторінок. Показники Core Web Vitals є частиною загальної картини якості сторінки для Google, яким мають прагнути відповідати всі веб-сайти, що ранжуються у цій пошуковій системі.
Очікування користувачів щодо роботи в Інтернеті можуть відрізнятися залежно від сайту та контексту, але деякі залишаються незмінними незалежно від того, де саме в Інтернеті вони знаходяться.
Зокрема, Google визначає основні потреби користувача, такі як
- швидкість завантаження,
- інтерактивність,
- візуальна стабільність.
Що таке основні веб-показники?
Google рекомендує власникам сайтів мати показники CWV нижче порогу «хорошого рівня», зазначеного в цій таблиці:
| Показник | Добре | Погано |
| Час на відображення найбільшого елементу (LCP) | ≤2500 мс | >4000 мс |
| Взаємодія з наступним відображенням (INP) | ≤2000 мс | >500 мс |
| Сукупний зсув макета (CLS) | ≤1 | >0.25 |
Все, що знаходиться між хорошим і поганим, вважається помірним, і його можна (і слід) покращувати.
Діаграма, що показує три показники продуктивності Core Web Vitals
Google пояснює, чому ці три показники, такі важливі: усі вони фіксують важливі результати, орієнтовані на користувача, їх можна виміряти в польових умовах із використанням допоміжних діагностичних еквівалентів та інструментів.
Наприклад, у той час як Largest Contentful Paint є показником завантаження верхньої лінії, він також сильно залежить від First Contentful Paint (FCP) і часу до першого байта (TTFB), які залишаються критично важливими для моніторингу та вдосконалення.
Як Google вимірює основні веб-показники
Коли користувачі переглядають веб-сайти в звіті Google CrUX з браузера використовуються інструменти Chrome, щоб зібрати реальні дані користувачів з їх пристроїв. Щоб веб-сайт відповідав пороговим значенням CWV, принаймні 75% переглядів сторінок сайту повинні мати оцінку «добре».
Зверніть увагу, що тут використовуються 75% переглядів сторінок усього сайту, що означає, що сторінки з низьким CWV і меншим трафіком не вплинуть на загальну оцінку веб-сайту.
Ось чому ви можете виявити, що веб-сайти з оцінкою «добре» мають сторінки з жахливими CWV, і навпаки.
Цей метод вимірювання гарантує, що низька кількість відвідувань у відсотках через повільну роботу мережі не зменшить оцінку «добре» всього веб-сайту.
Ось як можна виміряти ці показники.
Як виміряти основні веб-показники
Google використовує можливості вимірювання Core Web Vitals у багатьох своїх існуючих інструментах.
Основні веб-показники можна виміряти за допомогою цих безкоштовних інструментів:
- PageSpeed Insights
- Розширення Web Vitals
- Lighthouse
- Інформаційна панель CrUX
- Search Console
- web-vitals.js і GA4
Давайте розберемося, як використовувати кожен із цих безкоштовних інструментів SEO для вимірювання основних веб-показників.
PageSpeed Insights
PageSpeed Insights дозволяє вимірювати основні веб-показники за допомогою лабораторних і польових даних, включених у звіти.
Лабораторний розділ звіту містить дані, зібрані з пристроїв реальних користувачів у всіх географічних регіонах і різних мережевих умовах, тоді як розділ польових даних показує дані зі змодельованих пристроїв, що використовують лише один пристрій.
Звіт про швидкість завантаження сторінок. Польові та лабораторні дані
Якщо ваші сторінки мають мало відвідувань або є новими, історичних даних для відображення звіту може бути недостатньо. У цьому випадку як резервний варіант, буде використовуватись середня оцінка поля для всього веб-сайту.
Оцінки CWV повертаються до початкової точки
Бракує даних
Після того, як ви запустите звіти, ви матимете список рекомендацій щодо покращення своїх оцінок.
Розширення Web Vitals
Використання інструменту PageSpeed Insights – це завжди чудовий спосіб налагодження та аудиту продуктивності, але часто він не зовсім зручний. Ви повинні відкрити нову вкладку у своєму браузері та перейти з тої сторінки, що відволікає увагу.
На щастя, у веб-магазині Chrome можна встановити розширення, яке вимірює показники Core Web Vitals у режимі реального часу під час перегляду, а також завантажує дані поля, якщо вони доступні.
Показники Core Web Vitals
Окрім цього стандартного інтерфейсу користувача, це доповнення також пропонує кращі можливості налагодження відображення за допомогою вкладки «консолі» DevTools браузера.
Налагодити показник Interaction Next Paint досить складно, оскільки він може погіршитися в будь-який момент під час взаємодії із користувачем. У PageSpeed Insights ви отримуєте лише середнє значення для всіх взаємодій, а не те, яка взаємодія з певним елементом на сторінці була повільною.
Використовуючи це розширення, ви можете взаємодіяти зі сторінкою та визначати елементи, які погіршують показник INP, перевіряючи журнали консолі. Наприклад, ви можете натиснути кнопки та перевірити консоль, щоб дізнатися, скільки часу тривала взаємодія.
Як тільки ви визначите, який елемент надто повільно відповідає, ви можете перевірити свій код JavaScript, щоб побачити, чи є сценарії, що блокують взаємодію.
Lighthouse
Lighthouse — це інструмент із відкритим вихідним кодом, який можна використовувати для перевірки продуктивності вашої веб-сторінки, і також він доступний у інструментах розробника Chrome DevTools.
Усі звіти про повноваження Lighthouse оновлено відповідно до останньої версії.
Приклад звіту Lighthouse у браузері Chrome DevTools
Є одне застереження, про яке слід пам’ятати: під час запуску Lighthouse у вашому браузері він також закриває багато ресурсів із ваших розширень Chrome, що може вплинути на ваші показники у звіті Lighthouse.
У повідомленні сказано про проблеми із запуском Lighthouse і, зокрема, зазначено, що розширення Chrome негативно впливають на швидкість завантаження сторінки.
Ось чому краще використовувати Chrome Canary. Chrome Canary має ізольовану інсталяцію від звичайного браузера Chrome, де ви можете отримати доступ до експериментальних функцій. Це дає змогу протестувати ваш веб-сайт із функціями, які будуть включені в наступні випуски Chrome.
Швидкі експерименти показали, наскільки сильно можуть відрізнятися показники швидкості сторінки Lighthouse у чистій установці Canary та у веб-переглядачі з увімкненими доповненнями.
Два скриншоти, які демонструють результати аудиту Lighthouse Google Chrome DevTools. Зліва: стабільна версія Chrome із доповненнями, праворуч: Canary без доповнень.
Однією з важливих функцій, яку підтримує Lighthouse, є вимірювання балів під час взаємодії з веб-сторінкою та вимірювання того, як певні взаємодії впливають на ваші бали, особливо показник Взаємодії з наступним відображенням (INP).
Проміжок часу в Chrome Lighthouse DevTools
Панель інструментів CrUX
Звіт CrUX — це загальнодоступний набір даних про реальний досвід користувачів на мільйонах веб-сайтів. Звіт Chrome UX вимірює польові версії всіх основних веб-показників, що означає, що він повідомляє дані реального світу, а не лабораторні дані.
За допомогою PageSpeed Insights, Lighthouse або надбудови Web Vital, про яку ми вже згадували, ви тепер знаєте, як виміряти ефективність окремої URL-адреси. Але як ви бачите повну картину веб-сайту з тисячами URL-адрес? Який відсоток URL-адрес мають «добрі» оцінки або оцінки за кілька місяців тому для порівняння?
У цьому допоможе безкоштовна інформаційна панель Google CrUX Looker Studio. Ви можете перевіряти сегменти та переглядати історичні дані.
Для цього просто скопіюйте та вставте свій домен у панель запуску CrUX.
Ну а після цього ви зможете безкоштовно насолоджуватись красивими звітами.
Звіт про розподіл з’єднань є дуже цінним: він може допомогти зрозуміти, чи низька продуктивність результатів пов’язана з проблемами мережі.
Розподіл підключень у звіті CrUX
На жаль, на цій інформаційній панелі немає розподілу показників CWV за країнами, але є безкоштовний інструмент treo.sh, за допомогою якого можна перевірити показники ефективності за географічними регіонами.
Розбивка показників CWV за географічними регіонами, що допомагає зрозуміти, де вони не досягають хороших результатів
Консоль Search
GSC — ще один інструмент, який дає змогу оцінити загальні показники CWV вашого веб-сайту.
Інформаційна панель Google Search Console із «Основними веб-показниками»
У звіті визначено групи сторінок, які потребують уваги, на основі реальних даних зі звіту Chrome UX. Якщо ви відкриєте звіт, клацнувши посилання у верхньому правому куті, ви побачите розбивку своїх проблем.
Звіт Core Web Vitals для мобільних пристроїв у GSC
Майте на увазі, що цей звіт отримує дані з CruX, а URL-адреси пропускатимуться, якщо вони не матимуть мінімальної кількості звітних даних, а це означає, що у вас можуть бути сторінки з низькими показниками CWV, про які тут не повідомляється.
Web-Vitals.JS и GA4
web-vitals.js — це бібліотека з відкритим кодом, яка точно вимірює показники CWV так само, як Chrome або PageSpeed Insights. Розширення web vitals, яке ми обговорювали вище, фактично використовує цю бібліотеку для звітування та журналювання.
Однак ви можете інтегрувати її з Google Analytics 4, щоб отримати докладний звіт про ефективність у масштабі веб-сайту з багатьма сторінками. Нижче наведено приклад коду для інтеграції з GA4.
<script type="module">
import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';
function getMetricRating(metricName, value) {
switch(metricName) {
case 'CLS':
return value <= 0.1 ? 'good' : value <= 0.25 ? 'needs-improvement' : 'poor';
case 'INP':
return value <= 200 ? 'good' : value <= 500 ? 'needs-improvement' : 'poor';
case 'LCP':
return value <= 2500 ? 'good' : value <= 4000 ? 'needs-improvement' : 'poor';
default:
return 'unknown';
}
}
function getAttribution( name, attribution){
switch (name) {
case 'CLS':
return attribution.largestShiftTarget;
case 'INP':
return attribution.interactionTarget;
case 'LCP':
return attribution.element;
default:
return 'unknown';
}
}
function sendToGoogleAnalytics({name, delta, value, id, attribution}) {
let rating = getMetricRating(name, value); //get metric rating based on value
let target_element = getAttribution( name, attribution); //get html element associated with metric
// Assumes the global `gtag()` function exists, see:
gtag('event', name, {
// Built-in params:
value: delta, // Use `delta`, a changed metric as it will be summed during user journey. If we use value it will sum new values resulting to inflated high numbers
// Custom params:
metric_id: id, // optional, Needed to aggregate events via BigQuery
metric_value: value, // optional,
metric_delta: delta, // optional,
metric_rating: rating, // optional,
debug_target: target_element // optional,
});
}
onCLS(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onLCP(sendToGoogleAnalytics);
</script>
In the code sample, ‘value’ is a built-inУ прикладі коду «value» є вбудованим параметром, а «metric_id», «metric_value», «metric_delta», «metric_rating» і «debug_target» є необов’язковими спеціальними параметрами, які ви можете включити відповідно до ваших потреб.
Якщо ви хочете бачити ці параметри у звітах GA4, вам потрібно додати їх у адміністраторі користувацьких визначень GA4. В іншому випадку, якщо ви вирішите надіслати ці параметри, а не додати їх через адміністратора, ви зможете отримати доступ до необроблених даних лише через BigQuery. Це забезпечує набагато більшу гнучкість, але вимагає досвіду SQL.
Якщо ви вирішите включити metric_id, який у випадку веб-сайтів із великим трафіком матиме невизначену кількість унікальних значень, це може спричинити проблеми із кардинальністю у звітах про дослідження.
Отже, ви можете на короткий період увімкнути ці додаткові спеціальні параметри, щоб зібрати зразки даних для усунення несправностей.
Щоб надіслати дані метрики CWV через Менеджер тегів Google, скористайтесь порадами із цього посібника, створенлого командою Google. Вам слід використовувати інтеграцію GTM яе найкращу практику, а наведений вище код (який є повністю функціональним) демонструє фундаментальну механіку збору даних CWV і звітування.
Крім того, що ми обговорювали, безкоштовні або платні інструменти, такі як Debugbear, treo.sh, Oncrawl, Lumar або Semrush, можуть допомогти вам визначити ваші бали на всіх сторінках у масштабі в реальному часі.
Проте варто зауважити, що з перерахованих інструментів Debugbear і treo.sh є вузькоспеціалізованими на метриках CWV і забезпечують високу деталізацію інформації з розширеною сегментацією.
А як щодо інших цінних показників?
Якими б важливими не були основні веб-показники, це – не єдині показники якості сторінки, на яких слід зосередитися.
Переконайтеся, що ваш сайт використовує HTTPS, є зручним для мобільних пристроїв, уникає нав’язливих проміжних сторінок і підтримує чітке розмежування між веб-сайтами, що є ключовими факторами ранжирування сторінок.
Тож подумайте про результат з точки зору користувача, а не як фактор ранжирування.
Наприклад, з точки зору конверсій, якщо у вас є повільний інтернет-магазин, ваші потенційні клієнти будуть йти, так і не зробивши покупку, що призведе до втрати доходу.
