**TL;DR.** Основные веб-показатели в 2026 году: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 на p75. На сайтах электронной коммерции LCP фиксируется за счет предзагрузки главного изображения, INP — за счет отложенной загрузки JS и использования конкурентных функций React 18+, а CLS — за счет резервирования места для изображений и динамических областей. Google оценивает на p75 за 28-дневный период; исправления требуют недель для отражения.

## Пороговые значения 2026 года

| Метрика | Хорошо | Требует улучшения | Плохо   |
| ------- | ------ | ---------------- | ------- |
| LCP    | ≤ 2.5s | 2.5s – 4.0s      | > 4.0s  |
| INP    | ≤ 200ms| 200ms – 500ms    | > 500ms |
| CLS    | ≤ 0.1  | 0.1 – 0.25       | > 0.25  |
| TTFB   | ≤ 800ms| 800ms – 1.8s     | > 1.8s  |

Источник: [web.dev/vitals](https://web.dev/articles/vitals). INP заменил FID как основной веб-показатель в марте 2024 года и остается метрикой на 2026 год.

## Почему важны CWV

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

Помимо ранжирования, CWV напрямую влияет на конверсию. Исследования 2024–2025 годов последовательно показывают:

- Улучшение LCP на 1 секунду: 5–15% рост конверсии на PDP.
- INP менее 200ms: 10–20% снижение отказов от корзины.
- CLS менее 0.1: заметное улучшение восприятия качества UX.

## Измерение правильным образом

Два источника данных имеют значение:

1. **CrUX (Отчет о пользовательском опыте Chrome)**: данные реальных пользователей, которые Google использует для ранжирования. 28-дневный скользящий период, p75. Отображается в PageSpeed Insights и Search Console.
2. **Ваш собственный RUM**: данные реальных пользователей, которые вы собираете с помощью библиотеки `web-vitals` или вашего CDN. Показывает более свежие данные, позволяет разбивать по типу страницы, устройству, стране.

Синтетические инструменты (Lighthouse, WebPageTest) полезны для диагностики, но не для оценки.

## Исправления LCP (наибольшая содержательная отрисовка)

На сайтах электронной коммерции LCP почти всегда:

- Главное изображение на главной странице, PLP и PDP.
- H1 + первый абзац на страницах блога/статьи.

Основные достижения:

1. **Предзагрузите изображение LCP** с помощью `<link rel="preload" as="image" fetchpriority="high">`:

```html
<link rel="preload" as="image" href="/products/leather-bag/hero.avif" fetchpriority="high" imagesrcset="/products/leather-bag/hero-400.avif 400w, /products/leather-bag/hero-800.avif 800w" imagesizes="(max-width: 768px) 100vw, 50vw" />
```

2. **Используйте Next.js `<Image>` с `priority`** для изображения LCP:

```tsx
<Image
  src={product.heroImage}
  width={800}
  height={800}
  priority
  fetchPriority="high"
  alt={product.altText}
/>
```

3. **Используйте современные форматы**. AVIF лучше WebP, лучше JPEG. Next.js Image обрабатывает это автоматически.

4. **Не загружайте изображение LCP с отложенной загрузкой**. `loading="lazy"` предназначен только для изображений ниже видимой области.

5. **Встраивайте критический CSS для стилей выше видимой области**. Избегайте блокировки загрузки таблиц стилей на критическом пути рендеринга.

6. **Используйте рендеринг на краю**. TTFB ≤ 100ms из кэша на краю дает вам большую часть бюджета LCP.

## Исправления INP (взаимодействие с следующим отрисовкой)

INP измеряет худший случай среди всех взаимодействий на странице. Один медленный клик по фильтру может испортить ваш INP на всю сессию.

Основные достижения:

1. **Сократите клиентский JS**. Используйте React Server Components, где это возможно. Каждый килобайт клиентского JS ухудшает INP.

2. **Используйте `startTransition` для не срочных обновлений состояния**:

```tsx
import { startTransition, useState } from 'react';

function FilterButton({ filter }) {
  const [isPending, startTransition] = useTransition();
  return (
    <button onClick={() => startTransition(() => applyFilter(filter))}>
      {filter.label}
    </button>
  );
}
```

3. **Используйте `useOptimistic` для мгновенной обратной связи**:

```tsx
import { useOptimistic } from 'react';

function Cart() {
  const [cart, addOptimistic] = useOptimistic(serverCart);
  return (
    <button onClick={() => {
      addOptimistic({ ...newItem });
      addToCartServerAction(newItem);
    }}>Добавить в корзину</button>
  );
}
```

4. **Дебаунс входные данные**. Автозаполнение поиска должно дебаунситься на 150–250ms с помощью `AbortController`, чтобы отменить текущие запросы:

```tsx
useEffect(() => {
  const controller = new AbortController();
  const timeout = setTimeout(() => {
    fetch(`/api/search?q=${query}`, { signal: controller.signal });
  }, 200);
  return () => {
    clearTimeout(timeout);
    controller.abort();
  };
}, [query]);
```

5. **Выносите литералы регулярных выражений из обработчиков событий** — создание регулярных выражений в горячем пути стоит измеримого INP.

6. **Отложите загрузку некритических сторонних скриптов**. Маркетинговые пиксели, виджеты чата, SDK для A/B тестирования: загружайте их с `strategy="afterInteractive"` или `lazyOnload`.

## Исправления CLS (накопительное смещение макета)

Основные достижения:

1. **Всегда указывайте ширину/высоту для изображений**. Браузеры резервируют правильное пространство.

```html
<img src="/hero.avif" width="800" height="800" alt="..." />
```

2. **Резервируйте место для встроенного контента**. iframes, реклама, видеоплееры требуют явных размеров или контейнеров с соотношением сторон.

3. **Избегайте `font-display: swap` без CSS для запасного шрифта**. Замена приводит к переработке текста. Используйте [size-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust) для соответствия метрикам или принимайте `font-display: optional`.

4. **Не вставляйте контент выше существующего**. Уведомления, согласие на использование файлов cookie, баннеры о распродажах — отображайте их в позиции, которая не смещает страницу.

5. **Скелетные загрузчики должны соответствовать реальным размерам контента**. Скелет, который меньше загруженного контента, смещает страницу.

## Примечания по типам страниц

**Главная страница**

- Главное изображение — это LCP. Предзагрузите его.
- Карусели — это минные поля CLS. Используйте только CSS или предварительно отрендерьте первый слайд.

**PLP (список продуктов / категория)**

- LCP обычно — это изображение первой карточки продукта.
- INP — это клики по фильтрам и пагинация. Используйте `startTransition` активно.
- CLS — это переработка сетки продуктов при применении фильтров. Резервируйте высоту сетки.

**PDP**

- LCP — это главное изображение продукта.
- INP — это смена варианта и добавление в корзину. Оптимистичный UI обязателен.
- CLS — это миниатюры галереи продукта, загружающиеся после главного изображения.

**Корзина / Оформление заказа**

- INP здесь критически важен. Медленная кнопка "разместить заказ" приводит к потерям заказов.
- CLS от загрузки платежных iframes (Stripe Elements и т.д.). Резервируйте место.

## Инструменты

| Инструмент                | Для чего он хорош                                      |
| ------------------------- | ----------------------------------------------------- |
| PageSpeed Insights        | Диагностика одного URL с наложением данных реальных пользователей (CrUX) |
| Lighthouse                | Синтетическое измерение для рабочих процессов разработчиков |
| WebPageTest               | Измерение с ограничением сети, многопозиционное измерение |
| Search Console → CWV      | Уровень домена p75 за 28 дней                         |
| Ваш собственный RUM (web-vitals) | Данные в реальном времени, разбитые по странице, устройству, стране |

## Как Ordiko обрабатывает CWV по умолчанию

Стек магазина Ordiko:

- Next.js 16 + React Compiler.
- `cacheComponents: true` + `experimental.ppr: "incremental"`.
- Рендеринг на краю статических оболочек (TTFB ≤ 100ms).
- Изображение LCP предзагружено по умолчанию на PDP, PLP, главной странице.
- Границы ожидания вокруг динамических островов (корзина, недавно просмотренные, персонализированное главное изображение).
- `startTransition` + `useOptimistic` для управления фильтрами и вариантами.
- 200ms дебаунсированный поиск с `AbortController`.

Типичный p75 реальных пользователей на стандартном PDP Ordiko: LCP 1.0–1.8s, INP 80–160ms, CLS < 0.05.

## Часто задаваемые вопросы

**Влияют ли основные веб-показатели на ранжирование?**
Да, с 2021 года — но как дополнительный критерий, а не как основной сигнал. Две страницы одинакового качества контента будут ранжироваться в порядке CWV. Исправление CWV на странице с низким рейтингом не сделает ее внезапно высокоранговой, если контент слабый.

**Почему исправить INP сложнее, чем LCP?**
LCP в основном является проблемой CDN и оптимизации изображений с хорошо понятными исправлениями. INP — это проблема выполнения JavaScript, требующая анализа по компонентам. Каждое событие взаимодействия может иметь разные узкие места (клик по фильтру против добавления в корзину против смены варианта).

**Какова хорошая цель INP для PDP?**
Менее 200ms на p75 — это 'хорошо'. Менее 100ms достижимо на современных PDP с дисциплиной (RSC, без тяжелых сторонних скриптов, дебаунсированные входные данные). Более 500ms — это 'плохо' и, вероятно, влияет на ранжирование.

**Как Ordiko обрабатывает CWV по умолчанию?**
Ordiko использует Next.js 16 Cache Components + PPR, который стримит статическую оболочку с уже предзагруженным изображением LCP и границами ожидания для динамического контента. Стандартный INP составляет менее 200ms на типичных PDP без индивидуальной оптимизации.