замовити дзвінок
+38 057 755-48-00
Starting a new project?
отримати консультацію
18
1

5 травня Google розповів про оновлення Web Vitals та анонсував нові метрики оцінки якості сайтів (ранішн Google враховував ці 200+ факторів ранжування ресурсів). Доступні вони стануть восени 2021.

Показники додаються до звіту PageSpeed ​​Insights та безпосередньо впливають на загальну оцінку сайту в балах.

Для користувачів важливі не бали, а Page Experience (користувацький досвід): якщо сайт завантажується 1-3 секунди, показник відмов збільшується на третину. А 7 з 10 відвідувачів навряд чи куплять що-небудь на майданчику, що завантажується довго. Це величезні фінансові втрати, яких можна уникнути як раз за допомогою Core Web Vitals.

Показники якості сайтів Google (Page Experience):

  • mobile friendly;
  • безпеку перегляду;
  • протокол HTTPS;
  • відсутність нав'язливої ​​реклами (pop-up);
  • Core Web Vitals.

Core Web Vitals

Рис. 1 - Показники якості сайтів Google

Розберемо Core Web Vitals більш докладно.


1. Core Web Vitals

Core Web Vitals – це 3 складові фактора ранжування Web Vitals, що застосовуються до всіх сторінок сайту. Вони вимірні та відбиваються всіма інструментами Google.

Головними показниками Core Web Vitals виступають 3 критерії:

  • LCP (Largest Contentful Paint) – час відтворення основної частини вмісту сторінки (великий текстовий блок чи зображення);
  • FID (First Input Delay) – показує, скільки часу проходить між першою дією користувача (клік на будь-який елемент) та відповіддю сторінки на цю дію;
  • CLS (Cumulative Layout Shift) – загальний зсув елементів сторінки під час її завантаження.

1.1 Звіт ефективності

Разом метрики визначають ефективність роботи сторінок вашого сайту та зручність користування. На їх основі формується детальний звіт в Google Search Console.

Щоб протестувати сайт, необхідно ввести адресу головної сторінки сайту та надати сертифікат володіння (завантажити його на свій сайт).

Core Web Vitals

Рис. 2 – Google Search Console

Core Web Vitals

Рис. 3 – Google Search Console

Всім URL-адресами присвоюється один з 3 статусів:

  • добре (зелений колір);
  • можна поліпшити (помаранчевий колір);
  • погано (червоний колір).

Для кожної метрики є рекомендовані значення, до яких потрібно прагнути:

Core Web Vitals

Рис. 4 – Показники Core Web Vitals (джерело)

LCP FID CLS
добре менше 2.5 секунд менше ніж 100 мілісекунд менше 0.1
можна поліпшити менше або дорівнює 4 секундам понад 4 секунди менше чи дорівнює 0.25
погано понад 4 секунди понад 300 мс більше 0.25


URL також групуються за проблемам т. я. найчастіше у схожих сторінок однакова проблема.

Крім звичайних значень основних показників наводяться зведені – мінімальне значення кожного з 3 інтернет-показників до 75% відвідувань сторінки з групи.

Крім Google Search Console показники Core Web Vitals можна подивитися й самостійно:

  1. Завантажуємо архів web-vitals-extension-master з Chrome.
  2. Розпаковуємо.
  3. Відкриваємо в Chrome сторінку розширень chrome://extensions/.
  4. Перетягуємо на неї розпакований архів – збережену папку web-vitals-extension-master.

Тепер відкриваємо будь-який сайт та дивимося в рядку розширень браузера на квадрат праворуч:

Core Web Vitals

Рис. 5 – Показники Core Web Vitals в emojipedia


1.2 Джерело даних

Вся інформація береться зі звітів про використання вашого сайту реальними користувачами, які збирає Гугл. Програма не створить звіт, якщо даних недостатньо. А якщо ви недавно створили сайт, то доведеться почекати кілька днів, поки не збереться достатньо даних.


1.3 Що в результаті

У звіті всі URL сайту розбиті за статусом, та клікаючи на кожен статус, можна побачити всі сторінки з кожної групи у вигляді таблиці. Натискаючи на рядок, ви побачите інші приклади сторінок тестованого сайту з тією ж проблемою.

Для кожної адреси в результаті перевірки присвоюється мінімальне значення серед LCP, FID та CLS.

Результати ще представляються у вигляді діаграми із зазначенням числа рядків таблиці та кількістю підсумкових веб-адрес сторінок, розділених за статусом. URL в діаграмі зустрічається тільки 1 раз. У таблиці може з’являтися кілька разів, якщо пов’язаний з різними проблемами.

Дані звіту діляться на 2 основні вкладки за типом пристрою:

  1. десктоп;
  2. мобільний.

Core Web Vitals

Рис. 6 – Google Search Console

Перше, що варто виправити – сторінки з позначкою “погано”. У цьому допоможе PageSpeed ​​Insights. Також варто опрацювати адреси з позначкою “можна поліпшити”.

Виправлення

Після усунення проблеми натисніть “почати відстежувати” у Search Console.
Моніторинг відбуватиметься протягом 4-х тижнів. Якщо за цей час проблема знову проявиться, то програма зробить відповідну позначку.

Перевірка може мати кілька статусів (розпочато, не розпочато, помилка і т. д.), які можна подивитися на сторінці відомостей.
У кожної сторінки теж є статус, що відображається в розділі перевірок. Так можна дізнатися, вирішена або не вирішена проблема, а якщо ви бачите мітку “в очікуванні” – значить консоль все ще очікує інформацію по сторінці.


2. Lazy loading у WordPress

Найбільше з оновленням Core Web Vitals пощастило сайтам на WordPress.
11 серпня вийшла нова версія CMS 5.5. Її головна фішка – відкладене завантаження зображень (lazy loading).

Що це означає для користувача?

Коли ви відкриваєте сторінку, то зображення завантажуються не всі одразу, а тільки ті, що зараз видимі на екрані. Прокручуєте вниз – завантажуються інші.
Так движок забезпечує максимальну швидкість завантаження сторінки, коректне відображення картинок та стабільність роботи. А це саме те, чого й вимагає Google в Core Web Vitals.


Висновки

Звіт ефективності роботи сторінок сайту дозволить знайти всі проблемні URL, щоб дізнатися їх обсяг та дані за ними. А зручне угруповання проблем заощадить час на тестування внутрішніх сторінок сайту (уявіть, якщо таких тисячі).

Після усунення неполадок можна перевірити, чи правильно ви все зробили, та отримати повний звіт через місяць.
І все це в одній програмі – не дивно, що веб-майстри її так люблять.


Скорость загрузки сайтов

Швидкість завантаження сайтів. Що потрібно знати

Продвижение Яндекс укр

Просування сайту під Яндекс

Підпишіться на наші оновлення
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Ви вже підписані на нашу розсилку!

Підтвердіть свій email для завершення підписки.

Замовити
просування
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Дякуємо! Скоро з вами зв'яжеться наш менеджер.