Core Web Vitals

Що таке Core Web Vitals?

Core Web Vitals — це метрики, створені Google для поліпшення користувацького досвіду на вебсайтах. Велика різноманітність інструментів для аналізу швидкості завантаження стала одним з факторів, які врахував Google, об'єднавши всі ці метрики, аби трохи спростити складність, пов'язану з оптимізацією часу завантаження. Ця ініціатива має на меті змусити нас сфокусуватися на цих «сигналах якості», які такі важливі для досягнення оптимального користувацького досвіду.

Google підсумовує кількома словами те, на чому фокусуються Core Web Vitals:

• ›

  Досвід завантаження

• ›

  Інтерактивність

• ›

  Візуальна стабільність вмісту сторінки

Largest Contentful Paint, або LCP

LCP, або Largest Contentful Paint — це метрика, що повідомляє нам час завантаження «найбільшого» елемента контенту, видимого користувачу, аби він став доступним і корисним. Іншими словами, Google каже, що елементи, розміщені в так званому «Above the Fold», мають швидко завантажуватися й бути придатними для читання, аби бути доступними користувачу для взаємодії з ними.

Слід уточнити, що елементи, які з'являються, коли користувач клікає на екран або скролить, не впливають на LCP. Найбільший контент може бути блоком тексту, відео, зображенням тощо.

Класифікація стану LCP за часом. Зображення © web.dev

Який час Google вважає оптимальним?

Як бачимо на графіку, Google уважає, що максимальний час для завантаження LCP і забезпечення гарного користувацького досвіду — до 2,5 секунди. Важливо зазначити, що під час завантаження елемент LCP може змінюватися.

Як дізнатися LCP URL-адреси?

У самому браузері Chrome через виконання Lighthouse-аудиту в нас є опція дізнатися, що Google уважає найбільшим контентом для завантаження. Ось як:

Які фактори можуть впливати на завантаження LCP?

На те, що час завантаження LCP вищий за очікуваний, впливають кілька дій. Ці елементи чи дії:

• ›

  Відповідь сервера

• ›

  Запити до бази даних

• ›

  Відповіді API, що повільно вирішуються

• ›

  CSS або JS, що блокує рендеринг

• ›

  Повільність у завантаженні інших ресурсів

• ›

  Неоптимізовані зображення

• ›

  І т. д.

First Input Delay, або FID

FID, або First Input Delay — це метрика, що вказує, скільки часу сторінка реагує на взаємодію користувача з будь-яким з елементів.

Метрики, отримані з Pagespeed

В інструменті Pagespeed, який Google зробив доступним для всіх деякий час тому, ми можемо побачити посилання на цю метрику. Значення, які вважаються гарними, мають бути нижчі за 100 мс.

Класифікація стану First Input Delay (FID) за часом. Зображення © web.dev

Основні причини проблем з цією метрикою (FID) виходять з виконання JavaScript, тож нам треба буде ідентифікувати, яка частина коду спричиняє те, що сторінка повільно реагує на взаємодію. Особисто я стикався з цією проблемою з рекламними завантаженнями JS.

Cumulative Layout Shift, або CLS

Cumulative Layout Shift — це метрика, що встановлює межі завантаження елементів, що змінюють відображення під час завантаження. Йдеться про забезпечення стабільності елементів на екрані, аби вид не зміщувався, поки завантажуються інші ресурси.

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

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

Чому Core Web Vitals важливі?

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

Поліпшення доступності з усіх пристроїв, сприяння безпечному перегляду під протоколом безпеки чи штрафи вебсайтів, що використовували інвазивну рекламу (interstitials), — це деякі з битв техногіганта.

Ці метрики — індикатори, які Google нам дає, аби вказати, які частини вебсайту можуть бути проблемою для користувача, але... Чи означає це, що вони важливі?

Чи розуміємо ми вебсайти з погляду «роботів», чи з погляду «користувачів», ці метрики — індикатори того, що наші вебсайти не працюють так добре, як мали б. Ми вже бачили в кількох дослідженнях, наскільки впливає час завантаження на конверсію і на терпіння користувача. Наразі вони не впливають на ранжування, але хіба ж ми ігноруватимемо ці метрики?

Зі свого боку ми точно їх ураховуватимемо.

Чи впливають Core Web Vitals на ранжування?

На сьогодні все, що ми знаємо, це що метрики поліпшення користувацького досвіду стають дедалі важливішими, і деякі з них уже враховуються в результатах пошуку. У статті від 28 травня в блозі Google було оголошено, що в 2021 році очікують випустити нове Update, яке включить кілька метрик, пов'язаних з користувацьким досвідом.

Достатньо згадати, як він обходився з Mobile First Index і попередніми повідомленнями. У цьому випадку, посилаючись знову на травневу статтю, він попереджає, що буде попереднє повідомлення щонайменше за 6 місяців, тож... Чи буде оновлення наприкінці наступного року?

Інструменти для оптимізації Core Web Vitals

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

Lighthouse

Lighthouse — це потужний open-source-інструмент, який ми знаходимо в Chrome. Через Lighthouse ми можемо аудитувати наш вебсайт, виконуючи різні тести, аби отримати результати щодо недоліків чи частин сторінки, які потребують оптимізації. Серед цих частин — метрики Core Web Vitals.

Зображення з результатів Lighthouse-аудиту

Page Speed Insights

Page Speed Insights — ще один варіант, який Google нам надає, аби отримати дані продуктивності нашого вебсайту. Цей інструмент навіть показує нам графіки найважливіших метрик і їхній стан. Page Speed Insights базується на звіті користувацького досвіду, мета якого — отримати дані в порівнянні з іншими вебсайтами.

Метрики, що пропонує Page Speed Insights

Chrome UX

Chrome User Experience Report — це набір даних, який Google надає про поведінку користувачів у всьому світі через Chrome. Аби отримати доступ до цих даних, треба використовувати Big Query, а також мати акаунт Google Cloud.

Через Google Data Studio вони полегшили доступ і мають усе напівготове в цьому Dashboard

Chrome Dev Tools

Аналізувати метрики Core Web Vitals можна не лише за допомогою Lighthouse: якщо зануритися в інструменти розробника Chrome, можна дійти тих самих висновків. Наприклад, у вкладці «Performance», якщо ми робимо запис чи нове завантаження, можемо отримати цінну інформацію про те, як поводиться наша URL.

Знімок екрана, зроблений в опції Performance Chrome Dev Tools

Web.Dev

Завжди є простіший спосіб зробити речі, принаймні щоб дізнатися наші Core Web Vitals. На офіційному вебсайті в нас є сторінка, що детально описує кожну метрику, і дає нам пояснення того, що це таке, та практики для поліпшення.

Окрім того, у Chrome Store ми маємо розширення, яке дає нам цю інформацію під час входу на кожну URL:

З червоним або зеленим індикатором ми бачимо стан нашої URL щодо цих метрик:

Знімок екрана з результатами, які дає розширення Web Vitals

Search Console

Search Console — незамінний інструмент для будь-якого вебмайстра. Додано функцію, що допомагає нам бачити, які URL-адреси мають проблеми з цими 3 метриками (LCP, FID і CLS). У лівому меню маємо опцію «Core Web Vitals». Обравши цю опцію, з'являться два графіки, що показують результати URL-адрес за пристроєм. Якщо обираємо пристрій (desktop або mobile), побачимо детально, які URL мають проблеми.

Не панікуйте, якщо побачите високу кількість URL-адрес праворуч; це відносно нормально, оскільки проблеми зазвичай виникають за типами сторінок (наприклад, постів блогу), і робота над одним з них принесе нам поліпшення для всіх.

Висновки

Цей огляд Core Web Vitals має на меті ознайомити нас з метриками, що набуватимуть дедалі більшого значення, і ми, чи то SEO-фахівці, чи то вебмайстри, житимемо з ними. Від SEO Alive хочемо порекомендувати вам використовувати всі ці інструменти, які ми вам надали — вони, без сумніву, допоможуть поліпшити WPO-продуктивність вашого вебсайту.

Приймаєте виклик поліпшити швидкість свого сайту? Запустіть тест у будь-якому з інструментів, які ми згадали, і надішліть нам повідомлення зі знімком екрана. Дамо вам пораду для поліпшення повністю безкоштовно!