Мы используем cookie-файлы, чтобы улучшить ваш опыт, анализировать трафик и персонализировать контент. Вы можете принять все cookie или выбрать, какие категории разрешить. Подробнее
Основные веб-показатели для электронной коммерции 2026: исправления LCP, INP, CLS | Ordiko
Руководство
Основные веб-показатели для электронной коммерции 2026: исправления LCP, INP, CLS
Практическое руководство 2026 года по основным веб-показателям в электронной коммерции — пороги LCP/INP/CLS, реальные причины и исправления, которые влияют на PDP и PLP.
PT1H
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
Источник: . INP заменил FID как основной веб-показатель в марте 2024 года и остается метрикой на 2026 год.
Частые вопросы
Влияют ли основные веб-показатели на ранжирование?
Да, с 2021 года — но как дополнительный критерий, а не основной сигнал. Две страницы одинакового качества контента будут ранжироваться в порядке CWV. Исправление CWV на странице с низким рейтингом не сделает ее рейтинг высокой, если контент слабый.
Почему исправить INP сложнее, чем LCP?
LCP в основном является проблемой CDN и оптимизации изображений с хорошо понятными исправлениями. INP — это проблема выполнения JavaScript, требующая анализа по компонентам. Каждое событие взаимодействия может иметь свою узкую точку (клик по фильтру против добавления в корзину против смены варианта).
Какова хорошая цель INP для PDP?
Менее 200 мс p75 — это 'хорошо'. Менее 100 мс достижимо на современных PDP с дисциплиной (RSC, без тяжелых сторонних скриптов, дебаунсированные вводы). Более 500 мс — это 'плохо' и, вероятно, влияет на ранжирование.
Как Ordiko обрабатывает CWV по умолчанию?
Ordiko поставляет Next.js 16 Cache Components + PPR, который транслирует статическую оболочку с уже предварительно загруженным изображением LCP и границами Suspense для динамического контента. По умолчанию INP составляет менее 200 мс на типичных PDP без индивидуальной оптимизации.
Google использует CWV как сигнал о качестве страницы в ранжировании. Данные реальных пользователей показывают, что страницы с полностью зелеными CWV обгоняют сопоставимые страницы с плохими CWV в конкурентных нишах.
Помимо ранжирования, CWV напрямую влияет на конверсию. Исследования 2024–2025 годов последовательно показывают:
Улучшение LCP на 1 секунду: 5–15% рост конверсии на PDP.
INP менее 200ms: 10–20% снижение отказов от корзины.
CLS менее 0.1: заметное улучшение восприятия качества UX.
Измерение правильным образом
Два источника данных имеют значение:
CrUX (Отчет о пользовательском опыте Chrome): данные реальных пользователей, которые Google использует для ранжирования. 28-дневный скользящий период, p75. Отображается в PageSpeed Insights и Search Console.
Ваш собственный RUM: данные реальных пользователей, которые вы собираете с помощью библиотеки web-vitals или вашего CDN. Показывает более свежие данные, позволяет разбивать по типу страницы, устройству, стране.
Синтетические инструменты (Lighthouse, WebPageTest) полезны для диагностики, но не для оценки.
Выносите литералы регулярных выражений из обработчиков событий — создание регулярных выражений в горячем пути стоит измеримого INP.
Отложите загрузку некритических сторонних скриптов. Маркетинговые пиксели, виджеты чата, SDK для A/B тестирования: загружайте их с strategy="afterInteractive" или lazyOnload.
Исправления CLS (накопительное смещение макета)
Основные достижения:
Всегда указывайте ширину/высоту для изображений. Браузеры резервируют правильное пространство.
Резервируйте место для встроенного контента. iframes, реклама, видеоплееры требуют явных размеров или контейнеров с соотношением сторон.
Избегайте `font-display: swap` без CSS для запасного шрифта. Замена приводит к переработке текста. Используйте size-adjust для соответствия метрикам или принимайте font-display: optional.
Не вставляйте контент выше существующего. Уведомления, согласие на использование файлов cookie, баннеры о распродажах — отображайте их в позиции, которая не смещает страницу.
Скелетные загрузчики должны соответствовать реальным размерам контента. Скелет, который меньше загруженного контента, смещает страницу.
Примечания по типам страниц
Главная страница
Главное изображение — это 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)
Данные в реальном времени, разбитые по странице, устройству, стране
Влияют ли основные веб-показатели на ранжирование? Да, с 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 без индивидуальной оптимизации.