Как измерить и улучшить INP, LCP и CLS: полное руководство по Core Web Vitals

Core Web Vitals, это набор метрик Google, которые измеряют скорость загрузки, отзывчивость и визуальную стабильность страницы. Чтобы измерить и улучшить INP, LCP и CLS, нужно последовательно выявить проблемные места с помощью реальных инструментов, таких как PageSpeed Insights или CrUX, и применить технические исправления: оптимизировать сервер, сжать изображения, устранить сдвиги макета и снизить время обработки JavaScript. Эти три метрики напрямую влияют на пользовательский опыт и могут стать фактором ранжирования.

В 2024 году Google заменил FID (First Input Delay) на INP (Interaction to Next Paint), ужесточив требования к отзывчивости интерфейса. Для бизнеса, который полагается на органический трафик, прохождение порогов Core Web Vitals стало не просто технической задачей, а вопросом конкуренции. Многие владельцы сайтов видят предупреждения в Search Console, но не понимают, с чего начать диагностику. Эта статья проведет вас через каждый этап: от сбора данных до внедрения исправлений, которые действительно работают.

Что такое Core Web Vitals и почему они важны для SEO

Core Web Vitals, это три показателя, которые Google считает критическими для оценки качества пользовательского опыта. Они входят в общий сигнал ранжирования Page Experience. INP (Interaction to Next Paint) измеряет задержку между действием пользователя и визуальным откликом. LCP (Largest Contentful Paint) фиксирует время загрузки самого крупного видимого элемента. CLS (Cumulative Layout Shift) отслеживает неожиданные сдвиги контента во время загрузки.

В реальной практике мы видим, что сайты, прошедшие пороги Core Web Vitals, получают не только формальное преимущество в ранжировании. У них ниже показатель отказов и выше конверсия. Пользователь, который не ждет загрузки и не сталкивается с прыгающими кнопками, с большей вероятностью совершит целевое действие. Это не про «угодить алгоритму», а про то, чтобы сайт работал как надёжный инструмент.

Вот пороговые значения, к которым нужно стремиться:

Метрика	Хорошо	Требует улучшения	Плохо
LCP	до 2,5 с	2,5-4,0 с	более 4,0 с
INP	до 200 мс	200-500 мс	более 500 мс
CLS	до 0,1	0,1-0,25	более 0,25

Из практики: часто владельцы сайтов смотрят только на лабораторные данные из Lighthouse. Но реальные значения из CrUX (Chrome User Experience Report) могут отличаться в разы. Всегда проверяйте полевое распределение, данные реальных пользователей, перед тем как объявлять проблему решённой.

Как измерить Core Web Vitals: инструменты и подходы

Измерение Core Web Vitals начинается не с одного инструмента, а с комбинации лабораторных и полевых данных. Лабораторные данные (Lighthouse, PageSpeed Insights в режиме эмуляции) показывают, что можно улучшить. Полевые данные (CrUX, Search Console, Web Vitals Extension) отражают реальный опыт пользователей.

Вот основные инструменты для измерения:

• PageSpeed Insights, показывает и лабораторные, и полевые данные. Даёт конкретные рекомендации по каждой метрике. Это отправная точка для большинства аудитов.
• Chrome DevTools (Performance panel), позволяет детально разобрать каждую загрузку: увидеть, какие скрипты блокируют рендеринг, какие изображения загружаются дольше всего.
• Search Console (отчёт Core Web Vitals), группирует страницы по статусу (хорошо, требует улучшения, плохо) на основе полевых данных за 28 дней. Полезно для приоритизации.
• Web Vitals Extension, расширение для браузера, которое в реальном времени показывает INP, LCP и CLS при навигации.
• CrUX API, программный доступ к данным реальных пользователей по URL или origin. Используется для автоматизированного мониторинга.

Что мы обнаружили на практике: данные из Search Console и CrUX могут расходиться с лабораторными показателями. Например, Lighthouse может показывать LCP 1,8 с, а CrUX, 3,2 с для 40% пользователей. Это нормально, потому что Lighthouse тестирует на эмулированном устройстве с фиксированным каналом. Всегда доверяйте полевым данным больше.

Как интерпретировать данные из PageSpeed Insights

Откройте PageSpeed Insights для любой страницы. В верхней части, полевая оценка (если доступна). Ниже, лабораторные метрики. Если полевых данных нет (мало трафика), опирайтесь на лабораторные, но проверяйте на разных устройствах и в разных сетях. Смотрите не только на итоговые цифры, но и на диагностику: «Minimize main-thread work», «Reduce unused JavaScript», «Eliminate render-blocking resources». Это ключ к тому, куда копать.

Как улучшить LCP: Largest Contentful Paint

LCP измеряет время загрузки самого крупного видимого элемента, обычно это изображение, блок текста или видео. Порог, менее 2,5 с. Основные виновники: медленный сервер (TTFB), большие изображения, рендер-блокирующие скрипты и шрифты.

Вот что нужно делать для улучшения LCP:

1. Оптимизируйте сервер. TTFB (Time to First Byte) должен быть ниже 800 мс. Используйте CDN, кеширование на стороне сервера, современный хостинг.
2. Сжимайте и конвертируйте изображения. Форматы WebP или AVIF дают меньший размер при том же качестве. Не загружайте на страницу изображение размером 5 МБ, если оно занимает 300×200 px.
3. Удалите рендер-блокирующие ресурсы. Перенесите критический CSS внутрь страницы (inline), а некритический загружайте асинхронно. Скрипты помечайте атрибутами async или defer.
4. Оптимизируйте шрифты. Используйте font-display: swap, чтобы текст отображался сразу системным шрифтом, а кастомный загружался позже. Предзагружайте основные шрифты через.
5. Улучшите время загрузки самого LCP-элемента. Найдите его в Chrome DevTools. Если это изображение, добавьте fetchpriority=»high» и preload. Если текст, убедитесь, что шрифт не блокирует отрисовку.

В одном из проектов мы уменьшили LCP с 4,1 с до 1,9 с, просто заменив главное изображение на сжатый WebP и настроив предзагрузку. Иногда достаточно одного действия, чтобы пройти порог.

Как улучшить INP: Interaction to Next Paint

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

Основная причина плохого INP, длительные задачи на главном потоке браузера (Long Tasks), которые блокируют ответ на взаимодействие. Они возникают из-за тяжёлого JavaScript: аналитики, чатов, кастомных слайдеров, полифиллов.

Что делать для улучшения INP:

• Разбивайте длинные задачи. Используйте setTimeout, requestAnimationFrame или scheduler.yield, чтобы дать браузеру шанс обработать пользовательский ввод между фрагментами кода.
• Делайте обработчики событий лёгкими. Если при клике запускается пересчёт DOM или сложный рендеринг, перенесите его в Web Worker или хотя бы разбейте на микро-задачи.
• Удалите ненужный сторонний код. Один скрипт аналитики может добавить 100-200 мс к INP. Проверьте, какие скрипты загружаются, и отключите те, что не критичны.
• Используйте content-visibility: auto. Эта CSS-свойство откладывает рендеринг элементов вне экрана, уменьшая нагрузку на главный поток при загрузке и скролле.
• Тестируйте на медленных устройствах. INP часто плох на Android-устройствах среднего сегмента. Эмулируйте такое устройство в DevTools и проверяйте время отклика.

Самый частый источник плохого INP в маркетинговых сайтах, это чат-боты и A/B-тестировщики. Они добавляют десятки килобайт JavaScript, который выполняется при каждом взаимодействии. В одном случае отключение некритичного чата улучшило INP с 350 мс до 150 мс. Всегда проверяйте влияние сторонних скриптов.

Как улучшить CLS: Cumulative Layout Shift

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

Основные причины CLS:

• Изображения и видео без явно заданных размеров.
• Рекламные баннеры, которые вставляются после загрузки контента.
• Встраиваемые виджеты (карты, посты соцсетей, iframe) без фиксированной высоты.
• Шрифты, которые при загрузке меняют размер текста (FOUT/FOIT).

Вот что нужно исправить:

1. Задайте атрибуты width и height для всех изображений и видео. Даже если вы используете CSS для отзывчивости, браузер резервирует место на основе атрибутов. Это основное исправление.
2. Используйте aspect-ratio в CSS. Для контейнеров, которые содержат медиа с неизвестными пропорциями, задайте aspect-ratio, чтобы браузер вычислил высоту до загрузки.
3. Резервируйте место для рекламы и виджетов. Укажите минимальную высоту для контейнера, куда будет вставляться баннер. Даже если реклама не загрузится, сдвига не произойдёт.
4. Оптимизируйте шрифты. Используйте font-display: swap и задайте fallback-шрифт с похожей метрикой, чтобы блок текста не перерисовывался, когда кастомный шрифт загрузится.
5. Избегайте вставки контента поверх уже отрисованного. Особенно это касается динамических баннеров, всплывающих окон и cookie-уведомлений, которые «толкают» основной контент.

В проекте с новостным сайтом мы снизили CLS с 0,35 до 0,08, просто добавив фиксированные размеры для всех изображений в статье и отключив динамическую рекламу в верхней части страницы. Это заняло два часа работы, но результат был заметен сразу в Search Console.

Какие инструменты мониторинга Core Web Vitals использовать

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

Рекомендуемые инструменты:

• Google Search Console, бесплатный отчёт по Core Web Vitals. Обновляется раз в несколько дней. Идеально для отслеживания общей картины по сайту.
• CrUX Dashboard в Looker Studio, кастомный дашборд на основе данных CrUX. Позволяет смотреть тренды метрик по месяцам.
• PageSpeed Insights API, для автоматизированной проверки списка URL. Настройте скрипт, который прогоняет важные страницы раз в неделю.
• RUM-решения (Real User Monitoring), например, Web Vitals library от Google, которую можно внедрить на сайт и собирать реальные данные от посетителей. Это самый точный способ отслеживать INP, потому что лабораторные инструменты не могут полностью симулировать взаимодействие пользователя.

Для агентств и крупных проектов имеет смысл настроить оповещения: если процент «плохих» LCP превышает 10%, команда получает уведомление. Это позволяет реагировать до того, как Search Console покажет ухудшение.

Распространённые ошибки при оптимизации Core Web Vitals

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

• Оптимизация только одной метрики. Улучшение LCP за счёт отключения всего JavaScript может ухудшить INP, если интерактивные элементы станут медленнее реагировать. Всегда проверяйте все три метрики вместе.
• Слепая вера в плагины. Плагины кеширования и оптимизации изображений полезны, но они не решают проблему длинных задач. Без анализа главного потока вы не улучшите INP.
• Игнорирование мобильных устройств. Часто оптимизируют только десктопную версию, а на мобильной, те же проблемы. Проверяйте обе версии.
• Использование только лабораторных данных. Если CrUX показывает плохие значения, но Lighthouse, хорошие, проблема всё ещё существует. Не закрывайте тикет, пока не подтвердите исправление в полевых данных.
• Удаление всего JavaScript. Это крайность. JavaScript нужен для интерактивности. Вместо полного удаления оптимизируйте его: используйте code splitting, ленивую загрузку, удаляйте неиспользуемый код.

Хороший подход, начать с аудита, который выявит самые большие «бутылочные горлышки». Не пытайтесь исправить всё сразу. Сосредоточьтесь на метрике, которая хуже всего, добейтесь зелёной зоны, затем переходите к следующей. Это даёт быстрый результат и мотивирует команду.

Как вписать Core Web Vitals в общую SEO-стратегию

Core Web Vitals, это не изолированная задача. Они пересекаются с общей производительностью сайта, архитектурой данных и контент-маркетингом. Например, медленный сайт наносит ущерб не только показателям, но и восприятию бренда. Пользователь, который ждал загрузки 5 секунд, скорее всего, уйдёт к конкуренту.

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

Назначьте ответственного за Core Web Vitals в вашей команде. Пусть это будет человек, который разбирается в JavaScript, CSS и работе браузера. Без такого специалиста оптимизация INP, в частности, практически невозможна. Если в штате нет технического SEO-специалиста, рассмотрите аутсорсинг технического SEO у специализированного агентства.

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

FAQ по Core Web Vitals

Что важно знать об измерении и улучшении INP, LCP и CLS?

Ключевые моменты: цель оптимизации, достичь зелёной зоны по всем трём метрикам (LCP менее 2,5 с, INP менее 200 мс, CLS менее 0,1), процесс включает диагностику через полевые данные и последовательные исправления. Точные действия зависят от архитектуры сайта и используемых технологий. Без профессионального аудита можно упустить корневые причины.

Когда стоит обратиться к специалисту для решения проблем с Core Web Vitals?

Консультация полезна, если вы уже испробовали базовые рекомендации (сжатие изображений, кеширование), но метрики остаются в красной зоне. Также стоит привлечь эксперта, если INP плох, а вы не можете определить, какие скрипты создают длинные задачи. Ранняя диагностика позволяет избежать накопления технического долга.

Как подготовиться к аудиту Core Web Vitals?

Соберите данные из Search Console, PageSpeed Insights и Chrome DevTools. Запишите текущие значения LCP, INP и CLS для 5-10 самых посещаемых страниц. Отметьте сторонние скрипты и плагины, которые используете. Если есть записи о предыдущих оптимизациях, приложите их. Это ускорит анализ.

Какие риски или ограничения есть у оптимизации Core Web Vitals?

Риски зависят от текущей архитектуры сайта, используемой CMS и сторонних сервисов. Например, отключение критического скрипта может сломать функциональность. Оптимизация LCP за счёт удаления изображения может ухудшить пользовательский опыт. Специалист должен объяснить benefits, альтернативы и реалистичные ожидания до начала работ. Гарантировать прохождение порогов невозможно без тестирования в реальных условиях.

Сколько времени занимает улучшение Core Web Vitals?

Время зависит от сложности проблем. Простые исправления (сжатие изображений, задание размеров для медиа) занимают от нескольких часов до двух дней. Глубокая оптимизация

Сколько времени занимает улучшение Core Web Vitals?

Время зависит от сложности проблем. Простые исправления (сжатие изображений, задание размеров для медиа) занимают от нескольких часов до двух дней. Глубокая оптимизация INP, требующая рефакторинга JavaScript, может занять от одной до трёх недель. В проектах с монолитными CMS или самописными темами сроки увеличиваются, так как изменения затрагивают ядро системы. Реалистичный план: один месяц на диагностику и первоочередные исправления, затем ещё месяц на мониторинг и доведение метрик до зелёной зоны.

Что делать, если Search Console показывает проблемы только на мобильных устройствах?

Это обычная ситуация, потому что мобильные устройства имеют меньшую вычислительную мощность и более медленные сети. Оптимизация для мобильных версий должна быть приоритетной. Проверьте, используете ли вы адаптивную вёрстку (responsive design) или отдельный m-сайт. Для адаптивных сайтов исправления в CSS и JavaScript применяются ко всем версиям. Для отдельных мобильных версий задачи дублируются. Особое внимание уделите размеру передаваемых данных: на мобильных сетях каждый килобайт имеет значение.

Практический чек-лист для ежемесячного аудита Core Web Vitals

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

• Проверьте отчёт Core Web Vitals в Search Console. Посмотрите, не появились ли новые страницы в категории «требует улучшения» или «плохо».
• Запустите PageSpeed Insights для пяти самых посещаемых страниц. Сравните лабораторные данные с предыдущим месяцем. Обратите внимание на рекомендации по JavaScript и CSS.
• Проверьте список сторонних скриптов. Откройте вкладку Network в Chrome DevTools и посмотрите, какие внешние скрипты загружаются. Если появился новый скрипт аналитики или чата, проверьте его влияние на INP.
• Протестируйте CLS на мобильном устройстве. Откройте сайт на реальном смартфоне или в эмуляции и поскролльте страницу. Обратите внимание на элементы, которые сдвигаются после загрузки.
• Проверьте размеры изображений. Используйте Lighthouse, чтобы выявить изображения с неправильными пропорциями или избыточным разрешением. Замените их на оптимизированные версии.
• Обновите плагины и тему. Устаревшие плагины часто содержат неоптимизированный код, который ухудшает производительность. Обновления обычно содержат исправления производительности.

Заключение: долгосрочный подход к Core Web Vitals

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

Сосредоточьтесь на трёх ключевых принципах. Первый: используйте полевые данные как основной источник истины, а лабораторные инструменты, как средство диагностики. Второй: решайте проблемы в порядке приоритета: сначала LCP, затем CLS, затем INP. INP, самая сложная метрика, и её оптимизация требует глубокого понимания работы браузера. Третий: не жертвуйте функциональностью ради производительности. Удаление всех сторонних скриптов может улучшить INP, но сломает аналитику или чат поддержки. Находите баланс между скоростью и возможностями сайта.

Если вы застряли на каком-то этапе, обратитесь к сообществу: официальная документация Google по Web Vitals регулярно обновляется и содержит примеры кода. Также полезно следить за блогами технических SEO-специалистов и участвовать в профильных форумах. Core Web Vitals, это область, где практический опыт и тестирование в реальных условиях ценнее любой теории.

Начните с аудита уже сегодня. Откройте Search Console, найдите страницы с худшими показателями и примените один из описанных методов. Даже одно исправление может улучшить пользовательский опыт и укрепить позиции сайта в поисковой выдаче.