Core Web Vitals: три нових метрики ранжування від Google

Час читання 8 хв.
Читaти статтю

Google влаштовує перегони сайтів. Призові місця займуть найшвидші. 5 травня компанія оголосила про нові параметри роботи сайтів, що будуть враховуватись під час ранжування. Їх назва Core Web Vitals. Запуск планується на 2021 рік і саме тоді, в топ потраплять найпрудкіші. Звісно, нововведення не скасовують чинні фактори, що впливають на просування сайту в топ, їх в Гуглі декілька сотень. А поки є час детально розібратись і підготувати свої вебсторінки до нових вимог. 

Що таке Core Web Vitals?

Головна мета — зробити онлайн-досвід комфортним для юзера. Окрім скоріше відомих факторів ранжування, що враховують User experience (UX): мобільності, безпечного перегляду, HTTPS та відсутності надокучливих вікон, алгоритм Google буде зважати на параметри, які вимірюватимуть швидкість роботи вебсайтів. Але, що це означає? Що, де і наскільки потрібно пришвидшити? Працівники Google чітко сформулювали 3 показники за якими буде проводитись оцінка й об’єднали їх під терміном Core Web Vitals:

1. Largest contentful paint (LCP)

Largest contentful paint (LCP) вимальовка найкрупнішого контенту. Вимірює час, за який завантажується найбільший елемент видимої сторінки. Ним найчастіше є відео, картинка або об’ємний текстовий блок.

Чому саме цей показник?

Метрики, що існували до LCP не враховують дані про те, що бачить на екрані користувач (DOMContentLoaded і Load) або занадто складні та часто помилкові (First Meaningful Paint (FMP), Speed Index (SI)). Тому неможливо визначити чи відвідувач сайту задоволений швидкістю завантаження. Експерти дійшли висновку, що найкращим мірилом буде час, за який вимальовується найбільший елемент сторінки. 

В цифрах

Для LCP та наведених нижче факторів ранжування, розробники запропонували 3 показники:

  • добре (зелена зона)
  • потрібне покращення (жовта зона)
  • недостатньо (червона зона)

Добре, якщо найбільший елемент сторінки зображатиметься за 2.5 секунди. В червону зону попадають після 4 секунд.

На що звернути увагу, якщо сайт в червоній зоні?

  • великі елементи. Якщо є можливість їх краще видалити. 
  • уважно зі скриптами. Кожен сторонній скрипт гальмує завантаження сторінки
  • оновіть свій вебхостинг
  • налаштуйте відкладене завантаження. Тоді елементи будуть вантажитись під час прокрутки.

2. First input delay (FID)

First input delay (FID) — затримка першого введення. Метрика, що показує затримку першого введення під час завантаження сторінки. Простіше, це як швидко сайт готовий співпрацювати з юзером. Введення тексту, завантаження картинки, натискання на посилання і т.д. 

Чому FID роблять важливим фактором ранжування?

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

В цифрах

Добрий час до 100 мілісекунд, поганий — більше ніж 300 мілісекунд.

На що звернути увагу, якщо сайт довго реагує?

  • Сторонні скрипти. Кнопки на соціальні мережі, служба аналітики — все це сповільнює роботу
  • “Важкий” код. Поки сайт аналізує HTML, CSS і Java Script він не зможе реагувати на запити клієнта.

3. Cumulative layout shift (CLS)

Cumulative layout shift (CLS) — сукупне зміщення макету. Показник стабільності макета. За допомогою  CLS, можна кількісно виміряти, як часто користувач зіштовхується з неочікуваними зсувами елементів під час завантаження вебсторінки.

Чому він важливий?

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

Цифри

Ідеал, якщо показник  CLS не перевищує 0.1. Якщо цей показник більший 0.25. значить у сайту серйозні проблеми.

Що тоді робити?

  • Фіксувати розмір зображень і відео
  • Не вставляти контент поверх іншого контенту
  • Надавати перевагу анімації перетворення над анімацією властивостей. 

Чому Core Web Vitals роблять важливим фактором ранжування?

Чим скоріше завантажиться сайт, стане готовим до взаємодії, чим менше буде дратувати користувача непередбачуваними “вчинками”, тим приємніше ним користуватись. Це вплине на позиції в пошуку і на трафік. Більший трафік — більша конверсія — більший дохід бізнесу.

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

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

Наприклад, Rossignol.com (французький інтернет-магазин гірськолижного спорядження та одягу) скоротив час завантаження на 1.9 секунди і знизив індекс швидкості в 10 раз і його конверсія піднялась на 94%.

Як виміряти показники Core Web Vitals?

Методи аналізу метрик ділять на: польові та лабораторні

Польові методи — для швидкого і реального моніторингу вебдосвіду.

  • PageSpeed Insights – показує, як сторінка взаємодіє з користувачем і пропонує варіанти оптимізації.
  • Розширення для браузера Web Vitals – його можна зайти в офіційному магазині додатків і розширень Chrome. Безпосередньо в браузері показує звіт відкритої сторінки. 
  • Google Search Console (звіт Core Web Vitals)   – інструмент, який дозволить виміряти покази більш детально. Показує проблемні сторінки, зображає цифрові значення метрик, дає варіанти покращення.

Лабораторні (для веброзробників) — дозволяють діагностувати проблеми на етапі розробки сайту.

  • Chrome DevTools  – вбудовані інструменти для розробників сайтів. Дозволяють швидко виправляти проблеми
  • Lighthouse — інструмент, що автоматично проводить аудит сайту. Вводите URL-адресу і він надає звіт про роботу сторінки. 

Висновок

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