Веб-инженерия
Влияние Core Web Vitals на реальную выручку сайта
Небольшой фактор ранжирования, огромный рычаг конверсии. Что измеряют LCP, CLS и INP, почему они проседают и как их оптимизировать.
Многие воспринимают Google Core Web Vitals исключительно как требование поисковой оптимизации. На самом деле влияние скорости на позиции в выдаче умеренное, но влияние на коэффициент конверсии и доход бизнеса — колоссальное.
Каждые 100 миллисекунд задержки рендеринга страницы снижают конверсию интернет-магазина на 1%. Пользователи не ждут: на мобильном интернете страница, загружающаяся дольше 2.5 секунд, теряет до 40% посетителей до первого клика.
Разберем три ключевые метрики Core Web Vitals, причины их проседания и методы устранения.
1. Largest Contentful Paint (LCP) — Скорость отрисовки основного контента
LCP измеряет время, за которое на экране появляется самый крупный видимый элемент: главный баннер hero-секции, заголовок H1 или картинка товара.
- Норма: менее 2.5 секунд (наш внутренний стандарт — менее 1.2с).
- Главные причины проседания:
- Медленный ответ сервера (высокий TTFB).
- Тяжелые неоптимизированные изображения без формата WebP/AVIF.
- Блокирующие рендеринг внешние CSS и JavaScript файлы в шапке
<head>. - Как исправить:
- Используйте современные форматы изображений с адаптивными размерами (
srcset). - Добавляйте атрибут
fetchpriority="high"к главному изображению hero-блока. - Размещайте сайт на глобальных Edge CDN (Cloudflare, Vercel).
2. Cumulative Layout Shift (CLS) — Визуальная стабильность верстки
CLS фиксирует сдвиги элементов страницы во время загрузки. Знакомая ситуация: вы собираетесь нажать на кнопку, в этот момент сверху подгружается баннер, контент сдвигается вниз, и вы кликаете на рекламу.
- Норма: индекс менее 0.1 (идеально — 0).
- Главные причины проседания:
- Изображения и баннеры без заданных атрибутов
widthиheightв HTML. - Динамически подгружаемые рекламные блоки и шрифты без предзагрузки (
font-display: swap). - Как исправить:
- Всегда указывайте точные пропорции (
aspect-ratio) или размеры для всех изображений и видео. - Резервируйте фиксированное пространство под динамические виджеты и баннеры через CSS.
3. Interaction to Next Paint (INP) — Отзывчивость на действия пользователя
INP заменил устаревший FID и измеряет задержку между кликом пользователя (по кнопке, меню, фильтру) и визуальным обновлением интерфейса.
- Норма: менее 200 миллисекунд.
- Главные причины проседания:
- Перегруженный главный поток браузера тяжелым JavaScript кодом.
- Неоптимизированные сторонние трекеры (GTM, пиксели, онлайн-чаты).
- Как исправить:
- Разбивайте длительные JavaScript задачи с помощью
requestIdleCallbackилиsetTimeout. - Переносите аналитические скрипты в Web Worker (библиотека Partytown) или на сервер (Server-Side Tracking).
Приоритет оптимизации
- Перенесите сайт на статический или гибридный рендеринг (Next.js / Astro).
- Оптимизируйте шрифты с предзагрузкой (
preload) и локальным размещением. - Сожмите изображения в WebP и задайте фиксированные размеры.
- Проведите аудит сторонних скриптов и удалите неиспользуемые трекеры.
