Core Web Vitals: как метрики скорости сайта влияют на позиции в поиске

Ты потратил время на контент, дизайн и функциональность сайта, но посетители уходят, не дождавшись загрузки. Или страница вроде бы открылась, но при прокрутке кнопки и картинки прыгают, текст сдвигается, и пользователь случайно нажимает не туда. Это не просто неудобство: Google замечает такие проблемы и может хуже ранжировать сайт в поиске.

Core Web Vitals — это набор из трёх метрик, которые измеряют реальный опыт пользователей при загрузке страницы. Они показывают, как быстро появляется основной контент, насколько отзывчиво страница реагирует на действия и насколько стабильна вёрстка. Ниже — простыми словами, что означает каждая метрика, почему это важно для SEO и как улучшить показатели в проекте, собранном с ИИ.

Что такое Core Web Vitals простыми словами

Core Web Vitals — это три числа, которые Google использует, чтобы оценить качество загрузки страницы с точки зрения реального пользователя. В отличие от синтетических тестов, которые имитируют идеальное соединение, Core Web Vitals строятся на данных от реальных посетителей сайта.

Заходишь в кафе — три вещи влияют на первое впечатление: как быстро принесли меню, как быстро официант отреагировал на заказ и не сдвинул ли кто-то тарелку, пока ты читал меню. Core Web Vitals измеряют примерно то же самое, но для веб-страницы:

• Скорость появления главного контента.
• Скорость отклика на действие.
• Стабильность вёрстки.

Эти метрики не заменяют другие факторы качества: полезность контента, безопасность, мобильную адаптивность, отсутствие навязчивой рекламы. Но они — один из важных сигналов, который Google использует при ранжировании.

Почему это важно для вайбкодера на этапе SEO

В курсе мы уже разбирали основы SEO и инструменты Google Search Console в статье «SEO для новичка: метрика Вебмастер». Core Web Vitals — логическое продолжение этой темы. Даже если у тебя отличный контент и правильные ключевые слова, медленный или нестабильный сайт может терять позиции.

Почему Google это учитывает? Потому что поисковая система заинтересована в том, чтобы пользователи оставались довольны результатами. Если человек переходит по ссылке из поиска и видит долгую загрузку или прыгающую страницу, он скорее закроет вкладку и вернётся к результатам. Google фиксирует такое поведение и может показывать такой сайт реже.

Для вайбкодера это означает: после того как сайт запущен, стоит проверить Core Web Vitals и исправить очевидные проблемы. Это не требует глубоких знаний оптимизации — большинство типичных проблем решаются через конкретные запросы ИИ-агенту.

Три метрики простыми словами

Core Web Vitals состоит из трёх метрик: LCP, INP и CLS. Разберём каждую.

LCP — Largest Contentful Paint

LCP измеряет, за какое время на экране появляется самый крупный значимый элемент страницы. Обычно это большая картинка, видео-постер или крупный блок текста. Пользователь хочет увидеть, что страница реально загружается, как можно быстрее.

Хороший показатель LCP — до 2,5 секунд. От 2,5 до 4 секунд — есть куда расти. Больше 4 секунд — плохо, пользователи начинают уходить.

На что влияет LCP:

• скорость сервера;
• размер и формат главной картинки;
• способ загрузки шрифтов;
• тяжёлый JavaScript, который блокирует отрисовку;
• медленная сеть у пользователя.

INP — Interaction to Next Paint

INP заменил более старую метрику FID и измеряет отклик страницы на действия пользователя. Например, пользователь нажал кнопку «Купить» или открыл меню. INP показывает, сколько времени проходит от действия до обновления картинки на экране.

Хороший показатель INP — до 200 миллисекунд. От 200 до 500 миллисекунд — требует улучшения. Больше 500 миллисекунд — плохо, страница кажется тормознутой.

На что влияет INP:

• тяжёлые JavaScript-задачи, которые блокируют главный поток;
• большие библиотеки и фреймворки;
• неоптимизированные обработчики событий;
• устройства пользователя — на слабом телефоне метрика будет хуже.

CLS — Cumulative Layout Shift

CLS измеряет, насколько стабильна вёрстка при загрузке. Если элементы страницы сдвигаются, прыгают или меняют размер во время загрузки, CLS растёт. Пользователи ненавидят, когда хотят нажать на одну кнопку, а под палец внезапно приезжает другая.

Хороший показатель CLS — до 0,1. От 0,1 до 0,25 — есть проблемы. Больше 0,25 — страница заметно прыгает.

На что влияет CLS:

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

flowchart TB
    A["Core Web Vitals"] --> B["LCP: главный контент"]
    A --> C["INP: отклик"]
    A --> D["CLS: стабильность"]
    B --> E["Тяжёлые картинки и сервер"]
    C --> E
    D --> F["Размеры img и шрифты"]

Как проверить свой сайт на практике

Проверить Core Web Vitals можно бесплатно с помощью инструментов Google.

PageSpeed Insights

PageSpeed Insights — это онлайн-сервис, который анализирует конкретную страницу. Он показывает:

• оценку по каждой метрике;
• реальные данные пользователей из CrUX-отчёта, если их достаточно;
• лабораторные данные, полученные при тестировании;
• список рекомендаций по улучшению.

Достаточно ввести URL страницы и нажать «Анализировать». Сервис сам проверит мобильную и десктопную версии.

Google Search Console

В Search Console есть отчёт «Core Web Vitals». Он показывает, какие страницы сайта имеют хорошие показатели, а какие — требуют улучшения. Данные собираются на основе реальных посещений, поэтому этот отчёт особенно ценен.

Если ты уже подключил сайт к Search Console, как мы разбирали в «SEO для новичка: метрика Вебмастер», отчёт по Core Web Vitals будет доступен в боковом меню.

Lighthouse в Chrome

Встроенный в Chrome инструмент Lighthouse позволяет проверить страницу прямо в браузере. Он не заменяет реальные данные пользователей, но полезен для быстрой проверки во время разработки.

Что делать, если данных мало

Для новых сайтов у Google может не быть достаточно реальных данных посетителей. В таком случае PageSpeed Insights покажет только лабораторные измерения. Это нормально: сосредоточься на очевидных оптимизациях, и со временем реальные метрики появятся.

Частые причины плохих показателей у проектов на курсе

Проекты, собранные с ИИ, часто сталкиваются с одними и теми же проблемами. Хорошая новость: большинство из них легко исправить.

Неоптимизированные картинки

Большие изображения в формате PNG или JPEG высокого качества могут весить несколько мегабайт. Они сильно замедляют LCP, особенно на мобильных устройствах.

Решение — сжимать картинки и использовать современные форматы вроде WebP или AVIF. Для ручного сжатия удобен инструмент Squoosh, который мы разбирали в статье «Squoosh: сжатие картинок для сайта». Для проектов с большим количеством изображений хорошо подходит облачное решение вроде Cloudinary, о котором мы говорили в «Cloudinary: хранение и оптимизация картинок».

Отсутствие указанных размеров у изображений

Если браузер не знает размеры картинки заранее, он резервирует для неё ноль пикселей, а потом, когда картинка загрузится, контент под ней сдвигается. Это прямой источник проблем с CLS.

Решение — всегда указывать атрибуты width и height у тегов <img>, или задавать размеры через CSS. Тогда браузер зарезервирует место до загрузки изображения.

Тяжёлый JavaScript

Современные фреймворки и библиотеки могут добавлять сотни килобайт JavaScript. Это замедляет INP и LCP: браузер тратит время на загрузку и выполнение скриптов вместо отрисовки страницы.

Решение — загружать только нужный код, разбивать бандл на части, откладывать несущественные скрипты.

Медленный сервер

Если сервер долго отвечает, LCP растёт независимо от оптимизаций на фронтенде. Причины: слабый хостинг, медленные запросы к базе, отсутствие кэширования.

Решение — оптимизировать запросы, добавить кэш, при необходимости перейти на более мощный тариф или CDN.

Шрифты, загружаемые извне

Если шрифт загружается с внешнего сервиса и долго не появляется, текст может сначала отобразиться одним шрифтом, а потом резко смениться на другой. Это влияет на CLS и LCP.

Решение — использовать font-display: swap, предзагружать критичные шрифты или хранить их локально.

Как попросить ИИ-агента улучшить показатели

Вайбкодеру не нужно знать все тонкости веб-перфоманса. Достаточно дать ИИ-агенту конкретные задачи. Вот примеры запросов, которые решают типичные проблемы:

• Добавь lazy loading для всех картинок ниже первого экрана.
• Укажи width и height у всех img-тегов, чтобы избежать сдвигов вёрстки.
• Оптимизируй главное изображение: конвертируй в WebP и уменьши размер.
• Разбей JavaScript-бандл на части и отложи загрузку несущественных скриптов.
• Настрой кэширование статических файлов на сервере.
• Убери неиспользуемые CSS-стили.
• Предзагрузи критичный шрифт.

Каждый такой запрос направлен на конкретную метрику. Если LCP плохой — оптимизируй картинки и сервер. Если CLS высокий — указывай размеры и резервируй место под динамический контент. Если INP большой — уменьшай нагрузку JavaScript.

Ограничения и честный вывод

Core Web Vitals — важный сигнал, но не единственный фактор ранжирования. Google использует сотни факторов: релевантность контента, ссылки, поведенческие метрики, безопасность, мобильную оптимизацию. Даже идеальные Core Web Vitals не выведут сайт на первое место, если контент не отвечает на запрос пользователя.

Тем не менее Core Web Vitals — бесплатный и измеримый способ улучшить пользовательский опыт. После запуска сайта стоит зайти в PageSpeed Insights и Search Console, посмотреть показатели и исправить очевидные проблемы. Это занимает не так много времени, но может дать реальный прирост в удержании пользователей и позициях.

Для вайбкодера главное — не пытаться достичь идеальных цифр любой ценой. Сначала сделай работающий продукт, потом проверь метрики, потом по одной исправляй проблемы. ИИ-ассистент отлично справится с типовыми оптимизациями, если ты сможешь правильно поставить задачу.

Подробнее про LCP и его оптимизацию

LCP — это не просто «скорость загрузки». Он измеряет момент, когда пользователь видит главное содержимое страницы и понимает, что она реально загружается. Если главный элемент — изображение, LCP засчитывается, когда это изображение отрисовано. Если главный элемент — текстовый блок, LCP засчитывается, когда отрисован этот текст.

Что именно может быть главным элементом:

• большое изображение внутри viewport;
• видео-постер;
• крупный блок текста, например заголовок H1;
• элемент с фоновым изображением.

Как улучшить LCP

1. Оптимизируй сервер. Быстрый ответ сервера — основа. Используй кэш, оптимизируй запросы к базе, при необходимости переходи на более мощный хостинг или CDN.
2. Сожми картинки. Используй WebP или AVIF, настрой правильный размер под разные экраны.
3. Предзагружай LCP-изображение. Тег <link rel="preload"> позволяет браузеру начать загрузку главной картинки пораньше.
4. Убери JavaScript, блокирующий отрисовку. Если скрипты в <head> не критичны, перенеси их в конец страницы или используй defer/async.
5. Ускорь загрузку шрифтов. Используй font-display: swap или храни шрифты локально.

Подробнее про INP и его оптимизацию

INP измеряет задержку между действием пользователя и следующей отрисовкой экрана. Действие — это клик, касание, нажатие клавиши. Следующая отрисовка — момент, когда браузер показывает результат действия.

Плохой INP ощущается как лаг: нажал кнопку, ничего не произошло, нажал ещё раз — и вдруг всё сработало сразу. Это раздражает и снижает доверие к приложению.

Как улучшить INP

1. Разбивай длинные задачи JavaScript. Если скрипт выполняется больше 50 миллисекунд, он может заблокировать отклик. Раздели работу на части или перенеси в Web Worker.
2. Уменьшай размер JavaScript. Меньше кода — быстрее выполнение. Убери неиспользуемые библиотеки, используй code splitting.
3. Оптимизируй обработчики событий. Тяжёлые вычисления в обработчике клика замедляют отклик. Делай только самое необходимое сразу, остальное — асинхронно.
4. Используй debounce и throttle. Для частых событий вроде прокрутки или ввода текста ограничь частоту вызовов обработчиков.
5. Тестируй на слабых устройствах. На мощном компьютере INP может быть отличным, а на бюджетном телефоне — плохим.

Подробнее про CLS и его оптимизацию

CLS считает, насколько сильно элементы смещаются относительно друг друга во время загрузки. Каждый сдвиг умножается на долю экрана, которую он затронул. Несколько маленьких сдвигов могут дать заметную сумму.

Как улучшить CLS

1. Всегда указывай размеры для медиа. У тегов <img>, <video>, <iframe> должны быть width и height, либо размеры через CSS.
2. Резервируй место под рекламу и встраиваемые блоки. Если рекламный баннер загружается динамически, заранее выдели для него контейнер фиксированного размера.
3. Не вставляй контент поверх существующего. Всплывающие баннеры и уведомления должны занимать зарезервированное место, а не толкать основной контент.
4. Контролируй загрузку шрифтов. Используй font-display: optional или предзагрузку, чтобы текст не менял размер после смены шрифта.
5. Избегай изменений layout после загрузки. Динамические блоки лучше размещать в конце страницы или в специальных слотах.

Реальные данные против лабораторных

Важно различать два типа измерений:

• Field data — данные реальных пользователей. Они отражают реальные устройства, сети и условия.
• Lab data — данные, полученные в контролируемом тесте. Они полезны для отладки, но не учитывают все реальные факторы.

Google использует field data для Core Web Vitals в Search Console. PageSpeed Insights показывает оба типа, если field data доступна. Для новых сайтов чаще бывает только lab data.

CrUX — это Chrome User Experience Report, общедоступная база реальных данных о производительности сайтов. Search Console и PageSpeed Insights используют данные из CrUX.

Core Web Vitals для мобильных устройств

Мобильные устройства обычно имеют менее мощные процессоры, меньше памяти и более медленное соединение. Поэтому мобильные Core Web Vitals часто хуже, чем десктопные.

Google индексирует сайт преимущественно по мобильной версии. Это значит, что оптимизировать стоит именно мобильный опыт. Проверяй показатели в PageSpeed Insights в мобильном режиме и тестируй на реальных телефонах.

Как читать отчёт PageSpeed Insights

Отчёт PageSpeed Insights может показаться перегруженным, но его легко разобрать, если знать структуру.

Вверху — оценки по шкале от 0 до 100. Зелёный цвет означает хороший результат, жёлтый — требует улучшения, красный — плохой. Но эта оценка — не то же самое, что Core Web Vitals. Она строится на множестве факторов.

Ниже — сами метрики LCP, INP, CLS. Для каждой показано значение и статус. Ещё ниже — список рекомендаций. Каждая рекомендация показывает, сколько секунд или баллов можно выиграть, если её выполнить.

Не пытайся выполнить все рекомендации. Сосредоточься на тех, которые дают больше всего пользы при меньших усилиях.

Core Web Vitals и игра «Змейка»

Для учебного проекта курса — игры «Змейка» — Core Web Vitals тоже имеют значение, если игра выложена как веб-приложение.

• LCP важен для экрана загрузки игры. Если главное изображение или логотип долго не появляются, пользователь может подумать, что игра сломалась.
• INP критичен для игрового процесса. Управление змейкой должно откликаться мгновенно, иначе играть невозможно.
• CLS важен для экрана с таблицей рекордов и магазина скинов. Если элементы прыгают при загрузке, пользователь может случайно нажать не на ту кнопку.

Поэтому даже простая игра выигрывает от базовой оптимизации: сжатых картинок, минимального JavaScript на стартовом экране и стабильной вёрстки.

Инструменты для постоянного мониторинга

Кроме PageSpeed Insights и Search Console есть инструменты для регулярного отслеживания метрик:

• Web Vitals Extension для Chrome — показывает метрики прямо в браузере.
• CrUX Dashboard — дашборд на основе данных Chrome User Experience Report.
• Различные сервисы мониторинга — позволяют отслеживать производительность из разных регионов мира.

Для небольших проектов достаточно PageSpeed Insights и Search Console. Для растущих продуктов имеет смысл настраивать автоматический мониторинг.

Баланс между скоростью и дизайном

Иногда оптимизация конфликтует с дизайном. Например, красивый крупный шрифт может замедлять загрузку, а анимации — ухудшать INP. Важно находить баланс.

Принцип: сначала сделай страницу быстрой и стабильной, а потом добавляй визуальные эффекты, не ломая метрики. Часто красивый дизайн можно реализовать и без ущерба для производительности, если подходить осознанно.

Распространённые заблуждения

«Если сайт быстро открывается у меня, значит, всё хорошо»

Не факт. Ты можешь сидеть на быстром интернете с мощным компьютером, а большая часть пользователей — на мобильных устройствах со средним соединением. Проверяй метрики в инструментах Google и тестируй на реальных устройствах.

«Нужно получить 100 баллов в PageSpeed Insights»

Сто баллов — не обязательная цель. Для многих сайтов 90+ достижимо, но погоня за идеальной оценкой может привести к избыточной оптимизации и потере функциональности. Главное — держать Core Web Vitals в зелёной зоне.

«Core Web Vitals — это только про скорость»

Скорость — важная часть, но не единственная. CLS измеряет стабильность, а INP — отклик. Можно быть быстрым, но нестабильным или медленно реагировать на действия. Все три метрики важны вместе.

«Оптимизация метрик занимает много времени»

Базовые улучшения — сжатие картинок, lazy loading, указание размеров — занимают минуты, если делать их сразу. Гораздо больше времени уходит, если возвращаться к ним после запуска, когда страница уже разрослась.

Частые вопросы

Что такое Core Web Vitals?

Это три метрики от Google, которые оценивают удобство загрузки страницы: LCP — скорость появления главного контента, INP — отклик на действия пользователя, CLS — стабильность вёрстки.

Влияют ли Core Web Vitals на SEO?

Да, Google учитывает эти метрики при ранжировании. Но они — один из многих факторов. Контент, релевантность, ссылки и поведение пользователей тоже играют большую роль.

Как проверить Core Web Vitals своего сайта?

Бесплатные инструменты: PageSpeed Insights, Google Search Console, Lighthouse в Chrome. Search Console показывает реальные данные пользователей, PageSpeed Insights — и реальные, и лабораторные.

Какая метрика самая важная?

Все три важны, но для разных сайтов узким местом может быть разная метрика. Для контентных сайтов часто важнее LCP — скорость появления контента. Для интерактивных приложений — INP, отклик на действия. Для страниц с рекламой и вставками — CLS, стабильность.

Можно ли улучшить Core Web Vitals без программирования?

Частично. Можно сжать картинки, выбрать лёгкий шаблон, отключить лишние плагины, использовать CDN. Но более глубокие оптимизации обычно требуют изменений в коде, и здесь поможет ИИ-агент.

Почему картинки так сильно влияют на скорость?

Картинки обычно занимают больше всего места на странице. Неоптимизированные изображения могут весить в десятки раз больше, чем нужно. Их сжатие и использование современных форматов часто даёт самый заметный прирост скорости.

Что делать, если показатели хорошие, но сайт всё равно медленно растёт в поиске?

Core Web Vitals — не волшебная палочка. Если контент слабый, конкуренция высокая, а ссылок мало, быстрая загрузка не спасёт. Сосредоточься на качестве контента и продвижении, а метрики скорости поддерживай на приемлемом уровне.

Как часто нужно проверять Core Web Vitals?

После запуска стоит проверить сразу, чтобы исправить критичные проблемы. Дальше достаточно смотреть раз в месяц или после крупных изменений на сайте.