Core Web Vitals: як пройти перевірку швидкості від Google

У 2021 році Google оголосив, що Core Web Vitals є факторами ранжування. Три конкретні метрики тепер безпосередньо впливають на ваші позиції в пошуку: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) та Interaction to Next Paint (INP). Сайти з поганими показниками мають менше шансів на високі позиції. Сайти з відмінними показниками отримують перевагу в ранжуванні. У сучасному SEO проходження Core Web Vitals обов'язкове.

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

Що таке Core Web Vitals і чому вони важливі

Core Web Vitals вимірюють три аспекти користувацького досвіду: швидкість завантаження (LCP), візуальну стабільність (CLS) і чутливість до дій (INP). На сторінці Web Vitals від Google кожну метрику визначено детально. Ці три метрики відображають найважливіші аспекти того, як користувачі сприймають ваш сайт.

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

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

Largest Contentful Paint (LCP): вимірювання швидкості завантаження

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

Рекомендація Google: LCP має бути менше 2,5 секунди. Сторінки з LCP менше 2,5 секунди вважаються «хорошими». Сторінки з LCP від 2,5 до 4 секунд «потребують покращення». Сторінки з LCP понад 4 секунди «погані». Користувачі, які бачать LCP понад 3 секунди, сприймають сторінку як повільну. Користувачі, які бачать LCP понад 4 секунди, часто залишають сторінку.

Типові причини повільного LCP: повільна відповідь сервера, CSS і JavaScript, що блокують відображення, неоптимізовані зображення та великі шрифти, які довго завантажуються. Виправляйте LCP так: пришвидшуйте сервер (зменшуйте Time to First Byte / TTFB), прибирайте ресурси, що блокують відображення, відкладайте JavaScript, оптимізуйте й стискайте зображення, використовуйте сучасні формати зображень (WebP) і заздалегідь підвантажуйте критичні ресурси.

PageSpeed Insights показує ваш показник LCP і дає конкретні рекомендації. Запустіть тест для ключових сторінок, розставте пріоритети рекомендацій за впливом і спершу впроваджуйте виправлення з найбільшим ефектом.

Cumulative Layout Shift (CLS): вимірювання візуальної стабільності

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

Рекомендація Google: CLS має бути менше 0,1. Показник CLS менше 0,1 вважається «хорошим». Значення від 0,1 до 0,25 потребують покращення. Значення понад 0,25 «погані». Навіть невеликі зсуви накопичуються. CLS 0,15 означає, що елементи сторінки зсунулися загалом на 15% висоти області перегляду під час завантаження. Користувачів це дратує та викликає розчарування.

Типові причини високого CLS: реклама, що завантажується асинхронно, зображення без заданих атрибутів width і height, вбудовані елементи (відео YouTube, віджети соцмереж), що завантажуються асинхронно, та шрифти, які різко підмінюються. Виправляйте CLS так: указуйте розміри зображень у HTML (атрибути width і height), резервуйте місце під рекламу до її завантаження, використовуйте font-display: swap в @font-face CSS, щоб уникнути «стрибків» через підміну шрифту, і завантажуйте відео та вбудовані елементи синхронно або із зарезервованим місцем.

Кожне зображення на вашому сайті має мати явні атрибути width і height. Це підказує браузеру зарезервувати місце до завантаження зображення. Без розмірів браузер не знає, скільки місця резервувати, і під час появи зображення відбувається зсув макета.

Interaction to Next Paint (INP): вимірювання чутливості

Interaction to Next Paint (INP) вимірює, наскільки швидко ваша сторінка реагує на дії користувача (кліки, дотики, введення з клавіатури). INP: це час між дією користувача на сторінці та візуальною реакцією сторінки. Швидка сторінка реагує за мілісекунди. Повільна: за секунди.

Рекомендація Google: INP має бути менше 200 мілісекунд. Значення менше 200 мс «хороші». Значення від 200 до 500 мс потребують покращення. Значення понад 500 мс «погані». Користувачі очікують миттєвої реакції. INP у 500 мс здається млявим. INP в 1 секунду здається збоєм.

Типові причини поганого INP: важкий JavaScript, що блокує основний потік, великі сторонні скрипти, неефективні обробники подій і невикористання requestIdleCallback. Виправляйте INP так: розбивайте довгі завдання JavaScript на менші частини, відкладайте некритичний JavaScript, видаляйте невикористовувані скрипти, оптимізуйте обробники подій і застосовуйте web workers для ресурсомістких обчислень.

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

Як вимірюють Core Web Vitals

Core Web Vitals вимірюють двома способами: лабораторні дані та польові дані. Лабораторні дані надходять від інструментів, як-от PageSpeed Insights і Lighthouse, що працюють у контрольованому середовищі. Польові дані надходять від реальних користувачів, які відвідують ваш сайт. Google надає пріоритет польовим даним, бо вони відображають фактичний користувацький досвід.

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

Google Search Console показує польові дані Core Web Vitals. Звіт відображає виміри реальних користувачів, зібрані з Chrome User Experience Report (CrUX). Якщо для вашого сайту недостатньо даних від реальних користувачів, Google натомість надає лабораторні дані з Lighthouse.

Орієнтири та прохідні показники

Google вважає Core Web Vitals «хорошими», якщо досягнуто 75-го перцентиля користувацького досвіду. Це означає, що 75% реальних користувачів бачать ваш сайт на рівні порогу або краще. Пороги такі:

LCP: 2,5 секунди або менше. CLS: 0,1 або менше. INP: 200 мілісекунд або менше. Ці пороги науково перевірено на аналізі трильйонів реальних взаємодій користувачів. Сторінки, що відповідають цим порогам або перевершують їх, забезпечують хороший користувацький досвід.

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

Оптимізація кожної метрики: практичні кроки

Для оптимізації LCP: спершу виміряйте TTFB (Time to First Byte) за допомогою PageSpeed Insights. Якщо TTFB повільний (понад 600 мс), вузьке місце: ваш сервер. Перейдіть на кращий хостинг, оптимізуйте серверний код або скористайтеся мережею доставки контенту (CDN). Якщо TTFB хороший, а LCP повільний, ваш CSS або JavaScript блокує відображення. Відкладіть некритичний JavaScript і вбудуйте критичний CSS для контенту на першому екрані.

Для оптимізації CLS: перевірте сайт на елементи, що рухаються під час завантаження. Використовуйте DevTools браузера, щоб знайти елементи, які зсуваються. Додайте атрибути width і height до кожного зображення. Використовуйте font-display: swap у CSS. Резервуйте місце для реклами, вбудованих елементів і динамічного контенту.

Для оптимізації INP: використовуйте вкладку Performance у Chrome DevTools, щоб знайти довгі завдання JavaScript (понад 50 мс). Розбивайте довгі завдання. Відкладайте некритичний JavaScript. Застосовуйте requestIdleCallback для роботи з низьким пріоритетом. Тестуйте на реальних пристроях, а не лише на настільних комп'ютерах.

Моніторинг Core Web Vitals у часі

Використовуйте Google Search Console, щоб стежити за показниками Core Web Vitals. Звіт Core Web Vitals показує метрики реальних користувачів вашого сайту та їх співвідношення з порогами Google. Сторінки поділяються на категорії: «Хороші», «Потребують покращення» або «Погані».

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

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

Core Web Vitals і SEO-стратегія

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

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

Висновок

Core Web Vitals тепер необхідні для успіху в SEO. Оптимізація LCP, CLS і INP безпосередньо покращує ваші позиції в пошуку та користувацький досвід. Сайти з відмінними Core Web Vitals обходять однаково релевантні сайти з поганими показниками. Обійти це неможливо: якщо ви хочете високих позицій, Core Web Vitals треба пройти.

Почніть із запуску PageSpeed Insights для ключових сторінок. Визначте найбільші вузькі місця та виправте їх у першу чергу. Надайте пріоритет мобільній оптимізації. Регулярно стежте за продуктивністю в Google Search Console. Скористайтеся нашим GEO SEO аудитом, щоб виявити проблеми з Core Web Vitals на всьому сайті та відстежувати покращення з часом.