Чому 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 році

Сфокусований посібник з виправлення Interaction to Next Paint (INP) на електронних комерційних PDP у 2026 році, що охоплює обмін варіантами, галерею, додавання до кошика та шаблони React Server Components, які постійно знижують INP до 200мс.

PT1H30M

TL;DR. INP на PDP виправлено шляхом зменшення обсягу JavaScript та оптимістичних взаємодій. Використовуйте React Server Components для статичних частин. Використовуйте useOptimistic для зміни варіантів та додавання в кошик. Використовуйте startTransition для не термінових оновлень. Затримуйте пошук за допомогою AbortController. Витягуйте regex і уникайте spread у обробниках подій. Ціль: < 200ms p75, досяжно < 100ms.

Що вимірює INP

Interaction to Next Paint (INP) вимірює найдовший час взаємодії до малювання на сторінці під час візиту користувача. "Взаємодія" — це клік, торкання або натискання клавіші, яке викликає JavaScript.

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

Значення INP	Висновок
≤ 200ms	Добре
200ms – 500ms	Потрібно покращити
> 500ms	Погано

Крок 1: Профілюйте, не гадайте

Поширені запитання

Чому 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
A/B тест SDK	Інлайн блокування (рідко) або `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)) { ... }   // regex створюється при кожному кліку
  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: Витягніть regex і уникайте spread

Крок 8: Ліниве завантаження нижче згину

Вимірювання успіху

Як Ordiko за замовчуванням постачає PDP з хорошим INP

FAQ

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

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

E-E-A-T для електронної комерції у 2026 році: Досвід, Експертиза, Авторитетність, Довіра

Ми поважаємо вашу конфіденційність

Ми поважаємо вашу конфіденційність

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

Що вимірює INP

Крок 1: Профілюйте, не гадайте

Поширені запитання

Схоже для читання

Крок 2: Відкладіть некритичний JS

Крок 3: Перетворіть на серверні компоненти

Крок 4: Оптимістичний обмін варіантами

Крок 5: Галерея та мініатюра

Крок 6: Затриманий пошук

Крок 7: Витягніть regex і уникайте spread

Крок 8: Ліниве завантаження нижче згину

Вимірювання успіху

Як Ordiko за замовчуванням постачає PDP з хорошим INP

FAQ

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

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

E-E-A-T для електронної комерції у 2026 році: Досвід, Експертиза, Авторитетність, Довіра