Core Web Vitals

Як перевірити сайт на відповідність новим факторам оцінки якості від Google і поліпшити показники. Google постійно вдосконалює алгоритми, щоб поліпшити якість пошукової видачі. У травні 2021 року на ранжування впливатимуть нові фактори оцінки якості ресурсу. Цих факторів багато, але основних всього три.

У статті розбираємося з Core Web Vitals, розповідаємо про інструменти перевірки цих показників і даємо поради, як покращити параметри сайту, щоб як і раніше отримувати трафік з Google.

Що таке Core Web Vitals

У травні 2020 року Google анонсував новий алгоритм ранжирування під назвою Page Experience. Мета його впровадження – ранжувати вище ресурси, з якими користувачеві буде зручніше взаємодіяти. Складовою частиною алгоритму стали фактори Core Web Vitals – швидкість завантаження, можливість швидкої взаємодії з контентом і візуальна стабільність:

Інші показники (адаптивність під мобільні пристрої, наявність HTTPS і безпечного перегляду, відсутність блоків, що заважають сприймати вміст сайту) давно знайомі вебмайстрам, які оптимізують ресурси під вимоги Google.

Пояснимо докладніше, які показники ховаються під загальною назвою найважливішої групи факторів — Core Web Vitals.

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

Всі три фактори засновані на користувацькому досвіді взаємодії з ресурсом. Якщо відвідувач сайту швидко побачив основний вміст сторінки, зміг зробити потрібну дію і не відчув при цьому перешкоди у вигляді «з’їхавшої» верстки — такий ресурс вважається якісним.

Співробітник Google Гері Ілш уточнив, що Core Web Vitals, швидше за все, ніколи не стануть головним фактором ранжирування в органічному пошуку. Але, тим не менш, зовсім не звертати на них уваги не варто.

Цікаво, що Google планує впровадити “візуальні індикатори” для сторінок, з якими користувачеві буде зручніше взаємодіяти. Про це повідомлялося в блозі Google Пошуку, але тестування таких елементів у видачі поки помічено не було. Можливо, це будуть аналоги знаків Яндекса. Крім того, на видачі будуть виводитися фрагменти або зображення зі сторінок, для того, щоб можна було оцінити їх зручність. Чи буде це виглядати аналогічно розширеним сніпетам – подивимося в травні.

Інший відомий гугломен Джон Мюллер повідомив, що тип сайту (інформаційний портал, блог, інтернет-магазин) або сторінки ніяк не впливає на вимірювання значень Core Web Vitals (у вихідному твіті мова йде про показник CLS). Це означає, що всі сайти за цими показниками конкурують з усіма. Однак в реальній видачі конкуренція йде серед схожих проектів, тому і може створюватися таке враження.

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

6 сервісів для перевірки Core Web Vitals вашого сайту

Якогось спеціалізованого інструменту, заточеного на перевірку конкретно трьох показників Core Web Vitals, немає. Але в цьому і немає особливої необхідності, тому що перевірити свій ресурс на відповідність новим параметрам можна за допомогою сервісів, які вебмайстри постійно використовують у своїй роботі. Дані для аналізу, які надають ці інструменти, отримані в результаті взаємодії реальних користувачів з вашим сайтом або зімітовані в «лабораторних» умовах.

Про реальну взаємодію з веб-сторінкою можна дізнатися зі звіту про користувацький досвід Chrome (CrUX). Це звіт, в якому зібраний реальний користувальницький досвід взаємодії з мільйонами сайтів. Дані CrUX зберігаються в базі Google BigQuery і доступні у звіті “Основні інтернет-показники” в Google Search Console і сервісі Page Speed Insights.

Якщо даних про взаємодію реальних користувачів з сайтом немає або недостатньо, змоделювати такі дії і відобразити метрики Core Web Vitals допоможуть Lighthouse і Chrome Dev Tools.

У “лабораторних” інструментах на відміну від “польових” неможливо обчислити показник FID, тому що взаємодії користувача з контентом не відбувається. Замість цього вводиться показник TBT (Total Blocking Time), який показує час в мілісекундах до можливої першої взаємодії з інтерактивними елементами на сторінці. Зупинимося на кожному інструменті докладніше.

Звіт “основні інтернет-показники” в Google Search Console

Цей звіт знаходиться в розділі «Поліпшення» і являє собою дані про ступінь відповідності сторінок сайту метрик CWV (окремо для мобільних пристроїв і ПК): По кліку на посилання «Відкрити звіт» для мобільних або ПК відкриється гістограма, яка наочно показує динаміку груп сторінок, і розділ «Відомості», де позначені типи проблем.

Всі URL сайту розбиті на три групи — «низька швидкість», «потрібно збільшити швидкість» і «цілком надійний».

Важливо розуміти, що в цьому звіті відображаються показники для груп сторінок, показники для окремого URL краще дивитися в Page Speed Insights.

Після виправлення тієї чи іншої проблеми клікніть навпроти неї в колонці “перевірка”, потім “перевірити виправлення»: повторна перевірка може зайняти до 28 днів.

PageSpeed Insights

Цей популярний у вебмайстрів інструмент агрегує дані з Lighthouse і CrUX (тобто «лабораторні» і «польові»). Відомості акумулюються в наочному звіті за основними показниками, пов’язаними зі швидкістю завантаження сторінки. За колірною гамою і кількісним значенням відразу можна зрозуміти, які з показників потребують доопрацювання і наскільки це критично.

Звіт ділиться на кілька блоків. Оцінка в балах окремо для десктопної і мобільної версії/

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

Якщо даних недостатньо, про це буде виведено повідомлення.

У контексті Core Web Vitals для вебмайстра важливий блок “дані спостережень”, який надає кількісні показники по кожному з параметрів. Якщо даних по реальним користувачам Chrome у Google недостатньо, доведеться задовольнятися даними, отриманими при імітації завантаження сторінки.

Для проектів, орієнтованих на просування за межами України, також підійде інструмент WebPageTest.

Lighthouse

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

Популярні способи використання Lighthouse – запустити інструмент через консоль браузера або завантажити розширення для Chrome.

Наведемо приклад використання Lighthouse через консоль розробника в Chrome.

1. Відкрийте веб-сторінку, яку ви хочете перевірити, у веб-переглядачі Chrome.
2. Викличте консоль правою кнопкою миші (опція «Переглянути код» в контекстному меню) або комбінацією гарячих клавіш (Ctrl + Shift + I або ⌥ + ⌘ + i).
3. Знайдіть вкладку “Audits” або “Lighthouse”.
4. На вкладці можна відзначити або виключити категорії аудиту, а також вибрати аудит для мобільної або десктопної версії сайту.
5. Клацніть “Generate report”.

Через кілька секунд ви отримаєте докладний звіт про продуктивність і якість сторінки. Метрики CWV знаходяться в розділі “продуктивність”.

Chrome Dev Tools

Chrome Dev Tools – це сукупність інструментів для розробників, які можна використовувати безпосередньо в браузері Google Chrome.

Для того, щоб отримати звіт про показники CWV на сторінці, що цікавить, відкрийте її в Chrome, викличте консоль розробника, далі дійте так:

• відкрийте вкладку “Performance;
• активуйте чекбокс “Web Vitals”;
• натисніть на іконку перезавантаження і запуску звіту.

Через кілька секунд на вкладці з’явиться наочний звіт по швидкості завантаження сторінки, включаючи значення показників CoreWebVitals:

Звіт не так інтуїтивно зрозумілий, як представлення тих же даних, наприклад, в PageSpeed Insights, але і призначений він для розробників.

Розширення для Chrome Web Vitals

Це розширення в реальному часі покаже стан параметрів LCP, FIP і CLS на конкретній сторінці. Після установки при заході на будь-який сайт значок розширення за допомогою колірної індикації повідомляє про те, чи все в порядку з метриками на сторінці. Зелений колір свідчить про те, що всі три параметри в нормі, червоний — що один або кілька перевищують порогові значення.

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

Якщо вам важливо, щоб значення метрик були постійно в зоні видимості (наприклад, в процесі розробки або впровадження поліпшень), зайдіть в параметри розширення (клікнувши правою кнопкою на його значок), виберіть опцію “Display HUD overlay” і збережіть.

Розширення Web Vitals використовує бібліотеку web-vitals.js. Для програмістів корисно знати, що її можна підключити до середовища розробки і таким чином отримувати дані про взаємодію користувачів зі сторінками сайту. Інструкцію з підключення та використання бібліотеки знайдете на GitHub.

Screaming Frog

Парсер Screaming Frog – це інструмент для комплексного SEO-аудиту ресурсу. Для того щоб провести аудит показників CWV, вам знадобиться платна версія.

Процес перевірки складається з наступних етапів:

1. Підключіть API PageSpeed Insights до Screaming Frog. Для цього перейдіть в розділ Configuration / API Access / PageSpeed Insights, вставте ключ API у відповідне поле і натисніть на кнопку “Connect”.
2. Виберіть метрики, які ви хочете відстежувати при скануванні. Огляд (Overview) – Загальна інформація по конкретній сторінці (її розмір і потенціал для економії часу завантаження). Метрики CrUX — CrUX Metrics) – дані зі звіту про користувацький досвід Chrome (якщо вони доступні). Метрики Lighthouse (Lighthouse Metrics) – дані, отримані в результаті імітації завантаження сторінки, включаючи показники LCP і CLS. Можливості (Opportunities) – пропозиції щодо оптимізації швидкості завантаження для конкретної сторінки. Діагностика (Diagnostics) – додаткова інформація про продуктивність сайту в цілому.
3. Проскануйте сайт.
4. Після закінчення сканування експортуйте дані для аналізу в xslx-файл. Для цього на панелі навігації виберіть “PageSpeed”, потім “Export”. Core Web Vitals: що потрібно про це знати і як підготуватися до впровадження
5. Відфільтруйте дані в таблиці, які перевищують максимальні показники по кожному параметру CWV. Для зручності можна створити окрему вкладку для кожного показника.

Цей звіт інформативний для SEO-фахівця, власника бізнесу і розробника з кількох причин:

• він дає розуміння загальної картини відповідності ресурсу метрикам CWV (можна обчислити відсоток сторінок сайту, які перевищують порогові значення);
• показовий для програмістів – є готовий список сторінок, які вимагають доопрацювання;
• виявляє комплексні проблеми (наприклад, незадовільні показники відзначаються на сторінках певних шаблонів).

Ще одна опція аудиту в Screaming Frog – можливість отримати детальну інформацію по кожній метриці PageSpeed Insights для сторінок вашого сайту. Для цього на вкладці «Overview» прокрутіть до розділу “PageSpeed”, виберіть цікаву проблему і експортуйте в окремий файл всі порушені URL-адреси.

Отримані дані в таблиці краще відфільтрувати за значенням потенційної економії швидкості завантаження (в мілісекундах або байтах) — так ви зможете визначити пріоритетні завдання для доопрацювання на конкретних сторінках.

Як поліпшити показники якості: поради вебмайстрам

Дамо рекомендації щодо поліпшення кожного показника Core Web Vitals.

Оптимізуємо показник LCP

На час відтворення найбільшого контенту на сторінці впливає продуктивність сервера, повільне завантаження ресурсів (в основному, зображень і відео), рендеринг на стороні клієнта, а також блокуючі рендеринг JavaScript і CSS.

Подивимося, як можна поліпшити значення LCP, виходячи з цієї інформації.

• Оптимізуйте процеси на сервері, якщо це необхідно. Сигналом того, що сервер довго обробляє запит, може служити збільшений показник TTFB (час до першого байта).
• Якщо для вашого сайту актуальні переходи з різних геолокацій, розгорніть CDN — Content Delivery Network) – мережа серверів, розподілених по різних географічних точках. Ця технологія дозволяє браузеру користувача отримувати контент з сервера, який знаходиться ближче.
• Кешуйте HTML-код на стороні сервера, якщо він статичний і не змінюється при кожному запиті.
  Для підключення сторонніх сервісів використовуйте атрибут rel= “preconnect”.
• Використовуйте сервіс-воркери — Service Workers) – сценарії передачі даних між сервером і браузером, які в тому числі дозволяють кешувати відповіді.
• Мінімізуйте і відкладіть некритичний CSS, блокуючий рендеринг, невикористаний CSS видаліть.
• Мінімізуйте JavaScript і видаліть невикористовувані JS-скрипти.
• Оптимізуйте і стискайте зображення, конвертуйте їх в нові формати (наприклад, WebP).
• Використовуйте пріоритетне завантаження критично важливих ресурсів (шрифтів, зображень або відео у верхній частині екрана). Скорочуємо значення FID

Основний спосіб скоротити значення показника FID – оптимізувати JavaScript:

• впровадити асинхронне завантаження коду і відкласти виконання будь-якого некритичного JavaScript;
• при виконанні JS-скриптів розбити довгі завдання на коротші;
• використовувати веб-воркери-сценарії, які дозволяють JS-скриптам виконуватися в тлі;
• використовувати прогресивне завантаження коду;
• розставити пріоритети при завантаженні власних сценаріїв сторінки і стороннього коду;
• мінімізувати обсяг даних, який завантажується на стороні клієнта.

Добиваємося оптимального показника CLS

Значення сукупного зсуву макета (CLS) залежить від декількох параметрів:

• чи задані розміри для зображень на сторінці;
• чи присутні в контенті вбудовані оголошення і фрейми;
• чи є на сторінці контент, який завантажується асинхронно (шрифти, відеоролики, зображення);
• чи є динамічний контент, який завантажується над елементами контенту сторінки (наприклад, рекламний банер).

Що вебмайстру робити з цією інформацією?

Перш за все, додавайте атрибути width І height в код елементів, які містять зображення або відео — це дозволить браузеру заздалегідь зарезервувати місце під ці елементи і не збивати користувача з пантелику раптовими переміщеннями контенту.

Друга порада – уникайте завантаження динамічного контенту над основним вмістом сторінки, це найчастіше призводить до завищених значень CLS.

Ще один лайфхак: щоб підготувати користувача до змін на сторінці, можна використовувати властивості CSS transform: scale () і transform: translate () — вони застосовуються для анімації елементів без зрушень макета.

Перевірте, чи готовий ваш сайт до page Experience

Ще раз коротко перерахуємо, на що варто звернути увагу вебмайстрам у зв’язку з оновленням алгоритму Google.

1. Регулярно відстежуйте показники Core Web Vitals за допомогою будь-якого зручного інструменту, порівнюйте “лабораторні” і “польові” дані і оперативно впроваджуйте зміни.
2. Використовуйте AMP-технологію швидкого завантаження сторінок.
3. Визначте “проблемні” шаблони сторінок і оптимізуйте їх, щоб не множити негативний досвід.
4. Мінімізуйте кількість сторонніх скриптів в коді сторінок, а також блокування рендерингу JS-скриптами і CSS.
5. Використовуйте CDN, сервіс-воркери, веб-воркери і оптимізуйте продуктивність сервера.
6. Оптимізуйте JavaScript – код шляхом кешування, стиснення, чищення від скриптів, які не використовуються.
7. Стискайте зображення і переводите їх в нові формати.
8. Задайте певні розміри для елементів верстки (зображень, відео, CTA-кнопок, банерів та ін.), щоб браузер в процесі завантаження зарезервував простір під їх можливе відображення.
9. Не забувайте про інші показники, складові Page Experience: мобілопридатність ресурсу, доступність по захищеному протоколу HTTPS, відсутність блоків, що заважають сприйняттю контенту і шкідливого ПЗ.