?>

Core Web Vitals объяснение: LCP, INP, CLS – Полное руководство для начинающих (2026)

Core Web Vitals — это набор ориентированных на пользователя метрик Google, которые измеряют реальный опыт взаимодействия со страницей. Они являются факторами ранжирования с 2021 года, и в 2026 году они важнее, чем когда-либо – их прохождение может напрямую улучшить ваш поисковый рейтинг и коэффициенты конверсии. Это руководство объясняет каждую метрику, как их измерять и как именно исправлять распространенные проблемы.

Почему Core Web Vitals важны (Бизнес-обоснование)

• Страницы, которые проходят Core Web Vitals, на 24% реже покидаются.
• Улучшение LCP на 0,5 с может увеличить конверсию на 12-15% (исследование Google).
• Плохие Core Web Vitals — это фактор решающего голоса – если две страницы имеют схожую релевантность, более быстрая и стабильная страница ранжируется выше.

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

Три Core Web Vitals – Детальная разбивка

1. LCP (Largest Contentful Paint) – Скорость загрузки

Что измеряет: Время, необходимое для рендеринга самого большого видимого элемента (главное изображение, заголовок, видео). Хорошо: менее 2,5 секунд. Плохо: более 4 секунд.

Почему это важно: Пользователи воспринимают скорость на основе того, когда появляется основной контент. Медленный LCP вызывает ощущение сломанного сайта.

Распространенные причины плохого LCP:

• Большие главные изображения (>200 КБ).
• Медленное время ответа сервера (TTFB >600 мс).
• CSS или JavaScript, блокирующие рендеринг.
• Рендеринг на стороне клиента (React/Vue), задерживающий отрисовку.

2. INP (Interaction to Next Paint) – Отзывчивость

Что измеряет: Время между взаимодействием пользователя (щелчок, касание, нажатие клавиши) и следующим визуальным обновлением. Хорошо: менее 200 миллисекунд. Заменил FID в 2024 году.

Почему это важно: Медленный INP заставляет ваш сайт казаться тормознутым. Пользователь нажимает на кнопку, и ничего не происходит – он предполагает, что она сломана.

Распространенные причины плохого INP:

• Длинные задачи JavaScript, блокирующие основной поток (>50 мс).
• Тяжелые обработчики событий при каждом взаимодействии.
• Сторонние скрипты (аналитика, виджеты чата), выполняемые при взаимодействии.

3. CLS (Cumulative Layout Shift) – Визуальная стабильность

Что измеряет: Величина неожиданного сдвига макета (движения) видимых элементов. Хорошо: менее 0,1. Плохо: более 0,25.

Почему это важно: Сдвигающийся контент заставляет пользователей терять свое место, случайно нажимать на рекламу или испытывать разочарование. Это прямой провал пользовательского опыта.

Распространенные причины плохого CLS:

• Изображения или видео без явных `width` и `height`.
• Поздно загружающиеся шрифты, которые заменяют и сдвигают текст.
• Динамически внедряемый контент (реклама, баннеры), который вытесняет существующий контент вниз.

Как измерить Core Web Vitals вашего сайта

• Полевые данные (реальные пользователи, определяют рейтинг): Google Search Console → отчет Core Web Vitals. Также CrUX (Chrome User Experience Report).
• Лабораторные данные (имитированные, для отладки): PageSpeed Insights, Lighthouse в DevTools, WebPageTest.

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

Исправление плохого LCP – Пошаговое руководство

1. Оптимизируйте главные изображения

Конвертируйте в WebP, сжимайте с помощью таких инструментов, как Squoosh или ImageOptim. Используйте `srcset` для обслуживания изображений подходящего размера для каждого устройства.

<code>&lt;img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" width="800" height="500" fetchpriority="high" alt="Главное"&gt;</code>

2. Предварительно загрузите элемент LCP

<code>&lt;link rel="preload" as="image" href="hero.webp" fetchpriority="high"&gt;</code>

3. Улучшите TTFB (Time to First Byte)

• Используйте VPS вместо общего хостинга.
• Включите PHP‑FPM с OPcache.
• Внедрите индексирование базы данных и кэширование (Redis или Memcached).
• Рассмотрите возможность использования CDN (Cloudflare, Bunny.net) для глобального распространения.

4. Устраните ресурсы, блокирующие рендеринг

Встройте критический CSS, отложите некритический CSS и добавьте `defer` или `async` к файлам JavaScript.

<code>&lt;style&gt; /* критический CSS */ &lt;/style&gt;<br>&lt;link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'"&gt;<br>&lt;script defer src="analytics.js"&gt;&lt;/script&gt;</code>

Исправление плохого INP – Углубленное изучение отзывчивости

1. Разбивайте длинные задачи JavaScript

<code>function heavyTask() {<br>  let i = 0;<br>  function chunk() {<br>    const start = performance.now();<br>    while (i < items.length && performance.now() - start < 5) {<br>      process(items[i]);<br>      i++;<br>    }<br>    if (i < items.length) setTimeout(chunk, 0);<br>  }<br>  chunk();<br>}</code>

2. Оптимизируйте обработчики событий

<code>addEventListener('scroll', () => { ... }, { passive: true });</code>

3. Удалите или отложите сторонние скрипты

<code>document.getElementById('chat-trigger').addEventListener('click', () => {<br>  const script = document.createElement('script');<br>  script.src = 'https://chatwidget.com/script.js';<br>  document.head.appendChild(script);<br>});</code>

Исправление плохого CLS – Устранение сдвигов макета

1. Добавьте явную ширину/высоту для всех медиа

<code>&lt;img src="image.webp" width="800" height="500"&gt;</code>

2. Зарезервируйте место для шрифтов

<code>@font-face {<br>  font-family: 'Inter';<br>  font-display: swap;<br>  /* ... */<br>}</code>

3. Избегайте вставки контента над существующим контентом

Если вы должны показывать баннер или уведомление, зарезервируйте для него место, используя div-заполнитель с фиксированной высотой.

WordPress против пользовательского PHP для Core Web Vitals

Сайты на пользовательском PHP стабильно показывают более высокие результаты, потому что нет раздувания плагинов, нет накладных расходов тем и нет принудительного JavaScript. Установка WordPress по умолчанию часто проваливает CLS из-за того, что административная панель сдвигает контент для вошедших в систему пользователей (даже если посетители ее не видят). С пользовательским PHP вы контролируете каждый байт. Вы можете встроить критический CSS, предварительно загрузить именно то, что нужно, и полностью избежать сдвигов макета.

Реальный пример из практики: От провала к успеху за 7 дней

Компания по оказанию бытовых услуг имела сайт на WordPress с плохими Core Web Vitals: LCP 4,2 с, INP 540 мс, CLS 0,29. Мы перенесли внешний интерфейс на статический сайт на пользовательском PHP (сохранив существующую серверную часть для бронирования).

Предпринятые действия:

• Главное изображение преобразовано в WebP и предварительно загружено.
• Критический CSS для главного раздела и навигации встроен.
• Весь JavaScript перемещен в `defer` или загружается после взаимодействия пользователя.
• Для всех изображений и iframe установлены явные размеры.

Результаты через 1 неделю (полевые данные из GSC):

• LCP: 4,2 с → 1,1 с (пройден).
• INP: 540 мс → 98 мс (пройден).
• CLS: 0,29 → 0,02 (пройден).
• Органический трафик: +34% через 60 дней (благодаря улучшению рейтинга).

Теперь клиент не платит текущих сборов за плагины и владеет легким, быстрым кодом.

Пошаговый план действий по исправлению ваших Core Web Vitals

1. Измерьте текущее состояние – Запустите PageSpeed Insights. Запишите LCP, INP, CLS для мобильных устройств.
2. Исправьте легкие проблемы – Сожмите изображения, включите кэширование, используйте CDN.
3. Если LCP > 2,5 с: Предварительно загрузите главное изображение, встройте критический CSS, улучшите ответ сервера.
4. Если INP > 200 мс: Разбейте длинные задачи JS, отложите сторонние скрипты, оптимизируйте обработчики событий.
5. Если CLS > 0,1: Добавьте размеры всем медиа, используйте `font-display: swap`, избегайте вставки динамического контента над сгибом.
6. Проведите повторное тестирование и мониторинг – Используйте отчет Core Web Vitals в Google Search Console для отслеживания реальных пользовательских данных с течением времени.

Если вы используете WordPress, рассмотрите возможность перехода на легкую тему (GeneratePress, Kadence), удаления ненужных плагинов и использования плагина типа Perfmatters или FlyingPress. Но самое лучшее решение — это пользовательский PHP-сайт, созданный для производительности.

Готовы пройти Core Web Vitals и повысить рейтинг?

Я создаю пользовательские PHP-сайты, которые набирают 100 в Lighthouse и с самого начала проходят все Core Web Vitals. Вы платите один раз – никаких подписок, никаких скрытых затрат. Я также исправлю Core Web Vitals вашего существующего сайта, если вы не готовы к миграции.

Давайте поговорим о вашем сайте – я предоставлю бесплатный аудит Core Web Vitals.

Данные получены из реальных проектов клиентов и опубликованных тематических исследований Google. Индивидуальные результаты могут отличаться.