Почему INP гораздо сложнее, чем LCP?

LCP в основном является проблемой CDN и оптимизации изображений с хорошо понятными решениями. INP — это время выполнения JavaScript при взаимодействии пользователя; каждое нажатие может иметь разные узкие места. Исправление INP требует дисциплины на уровне компонентов для каждого интерактивного элемента на странице.

Исправляет ли React Server Components INP автоматически?

В основном да. RSC уменьшает объем JS-бандла, отправляемого в браузер, что снижает работу основного потока, что улучшает INP. Но интерактивные части страницы все еще нуждаются в клиентском JS — только RSC не исправит плохо написанный клиентский компонент, который создает regex в onClick.

Какой самый большой убийца INP на PDP?

Тяжелая клиентская отрисовка виджетов рекомендаций ('Часто покупают вместе', 'Вам также может понравиться'), которые отправляют 50–200 КБ JS и агрессивно гидратируются при первом взаимодействии. Переместите их в серверные компоненты или загружайте лениво за IntersectionObserver.

Как быстро может работать хорошо оптимизированный PDP по INP?

В реальном мире p75 INP ниже 100 мс достижимо. PDP Ordiko по умолчанию имеют 80–160 мс p75 INP без ручной оптимизации. Пользовательские темы, следующие шаблонам в этом руководстве, могут стабильно достигать менее 100 мс.

Оптимизация INP для страниц деталей продукта (PDP) в 2026 году | Ordiko

Руководство

Оптимизация INP для страниц деталей продукта (PDP) в 2026 году

Сфокусированное руководство по исправлению времени взаимодействия до следующей отрисовки (INP) на страницах PDP в 2026 году, охватывающее смену вариантов, галерею, добавление в корзину и шаблоны компонентов сервера React, которые постоянно снижают INP ниже 200 мс.

PT1H30M

Кратко. INP на PDP исправляется за счет уменьшения объема JavaScript и оптимистичных взаимодействий. Используйте React Server Components для статических частей. Используйте useOptimistic для смены варианта и добавления в корзину. Используйте startTransition для не срочных обновлений. Дебаунс поиска с помощью AbortController. Перенесите регулярные выражения и избегайте оператора spread в обработчиках событий. Цель: < 200ms p75, достижимо < 100ms.

Что измеряет INP

Время взаимодействия до следующей отрисовки (INP) измеряет самое долгое время от взаимодействия до отрисовки на странице во время визита пользователя. "Взаимодействие" — это клик, нажатие или нажатие клавиши, которое запускает JavaScript.

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

Значение INP	Вердикт
≤ 200ms	Хорошо
200ms – 500ms	Требует улучшения
> 500ms	Плохо

Частые вопросы

Почему INP гораздо сложнее, чем LCP?: LCP в основном является проблемой CDN и оптимизации изображений с хорошо понятными решениями. INP — это время выполнения JavaScript при взаимодействии пользователя; каждое нажатие может иметь разные узкие места. Исправление INP требует дисциплины на уровне компонентов для каждого интерактивного элемента на странице.
Исправляет ли React Server Components INP автоматически?: В основном да. RSC уменьшает объем JS-бандла, отправляемого в браузер, что снижает работу основного потока, что улучшает INP. Но интерактивные части страницы все еще нуждаются в клиентском JS — только RSC не исправит плохо написанный клиентский компонент, который создает regex в onClick.
Какой самый большой убийца INP на PDP?: Тяжелая клиентская отрисовка виджетов рекомендаций ('Часто покупают вместе', 'Вам также может понравиться'), которые отправляют 50–200 КБ JS и агрессивно гидратируются при первом взаимодействии. Переместите их в серверные компоненты или загружайте лениво за IntersectionObserver.
Как быстро может работать хорошо оптимизированный PDP по INP?: В реальном мире p75 INP ниже 100 мс достижимо. PDP Ordiko по умолчанию имеют 80–160 мс p75 INP без ручной оптимизации. Пользовательские темы, следующие шаблонам в этом руководстве, могут стабильно достигать менее 100 мс.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 200) {
      console.log('Долгая рамка:', entry);
    }
  }
});
observer.observe({ type: 'long-animation-frame', buffered: true });

Тип скрипта	Рекомендуемая стратегия
Аналитика (GA4, Plausible)	`afterInteractive`
Маркетинговые пиксели	`afterInteractive` или `lazyOnload`
Чат-виджет	`lazyOnload` + IntersectionObserver
SDK A/B тестирования	Встраиваемый блокирующий (редко) или `beforeInteractive`
Движок рекомендаций	Серверный компонент или ленивый IO
Виджет отзывов клиентов	Ленивый загрузка с IntersectionObserver

import Script from 'next/script';

<Script src="/marketing-pixel.js" strategy="afterInteractive" />
<Script src="/chat-widget.js" strategy="lazyOnload" />

// PDPPage (Серверный компонент)
import { ProductGallery } from './product-gallery';      // Сервер
import { ProductInfo } from './product-info';            // Сервер
import { AddToCartButton } from './add-to-cart-button';  // Клиент (интерактивный)
import { VariantSelector } from './variant-selector';    // Клиент (интерактивный)
import { RelatedProducts } from './related-products';    // Сервер
import { ReviewSummary } from './review-summary';        // Сервер

export default async function PDP({ params }) {
  const product = await getProduct(params.slug);
  return (
    <article>
      <ProductGallery images={product.images} />
      <ProductInfo product={product} />
      <VariantSelector variants={product.variants} />
      <AddToCartButton productId={product.id} />
      <ReviewSummary reviews={product.reviews} />
      <RelatedProducts productId={product.id} />
    </article>
  );
}

'use client';
import { useOptimistic, startTransition } from 'react';

export function VariantSelector({ variants, initialSelected }) {
  const [selected, setOptimistic] = useOptimistic(initialSelected);

  function handleSelect(variant) {
    setOptimistic(variant);
    startTransition(async () => {
      await selectVariantServerAction(variant.id);
    });
  }

  return (
    <div>
      {variants.map((v) => (
        <button
          key={v.id}
          onClick={() => handleSelect(v)}
          aria-pressed={selected.id === v.id}
        >
          {v.label}
        </button>
      ))}
    </div>
  );
}

'use client';
import { startTransition, useState } from 'react';
import Image from 'next/image';

export function ProductGallery({ images }) {
  const [active, setActive] = useState(images[0]);

  function handleThumbClick(image) {
    startTransition(() => setActive(image));
  }

  return (
    <div>
      <Image
        src={active.src}
        width={800}
        height={800}
        priority
        alt={active.alt}
      />
      <div>
        {images.map((img) => (
          <button
            key={img.id}
            onClick={() => handleThumbClick(img)}
            onMouseEnter={() => preloadImage(img.src)}
          >
            <Image src={img.thumbSrc} width={80} height={80} alt="" />
          </button>
        ))}
      </div>
    </div>
  );
}

'use client';
import { useEffect, useState } from 'react';

const MAX_SUGGESTIONS = 8;
const DEBOUNCE_MS = 200;

export function SearchAutocomplete() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query) {
      setResults([]);
      return;
    }
    const controller = new AbortController();
    const timeout = setTimeout(async () => {
      try {
        const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
          signal: controller.signal,
        });
        const data = await res.json();
        setResults(data.slice(0, MAX_SUGGESTIONS));
      } catch (err) {
        if (err.name !== 'AbortError') throw err;
      }
    }, DEBOUNCE_MS);
    return () => {
      clearTimeout(timeout);
      controller.abort();
    };
  }, [query]);

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>
        {results.map((r) => (
          <li key={r.id}>{r.name}</li>
        ))}
      </ul>
    </>
  );
}

function handleClick(text) {
  if (/[<>]/.test(text)) { ... }   // регулярное выражение создается при каждом клике
  setItems(prev => [...prev, ...newItems]); // spread в аккумуляторе
}

const TAG_REGEX = /[<>]/;  // перенесено в область модуля

function handleClick(text) {
  if (TAG_REGEX.test(text)) { ... }
  setItems(prev => prev.concat(newItems));
}

import dynamic from 'next/dynamic';

const HeavyReviewWidget = dynamic(() => import('./heavy-review-widget'), {
  ssr: false,
  loading: () => <ReviewSkeleton />,
});

Мы ценим вашу конфиденциальность

Мы ценим вашу конфиденциальность

Оптимизация INP для страниц деталей продукта (PDP) в 2026 году

Что измеряет INP

Частые вопросы

Шаг 1: Профилируйте, не догадывайтесь

Шаг 2: Откладывайте некритичный JS

Шаг 3: Переведите на серверные компоненты

Шаг 4: Оптимистичная смена варианта

Шаг 5: Галерея и миниатюра

Шаг 6: Дебаунс поиска

Шаг 7: Перенос регулярных выражений и избегание spread

Шаг 8: Ленивый загрузка ниже сгиба

Измерение успеха

Как Ordiko по умолчанию поставляет PDP с хорошим INP

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

SEO для страниц категорий и каноническая стратегия для электронной коммерции (2026)

Основные веб-показатели для электронной коммерции 2026: исправления LCP, INP, CLS

E-E-A-T для интернет-магазинов в 2026 году: Опыт, Экспертиза, Авторитетность, Доверие

Мы ценим вашу конфиденциальность

Мы ценим вашу конфиденциальность

Оптимизация INP для страниц деталей продукта (PDP) в 2026 году

Что измеряет INP

Частые вопросы

Похожие материалы

Шаг 1: Профилируйте, не догадывайтесь

Шаг 2: Откладывайте некритичный JS

Шаг 3: Переведите на серверные компоненты

Шаг 4: Оптимистичная смена варианта

Шаг 5: Галерея и миниатюра

Шаг 6: Дебаунс поиска

Шаг 7: Перенос регулярных выражений и избегание spread

Шаг 8: Ленивый загрузка ниже сгиба

Измерение успеха

Как Ordiko по умолчанию поставляет PDP с хорошим INP

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

SEO для страниц категорий и каноническая стратегия для электронной коммерции (2026)

Основные веб-показатели для электронной коммерции 2026: исправления LCP, INP, CLS

E-E-A-T для интернет-магазинов в 2026 году: Опыт, Экспертиза, Авторитетность, Доверие