Perché l'INP è così molto più difficile dell'LCP?

LCP è principalmente un problema di CDN e ottimizzazione delle immagini con soluzioni ben comprese. L'INP è il tempo di esecuzione di JavaScript sull'interazione dell'utente; ogni clic può avere un collo di bottiglia diverso. Risolvere l'INP richiede disciplina a livello di componente su ogni elemento interattivo nella pagina.

I Componenti Server React risolvono automaticamente l'INP?

In gran parte sì. RSC riduce il pacchetto JS spedito al browser, il che riduce il lavoro sul thread principale, migliorando l'INP. Ma le parti interattive della pagina hanno ancora bisogno di JS client — solo RSC non risolverà un componente client mal scritto che crea regex in onClick.

Qual è il più grande killer di INP sulle PDP?

Il pesante rendering lato client dei widget di raccomandazione ('Spesso acquistati insieme', 'Potresti anche apprezzare') che spediscono 50–200KB di JS e idratano aggressivamente alla prima interazione. Sposta questi in Componenti Server o caricali in modo lazy dietro IntersectionObserver.

Quanto può essere veloce una PDP ben ottimizzata su INP?

Un INP p75 nel mondo reale sotto i 100ms è raggiungibile. Le PDP Ordiko di default hanno un INP p75 di 80–160ms senza ottimizzazione manuale. Temi personalizzati che seguono i modelli in questa guida possono scendere sotto i 100ms costantemente.

Ottimizzazione INP per le Pagine di Dettaglio Prodotto (PDP) nel 2026 | Ordiko

Guida

Ottimizzazione INP per le Pagine di Dettaglio Prodotto (PDP) nel 2026

Una guida mirata per risolvere l'Interaction to Next Paint (INP) sulle PDP ecommerce nel 2026, coprendo il cambio di variante, la galleria, l'aggiunta al carrello e i modelli dei Componenti Server React che spostano costantemente l'INP sotto i 200ms.

PT1H30M

TL;DR. L'INP sulla PDP è migliorato riducendo il JavaScript e rendendo le interazioni ottimistiche. Usa i React Server Components per le parti statiche. Usa useOptimistic per il cambio di variante e l'aggiunta al carrello. Usa startTransition per aggiornamenti non urgenti. Debounce la ricerca con AbortController. Solleva le regex ed evita lo spread nei gestori di eventi. Obiettivo: < 200ms p75, raggiungibile < 100ms.

Cosa misura l'INP

L'Interaction to Next Paint (INP) misura il tempo di interazione al prossimo paint più lungo su una pagina durante la visita dell'utente. Un'"interazione" è un clic, un tocco o una pressione di tasto che attiva JavaScript.

L'INP è calcolato come il peggiore caso (escludendo rari outlier), non la media. Un clic lento su un filtro può rovinare il tuo punteggio INP anche se 99 altre interazioni sono state veloci.

Valore INP	Giudizio
≤ 200ms	Buono
200ms – 500ms	Necessita miglioramenti
> 500ms	Scarso

Domande frequenti

Perché l'INP è così molto più difficile dell'LCP?: LCP è principalmente un problema di CDN e ottimizzazione delle immagini con soluzioni ben comprese. L'INP è il tempo di esecuzione di JavaScript sull'interazione dell'utente; ogni clic può avere un collo di bottiglia diverso. Risolvere l'INP richiede disciplina a livello di componente su ogni elemento interattivo nella pagina.
I Componenti Server React risolvono automaticamente l'INP?: In gran parte sì. RSC riduce il pacchetto JS spedito al browser, il che riduce il lavoro sul thread principale, migliorando l'INP. Ma le parti interattive della pagina hanno ancora bisogno di JS client — solo RSC non risolverà un componente client mal scritto che crea regex in onClick.
Qual è il più grande killer di INP sulle PDP?: Il pesante rendering lato client dei widget di raccomandazione ('Spesso acquistati insieme', 'Potresti anche apprezzare') che spediscono 50–200KB di JS e idratano aggressivamente alla prima interazione. Sposta questi in Componenti Server o caricali in modo lazy dietro IntersectionObserver.
Quanto può essere veloce una PDP ben ottimizzata su INP?: Un INP p75 nel mondo reale sotto i 100ms è raggiungibile. Le PDP Ordiko di default hanno un INP p75 di 80–160ms senza ottimizzazione manuale. Temi personalizzati che seguono i modelli in questa guida possono scendere sotto i 100ms costantemente.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 200) {
      console.log('Long frame:', entry);
    }
  }
});
observer.observe({ type: 'long-animation-frame', buffered: true });

Tipo di script	Strategia raccomandata
Analytics (GA4, Plausible)	`afterInteractive`
Pixel di marketing	`afterInteractive` o `lazyOnload`
Widget di chat	`lazyOnload` + IntersectionObserver
SDK di test A/B	Inline blocking (raro) o `beforeInteractive`
Motore di raccomandazione	Server Component o lazy IO
Widget di recensioni	Caricamento lazy con IntersectionObserver

import Script from 'next/script';

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

// PDPPage (Server Component)
import { ProductGallery } from './product-gallery';      // Server
import { ProductInfo } from './product-info';            // Server
import { AddToCartButton } from './add-to-cart-button';  // Client (interattivo)
import { VariantSelector } from './variant-selector';    // Client (interattivo)
import { RelatedProducts } from './related-products';    // Server
import { ReviewSummary } from './review-summary';        // Server

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 creata ad ogni clic
  setItems(prev => [...prev, ...newItems]); // spread nell'accumulatore
}

const TAG_REGEX = /[<>]/;  // sollevata allo scope del modulo

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 />,
});

Rispettiamo la tua privacy

Rispettiamo la tua privacy

Ottimizzazione INP per le Pagine di Dettaglio Prodotto (PDP) nel 2026

Cosa misura l'INP

Domande frequenti

Passo 1: Profilare, non indovinare

Passo 2: Differire il JS non critico

Passo 3: Convertire in Server Components

Passo 4: Cambio di variante ottimistico

Passo 5: Galleria e miniatura

Passo 6: Ricerca debounce

Passo 7: Sollevare regex ed evitare lo spread

Passo 8: Caricamento lazy sotto il fold

Misurare il successo

Come Ordiko spedisce PDP buone per INP per default

FAQ

Strategia SEO e Canonica per le Pagine di Categoria Ecommerce (2026)

Core Web Vitals per Ecommerce 2026: Correzioni LCP, INP, CLS

E-E-A-T per i negozi di ecommerce nel 2026: Esperienza, Competenza, Autorevolezza, Affidabilità

Rispettiamo la tua privacy

Rispettiamo la tua privacy

Ottimizzazione INP per le Pagine di Dettaglio Prodotto (PDP) nel 2026

Cosa misura l'INP

Domande frequenti

Letture correlate

Passo 1: Profilare, non indovinare

Passo 2: Differire il JS non critico

Passo 3: Convertire in Server Components

Passo 4: Cambio di variante ottimistico

Passo 5: Galleria e miniatura

Passo 6: Ricerca debounce

Passo 7: Sollevare regex ed evitare lo spread

Passo 8: Caricamento lazy sotto il fold

Misurare il successo

Come Ordiko spedisce PDP buone per INP per default

FAQ

Strategia SEO e Canonica per le Pagine di Categoria Ecommerce (2026)

Core Web Vitals per Ecommerce 2026: Correzioni LCP, INP, CLS

E-E-A-T per i negozi di ecommerce nel 2026: Esperienza, Competenza, Autorevolezza, Affidabilità