01.06.2021

Core Web Vitals – нові фактори ранжирування Google

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

Core Web Vitals

Core Web Vitals (основні веб-показники) — це набір факторів, за допомогою яких пошукова система оцінює якість взаємодії користувача з сайтом.

Таких показників усього три:

Що означає кожен із цих показників:

Largest Contentful Paint — час повного відображення найбільшого елемента на сторінці.
First Input Delay — вимірює час, який минає між першим взаємодією користувача з сайтом і його відгуком на цю взаємодію, або ж затримка першого вводу.
Cumulative Layout Shift — час до повної стабільності сторінки. Або ж час до того, як усі елементи сторінки завантажаться у заданих розмірах і перестануть зміщувати один одного.

Кожен із параметрів має три оцінки або, як їх ще можна назвати, зони.

Оцінки такі:

Добре (зелена зона)
Потребує покращення (жовта зона)
Погано (червона зона)

Для ідеальної взаємодії з користувачем сайт має повністю перебувати в зеленій зоні за всіма трьома показниками.

Наразі, згідно зі статистикою, 24% сайтів перебувають у зеленій зоні:

Як перевірити показники Core Web Vitals для свого сайту?

Найзручніший і найпростіший спосіб перевірити показники для свого сайту — Google Search Console.

На цьому екрані показана загальна статистика по всьому сайту.

Також можна детальніше ознайомитися з кожним окремим параметром:

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

Другим способом детальніше дізнатися показники для окремої сторінки є Google PageSpeed Insights.

За кожним із параметрів представлена конкретна оцінка, а також є додаткові дані щодо швидкості завантаження сайту.

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

Давайте розберемося з кожним із факторів детальніше.

Largest Contentful Paint

Largest Contentful Paint або відображення найбільшого контенту — показує час, за який відображається найбільший контент на сторінці сайту. В ідеалі він має завантажуватися протягом максимум 2,5 секунд. Це дозволить сторінці перебувати в зеленій зоні за цим фактором.

Наразі як найбільший контент на сторінці розглядаються такі елементи:

елементи img;
елементи image всередині svg;
елементи video (використовується зображення відео);
елемент із фоновим зображенням, завантаженим за допомогою url();
блокові елементи, що містять у собі текстові вузли або дочірні текстові блоки.

Згідно з довідкою Google, цей набір був обраний спочатку, щоб спростити задачу вебмайстрам. У ході подальших досліджень цей набір може бути розширений, наприклад, такими елементами як svg або video.

Як пошукова система визначає найбільший елемент?

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

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

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

Як можна визначити, який елемент є найбільшим на сторінці на даний момент?

Дуже зручним способом є вкладка Performance в інструментах розробника браузера.

Як її викликати:

натискаємо комбінацію клавіш Ctrl+Shift+I (або F12);
переходимо до вкладки Performance;
ставимо галочку навпроти Screenshots;
натискаємо комбінацію клавіш Ctrl+Shift+E для перезавантаження сторінки.

Далі бачимо таку картину:

Тут міститься повна інформація про завантаження сторінки.

Знаходимо цікавий для нас показник LCP:

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

Також цей елемент можна знайти за допомогою PageSpeed Insights:

Як покращити показник LCP?

На LCP, насамперед, впливають такі фактори:

Повільна відповідь сервера;
JS і CSS із блокуванням рендерингу;
Рендеринг на стороні клієнта.

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

First Input Delay

First Input Delay або затримка до першого взаємодії — показує час, який минає між першим взаємодією користувача з сайтом і його відгуком на цю взаємодію.

Ідеальний час для цього показника становить менше 100 мс.

Щоб краще зрозуміти цей показник, спочатку потрібно розібратися з тим, як завантажується сторінка сайту.

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

Найбільші затримки виникають між першим відображенням контенту (показник First Contentful Paint) і часом до інтерактивності (показник Time To Interactive).

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

Це і буде час FID. Браузер не може дати відповідь користувачу на його взаємодію, поки зайнятий якоюсь задачею; йому потрібен час, щоб завершити задачу, а потім уже відбудеться реакція на взаємодію користувача з сайтом.

Чому вимірюється лише затримка першого вводу?

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

Інформацію про покращення цього показника для вашого сайту можна отримати з тих же PageSpeed Insights, а також Google Search Console.

Щоб дізнатися, як покращити FID для конкретного сайту, потрібно звертати увагу на всі можливості, які пропонує сервіс PageSpeed Insights, оскільки вони прямо чи опосередковано стосуються цього параметра.

Як загальні рекомендації щодо покращення FID можна виділити такі:

Зменшіть вплив стороннього коду;
Зменшіть час виконання Javascript;
Зменшіть кількість запитів і розмір передач.

Cumulative Layout Shift

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

В ідеалі цей показник не повинен перевищувати 0.1. Цей показник називається оцінкою зсуву макета.

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

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

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

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

Які зсуви макета бувають?

Зсуви за ініціативою користувача

Зсув враховуватиметься, лише якщо він буде несподіваним для користувача. Нормальним вважається зсув, який відбувся не пізніше ніж через 500 мс після взаємодії користувача з будь-яким елементом.

Зсуви через анімацію або перехід

Якщо на сторінці є якась анімація або якийсь елемент змінює своє положення, рекомендується використовувати в стилях не зміну значень, наприклад, width і height, а властивість transform: scale(). А для переміщення елемента по екрану краще використовувати не top, bottom, right, left, а transform: translate().

Як знайти елементи, які спричиняють зсуви макета на вашому сайті?

Найпростішим способом є PageSpeed Insights:

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

Другим варіантом є вкладка Performance інструментів розробника:

Необхідно виконати ті ж дії, що й раніше, щоб отримати розгорнуту інформацію про завантаження сторінки.

Далі в розділі Experience ми можемо побачити, скільки зсувів макета сталося на сторінці.

На скриншоті нижче видно, де вони знаходяться.

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

Як покращити показник CLS на своєму сайті?

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

Висновок:

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

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