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

З'ясуйте, яка метрика не проходить оцінку, на якому пристрої та для якої групи сторінок: звіт Core Web Vitals у Search Console показує всі три метрики на основі реальних відвідувань у Chrome. Потім усуньте причину, що стоїть за цією метрикою: для LCP — швидкість завантаження головного зображення або тексту; для INP — довгі завдання JavaScript, які затримують відповідь на дії користувача; для CLS — контент, що з'являється без зарезервованого для нього місця. Польові дані охоплюють останні 28 днів, тому оцінювати ефект від виправлення варто за місяць.

Крок 1: з'ясуйте, що саме не проходить оцінку

1. Відкрийте звіт Core Web Vitals у Search Console і виберіть Mobile або Desktop: вони оцінюються окремо.
2. Відкрийте одну з наведених проблем, наприклад проблему з LCP на мобільних пристроях, щоб побачити групу URL, яких вона стосується, та приклади URL. Уся група має один статус, який визначає її найгірша метрика.
3. Прогляньте приклад URL у PageSpeed Insights: там поруч із польовими даними для цієї сторінки є лабораторний тест, який допоможе з налагодженням.

Лабораторні інструменти, як-от Lighthouse, не можуть виміряти INP, бо ніхто не взаємодіє зі сторінкою, тому вони повідомляють Total Blocking Time. Для INP надійним орієнтиром є вимірювання на реальних користувачах.

Як виправити повільний LCP

У посібнику з оптимізації LCP від web.dev LCP поділено на чотири частини: час відповіді сервера, затримка перед початком завантаження головного ресурсу, час його завантаження та затримка перед відображенням. Спершу працюйте над найбільшою з них:

• Зробіть зображення LCP доступним для виявлення у початковому HTML, а не додавайте його через JavaScript чи CSS, і задайте йому fetchpriority="high".
• Ніколи не застосовуйте lazy-load до зображення LCP.
• Зменшуйте його вагу: правильні розміри, сучасний формат, стиснення та CDN поблизу відвідувачів.
• Приберіть ресурси, що блокують рендеринг: менші таблиці стилів, жодних синхронних скриптів у <head>, серверний рендеринг основного контенту.
• Прискорте відповідь сервера: скоротіть кількість редиректів і дозвольте кешувати сторінки на периферії мережі.

Як виправити поганий INP

Посібник з оптимізації INP розбиває кожну взаємодію на затримку введення, час обробки та затримку відображення:

• Затримка введення: зменште обсяг JavaScript, що виконується під час завантаження сторінки, щоб головний потік був вільний, коли користувач торкається екрана.
• Час обробки: розбийте довгі обробники подій на менші завдання та віддавайте керування головному потоку: спершу виконуйте видиме оновлення, а решту відкладайте.
• Затримка відображення: тримайте DOM невеликим, не провокуйте примусовий перерахунок розмітки, зчитуючи стилі одразу після їх зміни, і використовуйте content-visibility для довгих сторінок.

Як виправити високий CLS

Посібник з оптимізації CLS перелічує типових винуватців і способи їх усунення:

• Зображення та відео без розмірів: додайте атрибути width і height або CSS-властивість aspect-ratio.
• Реклама, вбудовані елементи та iframe: зарезервуйте для них місце в розмітці ще до завантаження.
• Контент, що вставляється над наявним: використовуйте заповнювач потрібного розміру або вставляйте новий контент нижче від того, що читає відвідувач.
• Веб-шрифти: попередньо завантажуйте найважливіші, щоб текст не перекомпоновувався пізно.
• Анімації: анімуйте transform, а не такі властивості, як top чи left.

Сторінки, які можуть використовувати кеш переходів назад/вперед (back/forward cache) браузера, також уникають зсувів розмітки, коли відвідувачі повертаються до них.

Крок 3: підтвердьте виправлення

Розгорніть зміни, потім відкрийте проблему у звіті Core Web Vitals і запустіть перевірку. Google відстежує групу протягом 28 днів; перевірка не ініціює повторного сканування і нічого не прискорює, вона лише стежить, чи зникла проблема. Оскільки польові дані оновлюються в 28-денному вікні, очікуйте, що звіт покращуватиметься поступово. Що означає кожна метрика, дивіться в статті Що означають LCP, INP і CLS?.

Як допомагає AutoPSEO

У звіті Core Web Vitals в AutoPSEO наведено графіки приблизно шестимісячних щотижневих даних Chrome UX Report для вашого сайту або окремого URL на телефоні, комп'ютері чи планшеті. Так ви побачите тиждень, коли виправлення почало діяти, або тиждень, коли випуск погіршив показники, не чекаючи, поки закриється наступне 28-денне вікно.