Core Web Vitals как улучшить LCP, INP и CLS для скорости сайта

Как проверить и улучшить Core Web Vitals в 2026 году? Практическое руководство по LCP, INP и CLS: нормативы Google, диагностика через PageSpeed Insights, Lighthouse и Search Console, исправление тяжёлых изображений, медленного JavaScript и скачков вёрстки.
Core Web Vitals — три показателя Google, которые помогают оценить, насколько быстро пользователь видит основное содержимое страницы, как оперативно интерфейс реагирует на действия и остаётся ли вёрстка стабильной при загрузке. В 2026 году используются LCP, INP и CLS. Для проверки достаточно начать с PageSpeed Insights, а для поиска конкретных причин задержек понадобятся Chrome DevTools и, при необходимости, данные реальных посетителей.
Если сайт медленно отображает первый экран, зависает при нажатии кнопок или неожиданно сдвигает элементы, необходимо выяснить, какая метрика отражает проблему и на каком этапе возникает задержка.
Например, тяжёлая обложка статьи может ухудшать LCP. Сложный обработчик фильтра товаров — INP. А рекламный баннер, появляющийся над текстом без заранее выделенного пространства, — CLS.
Эти ошибки требуют разных исправлений.
Простое подключение CDN или сжатие всех изображений не обязательно улучшит отзывчивость JavaScript. Минификация скриптов сама по себе не устранит скачки макета.
Правильная последовательность оптимизации: измерить показатель → определить проблемный элемент или действие → установить техническую причину → внести исправление → повторить проверку.
Ниже разобраны нормативы Google, различия между лабораторными и пользовательскими данными, способы диагностики и практические решения для обычных сайтов, WordPress, интернет-магазинов и веб-приложений.
Что такое Core Web Vitals
Core Web Vitals — часть набора Web Vitals, разработанного Google для оценки отдельных характеристик пользовательского опыта.
Три основные метрики отражают разные свойства страницы.
LCP (Largest Contentful Paint) — как быстро отображается крупнейший видимый элемент основного содержимого.
INP (Interaction to Next Paint) — как долго пользователь ожидает визуального отклика после взаимодействия с интерфейсом.
CLS (Cumulative Layout Shift) — насколько сильно элементы неожиданно смещаются во время использования страницы.
Эти показатели не заменяют все остальные измерения производительности.
Например, TTFB помогает определить задержку ответа сервера, а FCP — время до появления первого содержимого.
Однако именно LCP, INP и CLS составляют текущий набор Core Web Vitals.
Нормативы Core Web Vitals в 2026 году
| Метрика | Хорошо | Требует улучшения | Плохо |
|---|---|---|---|
| LCP | ≤ 2,5 с | Более 2,5 до 4 с включительно | Более 4 с |
| INP | ≤ 200 мс | Более 200 до 500 мс включительно | Более 500 мс |
| CLS | ≤ 0,1 | Более 0,1 до 0,25 включительно | Более 0,25 |
Границы установлены Google для оценки пользовательского опыта.
Ключевое условие — 75-й процентиль измерений, а не лучший результат одного теста.
Проще говоря, ориентир должен выполняться как минимум для 75% соответствующих пользовательских посещений.
Мобильные устройства и компьютеры необходимо анализировать отдельно.
Почему недостаточно просто получить 100 баллов PageSpeed
Оценка производительности Lighthouse и реальные Core Web Vitals — не одно и то же.
Lighthouse выполняет лабораторное тестирование в заданных условиях.
Реальные посетители используют разные устройства, браузеры, подключения и сценарии взаимодействия.
Поэтому страница может показывать хороший лабораторный результат и одновременно иметь плохой INP у реальной мобильной аудитории.
Или наоборот: отдельный лабораторный прогон может оказаться медленным, хотя накопленные пользовательские данные выглядят лучше.
Приоритет зависит от задачи.
Лабораторный тест помогает искать техническую причину.
Полевые измерения показывают, что действительно испытывают посетители.
Влияют ли Core Web Vitals на позиции Google и Яндекса
Google официально сообщает, что Core Web Vitals используются его основными системами ранжирования.
При этом поисковая система учитывает множество других сигналов, а удовлетворительное состояние технических метрик не гарантирует высокий результат в поиске.
Например, подробное руководство, точно отвечающее на запрос пользователя, может быть релевантнее страницы с более высокой оценкой Lighthouse.
Поэтому нельзя утверждать, что переход с 70 до 95 баллов автоматически поднимет сайт на определённое количество позиций.
Что говорят рекомендации Google
Google рекомендует добиваться хороших значений LCP, INP и CLS, поскольку они связаны с удобством взаимодействия со страницей.
Но поисковая система отдельно подчёркивает, что успешное прохождение Core Web Vitals не является единственным критерием качества документа.
Не существует опубликованной официальной формулы, позволяющей рассчитать прибавку позиций за улучшение LCP на одну секунду.
Как учитывать Яндекс
Яндекс рекомендует оптимизировать скорость страниц, сокращать блокирующие ресурсы и обеспечивать корректную работу сайта на мобильных устройствах.
Медленный интерфейс может мешать человеку просматривать информацию или выполнять необходимые действия.
Однако нельзя переносить пороги Google в Яндекс и объявлять их официальной формулой ранжирования этой поисковой системы.
Для Яндекса важно исследовать техническое состояние сайта вместе с релевантностью, содержанием и удобством для посетителя.
Практический вывод: улучшайте Core Web Vitals ради устранения реальных технических препятствий, а поисковую динамику оценивайте отдельно.
Как проверить Core Web Vitals через PageSpeed Insights
Начните с Google PageSpeed Insights.
Инструмент бесплатный и подходит для первичной диагностики конкретных URL.
Пошаговая проверка
- Откройте PageSpeed Insights.
- Введите полный адрес страницы.
- Запустите анализ.
- Изучите результаты для мобильных устройств.
- Переключитесь на компьютерную версию.
- Проверьте доступные реальные пользовательские показатели.
- Затем изучите лабораторные рекомендации и диагностические сведения.
Не ограничивайтесь главной страницей.
На сайте могут использоваться разные шаблоны: главная, статьи, категории, карточки товаров, фильтры и интерактивные сервисы.
У них могут быть разные причины ухудшения производительности.
Реальные данные и лабораторный тест: в чём отличие
PageSpeed Insights содержит два основных типа информации.
Field Data — реальные пользовательские данные. Они берутся из Chrome User Experience Report, или CrUX, и отражают доступные измерения пользовательского опыта за предыдущие 28 дней.
Lab Data — лабораторные данные. Они формируются с помощью Lighthouse в контролируемых условиях.
Полевые показатели полезны для определения масштаба проблемы.
Лабораторные — для поиска конкретных технических причин.
Например, реальный LCP может быть плохим из-за сочетания медленного соединения, задержки сервера и позднего появления главного изображения.
Лабораторная диагностика помогает разобраться, какой этап загрузки вносит наибольший вклад.
Почему PageSpeed не показывает реальные данные
Иногда для отдельного URL недостаточно подходящих измерений CrUX.
Это не означает, что страница не индексируется или обязательно имеет плохую производительность.
В некоторых случаях PageSpeed Insights может показывать данные по источнику — сайту в целом, а не по конкретной странице.
Проверяйте, к чему относятся доступные показатели: к точному адресу или к источнику.
Если нужных данных нет, используйте лабораторное тестирование и при необходимости собственный мониторинг пользовательских метрик.
Как проверить Core Web Vitals в Google Search Console
Для владельца сайта полезен отчёт Core Web Vitals в Google Search Console.
Он помогает находить проблемные группы страниц на основе пользовательских измерений.
Что показывает отчёт
Данные разделяются по мобильным устройствам и компьютерам.
Google группирует URL со схожими характеристиками пользовательского опыта.
Поэтому сообщение о плохом показателе не обязательно означает, что каждая страница группы имеет полностью одинаковую техническую причину.
Например, несколько статей могут использовать общий шаблон с тяжёлым изображением первого экрана.
Исправление шаблона потенциально затронет всю группу.
Но для подтверждения результата нужно исследовать конкретные документы.
Как работать с проблемной группой
Откройте отчёт Core Web Vitals.
Выберите группу с неудовлетворительным показателем.
Изучите доступные примеры URL.
Затем проверьте один или несколько характерных документов через PageSpeed Insights и DevTools.
Если обнаружена общая ошибка шаблона, сначала устраните её на тестовом окружении.
После внедрения повторите измерения и при необходимости используйте предусмотренную в Search Console проверку исправления.
Помните, что пользовательские данные обновляются не мгновенно.
Даже если техническая проблема устранена сегодня, накопленная статистика за предыдущий период продолжит влиять на результат.
LCP: как ускорить появление основного содержимого
LCP показывает момент отображения крупнейшего подходящего элемента в видимой области страницы.
Это может быть изображение, крупный текстовый блок или другой поддерживаемый элемент.
Почему высокий LCP мешает пользователю
Представим страницу статьи.
Сначала загружается шапка сайта.
Затем появляется пустой блок.
Через несколько секунд показывается большая обложка материала.
Посетитель уже открыл страницу, но основное содержимое первого экрана отображается с задержкой.
Если обложка является LCP-элементом, проблема будет отражена в соответствующем измерении.
При этом LCP не означает время полной загрузки абсолютно всех файлов страницы.
Он оценивает конкретный момент отображения крупнейшего подходящего элемента.
Как найти LCP-элемент
Откройте страницу в Chrome.
Нажмите F12 и перейдите к инструментам разработчика.
Используйте панель Performance или соответствующие диагностические сведения PageSpeed Insights.
Определите элемент, связанный с LCP.
Затем выясните, на каком этапе возникла задержка.
LCP удобно разбирать на четыре составляющие:
| Этап | Что происходит | Возможная проблема |
|---|---|---|
| TTFB | Получение начального HTML | Задержка сервера или перенаправления |
| Resource Load Delay | Ожидание начала загрузки ресурса | Изображение поздно обнаруживается браузером |
| Resource Load Duration | Передача файла | Слишком большой ресурс или медленная сеть |
| Element Render Delay | Ожидание отображения элемента | Блокирующие CSS, JavaScript или рендеринг |
Так становится понятно, почему универсальный совет «сжать изображения» помогает не всегда.
Исправление № 1. Не используйте lazy loading для LCP-изображения
Одна из типичных ошибок — применять loading="lazy" ко всем изображениям без исключения.
Для картинок ниже первого экрана отложенная загрузка может быть полезной.
Но если изображение является основным LCP-элементом, его загрузку обычно необходимо начинать как можно раньше.
Пример:
<img src="/images/hero.webp" width="1200" height="675" fetchpriority="high" alt="Основная иллюстрация статьи">
Атрибут fetchpriority="high" помогает браузеру определить высокий приоритет ресурса.
Не назначайте его десяткам изображений одновременно.
И не добавляйте дополнительные preload без проверки: неправильные подсказки приоритета могут создать конкуренцию между ресурсами.
Исправление № 2. Проверьте размер изображения
Для обложки шириной 1200 пикселей обычно нет необходимости передавать исходную фотографию размером несколько тысяч пикселей, если такая детализация не используется.
Подготовьте подходящие размеры для реального отображения.
Рассмотрите WebP или AVIF.
Сохраняйте приемлемое качество изображения и не используйте чрезмерное сжатие, ухудшающее читаемость текста или важных деталей.
Для разных размеров экрана полезны адаптивные варианты с srcset и sizes.
Однако фактический выигрыш зависит от конкретного файла и способа его доставки.
Исправление № 3. Убедитесь, что ресурс обнаруживается рано
Если основная картинка появляется только после выполнения большого JavaScript-файла, браузер может начать её загрузку с опозданием.
Когда возможно, размещайте важный ресурс в исходном HTML.
Для изображений, подключаемых через CSS, иногда требуется дополнительная настройка приоритета.
Но сначала изучите последовательность загрузки в DevTools.
Не нужно назначать preload каждому изображению сайта.
Исправление № 4. Сократите задержку сервера
Высокий TTFB увеличивает время ожидания начального HTML.
Возможные причины:
- Медленное выполнение серверного кода.
- Неэффективные обращения к базе данных.
- Лишние перенаправления.
- Недостаточное кэширование.
- Географическая задержка.
- Перегрузка приложения.
Для динамического сайта проверьте, какие операции выполняются при формировании документа.
Например, страница может тратить значительное время на повторяющиеся запросы к базе данных.
В таком случае замена формата изображения не исправит основную серверную задержку.
Исправление № 5. Уберите лишние блокировки отображения
Даже если LCP-изображение уже получено браузером, оно может появиться поздно из-за обработки стилей и скриптов.
Проверьте:
- Большие блокирующие CSS-файлы.
- Синхронные JavaScript-ресурсы.
- Позднее добавление содержимого через JS.
- Избыточную работу главного потока.
- Скрипты, скрывающие содержимое до завершения инициализации.
Для внешних скриптов, не требующих немедленного выполнения до построения документа, может быть уместен defer.
Например:
<script src="/js/app.js" defer></script>
Но не переносите все скрипты автоматически.
Некоторый код имеет зависимости, а ошибочная смена порядка исполнения способна сломать функциональность сайта.
INP: как улучшить отзывчивость сайта
INP измеряет задержку взаимодействия с интерфейсом.
Метрика учитывает время от действия пользователя до появления следующего визуального результата.
В отличие от устаревшего FID, который оценивал задержку первого взаимодействия, INP рассматривает подходящие взаимодействия за время посещения страницы.
FID был заменён на INP в марте 2024 года.
Какие действия влияют на INP
Например:
- Нажатие кнопки.
- Открытие меню.
- Выбор фильтра товаров.
- Взаимодействие с полем ввода.
- Открытие интерактивной панели.
- Выполнение действия в калькуляторе.
Плохой INP не обязательно означает медленный сервер.
Часто проблема связана с работой JavaScript в браузере посетителя.
Из чего состоит задержка INP
INP можно разделить на три части.
Input Delay — время ожидания до начала обработки взаимодействия.
Processing Duration — время выполнения обработчиков событий.
Presentation Delay — задержка до появления обновлённого кадра на экране.
Разные причины требуют разных решений.
Например, если главный поток занят обработкой большого стороннего скрипта, пользовательское нажатие может ждать начала обработки.
Если сам обработчик выполняет тяжёлые вычисления, основной вклад приходится на Processing Duration.
Если после клика браузеру нужно пересчитать сложную разметку, увеличивается задержка отображения.
Как найти медленное взаимодействие
Откройте Chrome DevTools.
Перейдите в Performance.
Запишите взаимодействие с проблемной кнопкой, фильтром или меню.
Изучите дорожку взаимодействий и связанные длительные задачи.
Проверьте, где именно тратится время.
Не ограничивайтесь единственным кликом на быстром компьютере.
Если проблема возникает преимущественно на недорогих мобильных устройствах, для диагностики потребуется учитывать ограниченную вычислительную мощность.
Исправление № 1. Уменьшите объём JavaScript
Проверьте, какие скрипты действительно нужны странице.
Например, небольшая информационная статья может загружать библиотеки для интерактивных компонентов, которые на ней вообще не используются.
Избыточный JavaScript требует загрузки, разбора и выполнения.
Это может задерживать взаимодействия.
Используйте разделение кода, удаление ненужных зависимостей и отложенную инициализацию необязательных компонентов, если это соответствует архитектуре проекта.
Исправление № 2. Избегайте длительных обработчиков событий
Предположим, после нажатия кнопки выполняется сложная сортировка большого массива данных.
Если операция полностью блокирует главный поток, интерфейс может перестать реагировать до её завершения.
Возможные подходы:
- Оптимизировать алгоритм.
- Уменьшить объём синхронной работы.
- Разделить длительную операцию на этапы.
- Перенести подходящие вычисления в Web Worker.
- Сократить избыточные обновления интерфейса.
Не нужно создавать Web Worker для каждого простого обработчика.
Такая архитектура оправданна только при реальной вычислительной нагрузке.
Исправление № 3. Проверьте сторонние скрипты
Проблемы могут создавать:
- Виджеты.
- Рекламные библиотеки.
- Сложные аналитические скрипты.
- Встраиваемые интерфейсы.
- Необязательные интерактивные элементы.
Отключайте компоненты по одному в контролируемом тестовом окружении и повторяйте измерения.
Так можно установить, какой скрипт влияет на отзывчивость.
Не следует удалять функциональный код только потому, что инструмент отметил большой размер файла.
Сначала выясните, какая операция вызывает задержку.
Исправление № 4. Упростите тяжёлые изменения DOM
Если при открытии меню браузер перестраивает тысячи элементов, проблема может быть связана не с обработчиком клика, а с последующим отображением.
Уменьшите ненужные изменения документа.
Для больших списков рассмотрите виртуализацию.
Избегайте многократных принудительных перерасчётов размеров и положения элементов.
Сложные анимации также следует проверять отдельно.
Почему Lighthouse не показывает настоящий INP одной кнопкой
Обычный лабораторный прогон Lighthouse не воспроизводит всю последовательность реальных пользовательских взаимодействий.
Поэтому он не может заменить полевой INP.
В качестве дополнительного диагностического ориентира можно использовать Total Blocking Time — TBT.
Но TBT и INP измеряют разные вещи.
Для поиска проблемных действий используйте Performance в DevTools и, при наличии возможности, реальные пользовательские измерения.
CLS: как убрать скачки вёрстки
CLS измеряет неожиданные смещения видимых элементов во время использования страницы.
У этой метрики нет единицы времени.
Значение рассчитывается на основе характеристик изменений расположения элементов.
Как выглядит плохой CLS
Посетитель открывает статью.
Начинает читать текст.
После загрузки рекламного блока первый абзац внезапно смещается вниз.
Или пользователь собирается нажать кнопку, но над ней появляется новое изображение, из-за чего положение кнопки меняется.
Такое поведение мешает взаимодействию.
Какие причины встречаются чаще всего
- Изображения без заранее определённых размеров.
- Рекламные контейнеры без зарезервированного пространства.
- Поздно появляющиеся iframe.
- Динамическое добавление элементов над содержимым.
- Изменение размеров текста при загрузке шрифтов.
- Анимации, затрагивающие геометрию страницы.
Не каждое движение элемента считается проблемным смещением.
Метрика учитывает соответствующие правила определения неожиданных layout shifts.
Исправление № 1. Указывайте размеры изображений
Пример:
<img src="/images/article.webp" width="1200" height="675" alt="Иллюстрация к статье">
Когда браузер заранее знает соотношение сторон, он может выделить нужное пространство до загрузки файла.
Для адаптивного отображения обычно применяют:
max-width: 100%; height: auto;
При соответствующей структуре это позволяет изменять размер картинки без неожиданных скачков.
Исправление № 2. Резервируйте место под рекламу
Если на странице появляется рекламный баннер, для него желательно заранее предусмотреть подходящую область.
Например, использовать контейнер с предусмотренной высотой или минимальной высотой, соответствующей возможным форматам размещения.
Но нельзя назначить одно случайное значение для всех устройств.
Мобильный баннер может отличаться по размерам от десктопного.
Сначала определите фактическую схему рекламных блоков.
Исправление № 3. Проверьте шрифты
При замене временного шрифта на веб-шрифт текст может изменить размеры.
Это иногда приводит к смещению блоков.
Возможные решения включают подходящую настройку font-display, выбор совместимых запасных шрифтов и корректировку метрик шрифтов при необходимости.
Но ни одно значение font-display не является универсальным исправлением всех проблем CLS.
Проверяйте фактический результат в браузере.
Исправление № 4. Не вставляйте новые блоки над текстом без необходимости
Например, после загрузки страницы появляется большой информационный баннер перед заголовком.
Из-за этого весь материал перемещается вниз.
Лучше заранее предусмотреть пространство, использовать подходящий вариант отображения или пересмотреть момент появления элемента.
При этом баннер не должен мешать чтению и основным действиям пользователя.
Исправление № 5. Пересмотрите анимации
Анимации свойств width, height, top или left могут вызывать перерасчёт расположения элементов.
Там, где это соответствует интерфейсу, для анимаций лучше рассмотреть transform и opacity.
Но нельзя автоматически заменять всю анимационную логику: визуальная стабильность, доступность и удобство интерфейса должны проверяться вместе.
Как определить, какую метрику исправлять первой
Необязательно оптимизировать все показатели одновременно.
Начните с проблем, которые затрагивают важные страницы и заметно мешают пользователям.
| Симптом | Вероятная область | С чего начать |
|---|---|---|
| Главная обложка появляется поздно | LCP | Проверить LCP-элемент, размер и приоритет загрузки |
| Страница долго остаётся пустой | LCP, FCP, TTFB | Проверить сервер, CSS и рендеринг |
| Фильтр реагирует через заметную паузу | INP | Записать взаимодействие в DevTools |
| Меню зависает при открытии | INP | Проверить JS и перестроение DOM |
| Текст смещается после появления рекламы | CLS | Зарезервировать пространство |
| Изображения раздвигают страницу | CLS | Указать размеры |
| Шрифт меняет ширину текста | CLS | Проверить загрузку и метрики шрифтов |
Это предварительная карта диагностики.
Причину необходимо подтверждать измерениями, а не назначать исключительно по внешнему виду страницы.
Оптимизация Core Web Vitals в WordPress
WordPress может работать быстро, но результат зависит от темы, плагинов, настроек сервера и содержания страниц.
Не существует универсального набора переключателей, который гарантированно решает проблемы производительности для любого сайта.
Сначала определите проблемный шаблон
Проверьте отдельно:
- Главную страницу.
- Обычную статью.
- Страницу рубрики.
- Страницу с формой.
- Карточку товара, если используется магазин.
Если плохой LCP наблюдается только на статьях, изучите их обложки и шаблон отображения.
Если медленно работает каталог, проверьте фильтры и интерактивный JavaScript.
Что можно сделать через настройки CMS
Часто доступны:
- Генерация современных форматов изображений.
- Создание адаптивных размеров картинок.
- Управление кэшированием.
- Ограничение ненужных скриптов.
- Оптимизация загрузки отдельных ресурсов.
- Настройка поведения виджетов.
Но не включайте все параметры оптимизационного плагина одновременно.
Например, объединение или перенос скриптов может нарушить порядок выполнения JavaScript.
Перед серьёзными изменениями сделайте резервную копию и проверьте работу сайта на тестовом окружении.
Почему удаление плагинов не всегда ускоряет сайт
Важнее не общее количество установленных плагинов, а то, что они выполняют на конкретной странице.
Один тяжёлый компонент может создавать большую задержку, чем несколько небольших расширений.
Поэтому сначала определите источник нагрузки.
Затем отключайте или заменяйте ненужный код.
Такой подход уменьшает риск сломать рабочие функции сайта.
Core Web Vitals для интернет-магазина
В интернет-магазине необходимо уделять внимание не только первому экрану, но и взаимодействию с каталогом.
Например, пользователь может быстро открыть категорию, но столкнуться с задержками при выборе характеристик товара.
Какие сценарии проверять
Категория. Появление первого экрана и работа фильтров.
Карточка товара. Загрузка основного изображения и галереи.
Поиск. Время реакции на ввод и отображение предложений.
Корзина. Отзывчивость кнопок изменения количества.
Оформление заказа. Работа полей, проверок и уведомлений об ошибках.
Не следует ограничиваться результатом PageSpeed для главной страницы.
Важные проблемы пользовательского опыта могут проявляться только после взаимодействия.
Как не навредить функциональности
Некоторые агрессивные оптимизации скриптов способны нарушить загрузку корзины, фильтров и форм.
Поэтому после каждого существенного изменения проверяйте реальные пользовательские сценарии.
Хороший Lighthouse не компенсирует неработающую кнопку оформления заказа.
Практический пример диагностики LCP, INP и CLS
Рассмотрим условную страницу интернет-магазина.
В результате предварительной проверки обнаружены три проблемы.
LCP выходит за рекомендуемый диапазон.
Фильтр товаров заметно задерживает отклик.
После загрузки баннера меняется положение части каталога.
Как составить план
| Проблема | Что проверить | Предполагаемое исправление | Критерий проверки |
|---|---|---|---|
| Плохой LCP | Элемент, начало загрузки, размер ресурса | Приоритет и доставка основного изображения | Снижение LCP при повторных измерениях |
| Плохой INP | Обработчик фильтра, длительные задачи | Уменьшение синхронной работы JS | Быстрый визуальный отклик |
| Плохой CLS | Размер рекламного контейнера | Резервирование пространства | Отсутствие неожиданного смещения |
Это учебный пример, а не результат реального аудита.
Точные значения не приводятся, поскольку измерения конкретного сайта не выполнялись.
Почему нельзя исправлять всё одновременно
Если в одном обновлении заменить изображения, переписать JavaScript и изменить шаблон, будет сложнее определить влияние каждого изменения.
По возможности тестируйте отдельные гипотезы.
Фиксируйте исходное состояние.
Сохраняйте дату внедрения и техническое описание правки.
После этого проверяйте результат.
Как подготовить техническое задание на улучшение Core Web Vitals
Обычной рекомендации «ускорить сайт» недостаточно.
Для разработчика нужно указать проблему, место возникновения и критерии завершения задачи.
Что включить в SEO-ТЗ
| Поле | Что записать |
|---|---|
| URL | Конкретная страница или шаблон |
| Устройство | Mobile или Desktop |
| Метрика | LCP, INP либо CLS |
| Исходное значение | Подтверждённый показатель |
| Источник | PSI, CrUX, DevTools или собственный мониторинг |
| Проблемный элемент | Изображение, обработчик, контейнер |
| Причина | Подтверждённая техническая проблема |
| Исправление | Конкретная задача |
| Приоритет | Очерёдность выполнения |
| Приёмка | Как проверить результат |
Пример задания для LCP
Неудачная формулировка:
«Сделать картинки легче».
Рабочая формулировка:
«Для шаблона статьи определить LCP-элемент. Если им является основная обложка, проверить её размеры, момент обнаружения браузером и приоритет загрузки. Исключить ошибочный lazy loading, подготовить подходящий размер файла и повторно измерить LCP на мобильном устройстве».
Так разработчик понимает, какую проблему необходимо исследовать.
Пример задания для CLS
«Проверить смещение основного содержимого при загрузке рекламного блока в мобильной версии. Зарезервировать подходящее пространство под фактический формат баннера. Подтвердить результат повторной записью Performance и проверкой CLS».
Здесь есть конкретный объект и способ подтверждения исправления.
Как измерять Core Web Vitals после внедрения
После технической оптимизации необходимо выполнить два вида проверки.
Лабораторная приёмка
Повторно запустите PageSpeed Insights и, при необходимости, Lighthouse или запись Chrome DevTools.
Сравнивайте однотипные условия.
Убедитесь, что исчезла первоначальная причина задержки.
Например, если проблема заключалась в lazy loading основного изображения, проверьте, когда браузер теперь начинает его загружать.
Не ограничивайтесь общей оценкой производительности.
Проверка реальных пользователей
После внедрения наблюдайте за доступными данными CrUX или собственных пользовательских измерений.
Учитывайте, что PageSpeed Insights использует данные за предыдущие 28 дней.
Поэтому новые показатели не обязаны мгновенно отражать исправление.
Если используется собственный RUM, можно изучать изменения подробнее.
Однако для небольших сайтов объём измерений может быть недостаточным для уверенных выводов.
Нужно ли ждать роста позиций
Исправление Core Web Vitals и изменение органического трафика — разные результаты.
Первый можно проверить техническими измерениями.
Второй зависит от поискового спроса, конкурентов, релевантности и других факторов.
Поэтому успешная оптимизация не обязательно сопровождается заметным ростом позиций.
И это не означает, что техническая работа была бесполезной.
Ошибки, которые мешают улучшить Core Web Vitals
Использовать lazy loading для главной обложки
Важный LCP-ресурс может загружаться позже необходимого.
Сначала определите LCP-элемент, затем настройте его загрузку.
Считать TBT и INP одинаковыми метриками
TBT полезен для лабораторной диагностики блокирующих задач.
Но он не заменяет измерение пользовательских взаимодействий.
Удалять весь JavaScript ради оценки Lighthouse
Это может повредить функциональности.
Исправляйте подтверждённые источники задержек, а не удаляйте рабочие компоненты без анализа.
Подключать CDN как универсальное решение
CDN может помочь с доставкой ресурсов и задержками сети.
Но он не устранит тяжёлую синхронную обработку события на устройстве пользователя.
Сжимать изображения без изменения их загрузки
Маленький файл тоже может появиться поздно, если браузер обнаруживает его после выполнения большого скрипта.
Не задавать размеры динамических блоков
Рекламные вставки и изображения способны менять расположение содержимого.
Предусматривайте подходящее пространство заранее.
Проверять только десктоп
На мобильных устройствах могут использоваться другие соединения и характеристики процессора.
Поэтому результаты необходимо анализировать отдельно.
Приписывать рост позиций одному техническому исправлению
Совпадение изменения позиции и даты оптимизации не доказывает причинную связь.
Для поисковых выводов нужны дополнительные данные.
Добиваться идеальной оценки вместо решения проблемы пользователя
Если страница технически быстрая, но форма не работает, пользовательская задача остаётся нерешённой.
Не подменяйте функциональное качество одной числовой оценкой.
Чек-лист Core Web Vitals перед завершением оптимизации
Перед сдачей технических изменений убедитесь, что выполнены основные проверки.
Измерения
- Проверены мобильная и десктопная версии.
- Сохранены исходные показатели.
- Разделены лабораторные и реальные данные.
- Определены важные типы страниц.
- Проверен источник пользовательских данных.
LCP
- Найден фактический LCP-элемент.
- Проверен TTFB.
- Проанализировано начало загрузки ресурса.
- Основное изображение не задерживается ненужным lazy loading.
- Проверены размер и формат файла.
- Исключены существенные блокировки отображения.
INP
- Определены медленные взаимодействия.
- Проверены длительные JavaScript-задачи.
- Исследованы обработчики событий.
- Оценено время изменения интерфейса.
- Проверены сторонние скрипты.
- После исправления сохранена работоспособность функций.
CLS
- У изображений заданы необходимые размеры.
- Для рекламы предусмотрено пространство.
- Проверены динамические вставки.
- Исследовано поведение шрифтов.
- Проверены смещения при мобильном отображении.
Результат
- Изменения протестированы до публикации.
- Выполнена повторная лабораторная диагностика.
- Зафиксирована дата внедрения.
- Проверены пользовательские сценарии.
- Запланировано наблюдение за полевыми метриками.
- Поисковые показатели анализируются отдельно от технических.
Частые вопросы о Core Web Vitals
Какие показатели входят в Core Web Vitals в 2026 году?
LCP, INP и CLS.
Они отражают скорость отображения крупнейшего подходящего элемента, отзывчивость интерфейса и визуальную стабильность.
Какие значения считаются хорошими?
Google рекомендует LCP не более 2,5 секунды, INP не более 200 миллисекунд и CLS не более 0,1.
Для оценки пользовательского опыта используется 75-й процентиль.
Влияют ли Core Web Vitals на SEO?
Google использует эти метрики в своих основных системах ранжирования.
Но хорошие показатели не гарантируют высоких позиций.
Релевантность и качество содержимого также имеют существенное значение.
Что важнее — LCP, INP или CLS?
Все три метрики измеряют разные характеристики.
Нельзя заменить одну другой.
Для практической оптимизации сначала исследуйте показатель, который действительно ухудшен и влияет на важные пользовательские сценарии.
Почему INP плохой, хотя сайт быстро открывается?
Скорость первого отображения и отзывчивость интерфейса — разные характеристики.
Страница может быстро появляться на экране, но зависать при обработке пользовательского события из-за тяжёлого JavaScript.
Можно ли улучшить Core Web Vitals без разработчика?
Часть задач доступна через CMS: оптимизация изображений, настройки кэша, удаление ненужных виджетов.
Для диагностики сложных скриптов, проблем рендеринга и серверных задержек могут потребоваться навыки разработки.
Почему PageSpeed показывает разные результаты?
Лабораторные измерения зависят от тестовых условий.
Реальные показатели объединяют данные разных пользователей и устройств.
Кроме того, на результаты влияют сеть, процессор, серверная нагрузка и содержимое страницы.
Когда обновятся показатели в Search Console?
Не мгновенно.
Используются накопленные данные реальных посетителей.
После исправления необходимо дождаться обновления доступной статистики и прохождения соответствующей проверки.
Нужно ли получать 100 баллов Lighthouse?
Нет.
Лучше ориентироваться на реальные проблемы пользователей и достижение хороших значений Core Web Vitals, чем тратить значительные ресурсы на последние несколько лабораторных баллов без заметной практической пользы.
Улучшает ли Core Web Vitals индексацию?
Оптимизация производительности не является гарантированным способом включения страницы в индекс.
Индексирование зависит от доступности URL, правил обхода, содержимого и других условий.
Если страница не индексируется, необходимо отдельно проверить причины в поисковой консоли.
Что действительно важно при оптимизации Core Web Vitals
Смысл работы не в том, чтобы один раз получить красивую оценку PageSpeed Insights.
Необходимо сделать страницу удобной для реальных посетителей.
Пользователь должен быстро увидеть основную информацию.
Кнопки и интерактивные элементы должны реагировать без заметных задержек.
Содержимое не должно неожиданно менять положение.
Поэтому полезная техническая диагностика всегда связывает измерение с конкретным поведением страницы.
LCP показывает, когда человек видит основной контент. INP — насколько быстро получает отклик. CLS — остаётся ли интерфейс стабильным.
Не нужно исправлять эти показатели одной универсальной настройкой.
Сначала выясните причину.
Затем внесите адресное изменение.
Проверьте, что исправление не повредило другим функциям.
И только после этого оценивайте результат по реальным пользовательским данным.
Именно такой подход превращает Core Web Vitals из формального SEO-чек-листа в полноценный инструмент улучшения производительности сайта.
Материалы SEOGIDTALK по теме
Для смежных технических задач полезны отдельные руководства:
- Скорость загрузки сайта: как проверить и ускорить страницы — общая оптимизация скорости, серверных ресурсов и доставки файлов.
- Проверка технических ошибок сайта — диагностика HTTP-ответов, перенаправлений и проблем технического SEO.
- Внутренний SEO-аудит сайта — проверка внутренней структуры и технического состояния страниц.
Официальные источники
- Google Search Central — Core Web Vitals и поисковая выдача.
- Google — как пользовательский опыт учитывается в поиске.
- web.dev — метрики и нормативы Core Web Vitals.
- web.dev — оптимизация LCP.
- web.dev — оптимизация INP.
- web.dev — устранение CLS.
- Google — как работает PageSpeed Insights.
- Яндекс Вебмастер — рекомендации по ускорению сайта.
- Яндекс Вебмастер — мобильная адаптивность.