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

Дані зібрані в основних вебпоказниках — Core Web Vitals.
Це стало визначальним чинником для обов’язкового включення CWV в систематичні аудити СЕО-фахівців.

Розберемося, як Core Web Vitals зриває покрив таємничості, розкриває допущені помилки та змінює результати ранжування.

У пріоритеті Google — зручність сторінок

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

Важливо зрозуміти:

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

Усе це легко визначити за допомогою інструментів Core Web Vitals:

• Largest Contentful Paint — найбільший фрагмент контенту;
• Cumulative Layout Shift — сукупне зміщення верстки;
• First Input Delay — затримка першого введення.

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

Наявність оманливого контенту або небезпечного для користувача теж зрушить позиції онлайн-магазину або інформаційного сайту. Алгоритм Safe Browsing вишукує будь-яку потенційну загрозу, тому подбайте про безпеку перегляду.

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

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

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

Найбільший фрагмент контенту на сторінці

Метрика Largest Contentful Paint (LCP) оцінює швидкість завантаження. Однак її цікавить не вся сторінка, а лише найбільший фрагмент, який міститься на першому екрані. До таких належать: відео, текст, зображення й подібні.

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

На це здатні вплинути різні обставини:

1. Залежність часу відповіді сервера від системи управління вмістом, наскільки моторний ваш провайдер, особливості баз даних, які були підключені та інше.
2. Перевантажують браузер і уповільнюють процес наповнення аж до тимчасової зупинки файли JavaScript й CSS, які блокують візуалізацію сайту.
3. Ресурс буде відкриватися повільно, якщо використовуються великі за розміром зображення та відеоматеріали.
4. Повільно буде проявлятися зображення, якщо завантаження здійснює сервер. Швидше процес рухається, якщо за рендеринг береться браузер. Однак треба враховувати, що під час проведення пошукової оптимізації краще працює рендеринг сервера, оскільки пошуковику так простіше розібратися з вмістом сторінки.

Як перевіряти LCP

Щоби перевірити, що «накопав» на ваш вебресурс CWV, потрібно звернутися до Google Search Console. Відкрийте «Якість», потім зробіть перехід до «Основні вебпоказники».

Цей інструмент розподіляє сторінки за трьома рівнями показників завантаження: критичні, вимагають доопрацювання/поліпшення, задовільні. Клацніть на проблемні URL-адреси, отримаєте графік оцінки завантаження LCP на мобільному й десктопном пристрої. Це допоможе вчасно побачити проблему та зробити корективи.

Серйозною підмогою в роботі стануть інструменти SEO. Можна скористатися програмою SE Ranking, у якій доступний огляд усіх параметрів CWV. Можете одразу побачити всю ситуацію: загальний час відповіді від сервера, число можливих редиректів і інші показники, які істотно впливають на завантаження найбільшого контенту (LCP); оцінити загальний стан вебресурсу, побачити проблеми, які потребують негайного усунення.

Що допоможе поліпшити LCP

Розв’язувати проблему треба комплексно. Щоб успішно впоратися із завданням і прискорити завантаження найбільшого об’єкта:

• почніть із хостингу. Кращий варіант — виділений сервер або VPN — віртуальний приватний сервер;
• якщо займаєтеся торгівлею в різних державах, під’єднайте CDN — мережу доставляння контенту. Це дасть можливість розподілити навантаження на кілька серверів. У результаті завантаження піде швидше;
• ведіть чіткий контроль переадресування. Якщо редиректів надмірна кількість, затримки неминучі;
• оптимізуйте фото- і відеоконтент. Виконати завдання можна за допомогою інструментів компресії. Не забувайте позначати пропорції з урахуванням різних екранів;
• прискорити завантаження допоможе зменшення коду (можна скористатися автоматичною мініфікацією, наприклад, UglifyJS);
• регулярно проводьте аудит плагінів. Застарілі версії уповільнюють доступ до ресурсу;
• вивчайте й аналізуйте трафік із різних пристроїв.

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

Що таке затримка першого введення

Затримка першого введення або First Input Delay (FID) визначає, наскільки швидко з ресурсом можна почати взаємодіяти: заповнювати форми, активувати клавіші й таке інше. Якщо доводиться нудитися в очікуванні активності, це означає, що перше введення явно гальмує.

Перевірити FID можна тут

Для цього можна скористатися даними JavaScript-бібліотек або RUN (моніторинг реальних користувачів).

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

Використовуйте статистику Chrome User Experience. Її можна дістати через PageSpeed Insights, Search Console, Data Studio. Цікава тим, що містить інформацію про реальних людей, які дали згоду на збір статистики й синхронізували історію пошуків на всіх пристроях.

Інше зручне джерело SE Ranking. Тут можна дістати й додаткові відомості: Time To Interactive розповість, як швидко сторінка стає інтерактивною; Total Blocking Time повідає, що завантажився перший елемент, але працювати на сторінці неможливо.

Що зробити, щоб відкоригувати FID

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

Відповідь знайдете у Chrome DevTools. Сервіс продемонструє повний процес завантаження ресурсу. У вкладці Lighthouse створіть звіт Performance і натисніть View Original Trace. Дізнаєтеся скільки часу в мілісекундах йде на відтворення, наприклад, анімації. Так можете оцінити, чи можна упустити якийсь елемент, щоб збільшити швидкість завантаження.

Ось цими атрибутами можна скористатися для асинхронного завантаження: script, defer, async.

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

Що таке зміщення верстки

Користувач починає працювати з ресурсом і раптом з’являється рекламне оголошення. Усі елементи на сторінці починають стрибати та зміщуватися. Цей процес називають зміщенням макета сторінки. Зрозуміти, наскільки це катастрофічно, дає змогу останній інструмент CWV — Cumulative Layout Shift (сукупне зміщення верстки).

Суть помилки в тому, що були задані чіткі розміри для всіх елементів сторінки; інша причина — динамічна зміна розташування об’єктів.

Формула для перевірки зміщення:

Розрахувати Cumulative Layout Shift можна легко за такою формулою:

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

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

Чи можливо покращити CLS?

Безумовно — так! Але спочатку треба визначити увесь динамічний контент, який змінює своє місцеперебування. Наступне завдання — не відходити від правил:

• обов’язково вписувати габарити фото- і відеоматеріалів, зображень та анімації. Для цього скористайтеся атрибутом srcset;
  
• для мультиплікації користуйтеся CSS-властивістю transform. Дасть змогу уникнути зміщення;
• прописувати чіткі розміри рекламних оголошень;
• проводити попереднє завантаження шрифтів, щоби рендеринг прискорився. Можна також узяти на озброєння font: display дескриптор, щоби браузер зміг швидко визначити шрифт або взяти з резерву.

І на закінчення

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

Якщо йдете назустріч вимогам Google, він вам точно відплатить взаємністю.