¿Por qué es el INP mucho más difícil que el LCP?

El LCP es principalmente un problema de CDN y optimización de imágenes con soluciones bien entendidas. El INP es el tiempo de ejecución de JavaScript en la interacción del usuario; cada clic puede tener un cuello de botella diferente. Solucionar el INP requiere disciplina a nivel de componente en cada elemento interactivo de la página.

¿Los Componentes del Servidor de React solucionan automáticamente el INP?

En gran medida sí. RSC reduce el paquete de JS enviado al navegador, lo que reduce el trabajo en el hilo principal, lo que mejora el INP. Pero las partes interactivas de la página aún necesitan JS del cliente; RSC por sí solo no solucionará un componente del cliente mal escrito que crea regex en onClick.

¿Cuál es el mayor asesino de INP en PDPs?

La pesada renderización del lado del cliente de widgets de recomendación ('Frecuentemente comprados juntos', 'También te podría gustar') que envían de 50 a 200KB de JS y se hidratan agresivamente en la primera interacción. Mueve estos a Componentes del Servidor o carga perezosamente detrás de IntersectionObserver.

¿Qué tan rápido puede llegar un PDP bien optimizado en INP?

Un INP p75 del mundo real por debajo de 100ms es alcanzable. Los PDPs de Ordiko tienen un INP p75 predeterminado de 80–160ms sin optimización manual. Los temas personalizados que siguen los patrones de esta guía pueden llegar a estar por debajo de 100ms de manera consistente.

Optimización de INP para Páginas de Detalle de Producto (PDP) en 2026 | Ordiko

Guía

Optimización de INP para Páginas de Detalle de Producto (PDP) en 2026

Una guía enfocada para solucionar la Interacción hasta el Siguiente Pintado (INP) en PDPs de comercio electrónico en 2026, cubriendo el intercambio de variantes, galería, añadir al carrito y los patrones de Componentes del Servidor de React que consistentemente mueven el INP por debajo de 200ms.

PT1H30M

TL;DR. INP en PDP se soluciona enviando menos JavaScript y haciendo que las interacciones sean optimistas. Usa React Server Components para partes estáticas. Usa useOptimistic para el cambio de variante y añadir al carrito. Usa startTransition para actualizaciones no urgentes. Debounce la búsqueda con AbortController. Eleva expresiones regulares y evita el spread en los controladores de eventos. Objetivo: < 200ms p75, alcanzable < 100ms.

Qué mide INP

La Interacción hasta el Siguiente Pintado (INP) mide el tiempo más largo de interacción a pintado en una página durante la visita del usuario. Una "interacción" es un clic, toque o pulsación de tecla que activa JavaScript.

INP se calcula como el peor caso (excluyendo raros valores atípicos), no el promedio. Un clic lento en un filtro puede arruinar tu puntuación INP incluso si 99 otras interacciones fueron rápidas.

Valor de INP	Veredicto
≤ 200ms	Bueno
200ms – 500ms	Necesita mejora
> 500ms	Pobre

Preguntas frecuentes

¿Por qué es el INP mucho más difícil que el LCP?: El LCP es principalmente un problema de CDN y optimización de imágenes con soluciones bien entendidas. El INP es el tiempo de ejecución de JavaScript en la interacción del usuario; cada clic puede tener un cuello de botella diferente. Solucionar el INP requiere disciplina a nivel de componente en cada elemento interactivo de la página.
¿Los Componentes del Servidor de React solucionan automáticamente el INP?: En gran medida sí. RSC reduce el paquete de JS enviado al navegador, lo que reduce el trabajo en el hilo principal, lo que mejora el INP. Pero las partes interactivas de la página aún necesitan JS del cliente; RSC por sí solo no solucionará un componente del cliente mal escrito que crea regex en onClick.
¿Cuál es el mayor asesino de INP en PDPs?: La pesada renderización del lado del cliente de widgets de recomendación ('Frecuentemente comprados juntos', 'También te podría gustar') que envían de 50 a 200KB de JS y se hidratan agresivamente en la primera interacción. Mueve estos a Componentes del Servidor o carga perezosamente detrás de IntersectionObserver.
¿Qué tan rápido puede llegar un PDP bien optimizado en INP?: Un INP p75 del mundo real por debajo de 100ms es alcanzable. Los PDPs de Ordiko tienen un INP p75 predeterminado de 80–160ms sin optimización manual. Los temas personalizados que siguen los patrones de esta guía pueden llegar a estar por debajo de 100ms de manera consistente.

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

Tipo de script	Estrategia recomendada
Analítica (GA4, Plausible)	`afterInteractive`
Píxeles de marketing	`afterInteractive` o `lazyOnload`
Widget de chat	`lazyOnload` + IntersectionObserver
SDK de prueba A/B	Bloqueo en línea (raro) o `beforeInteractive`
Motor de recomendaciones	Componente del servidor o IO perezoso
Widget de reseñas de clientes	Carga perezosa con IntersectionObserver

import Script from 'next/script';

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

// PDPPage (Componente del Servidor)
import { ProductGallery } from './product-gallery';      // Servidor
import { ProductInfo } from './product-info';            // Servidor
import { AddToCartButton } from './add-to-cart-button';  // Cliente (interactivo)
import { VariantSelector } from './variant-selector';    // Cliente (interactivo)
import { RelatedProducts } from './related-products';    // Servidor
import { ReviewSummary } from './review-summary';        // Servidor

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 creado en cada clic
  setItems(prev => [...prev, ...newItems]); // spread en el acumulador
}

const TAG_REGEX = /[<>]/;  // elevado al ámbito del módulo

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

Valoramos tu privacidad

Valoramos tu privacidad

Optimización de INP para Páginas de Detalle de Producto (PDP) en 2026

Qué mide INP

Preguntas frecuentes

Paso 1: Perfila, no adivines

Paso 2: Aplaza el JS no crítico

Paso 3: Convierte a Componentes del Servidor

Paso 4: Cambio de variante optimista

Paso 5: Galería y miniatura

Paso 6: Búsqueda con debounce

Paso 7: Eleva expresiones regulares y evita el spread

Paso 8: Carga perezosa debajo del pliegue

Midiendo el éxito

Cómo Ordiko envía PDPs buenos en INP por defecto

FAQ

Estrategia de SEO y Canonical para Páginas de Categoría en Ecommerce (2026)

Core Web Vitals para Ecommerce 2026: Soluciones para LCP, INP, CLS

E-E-A-T para Tiendas de Ecommerce en 2026: Experiencia, Experiencia, Autoridad, Confiabilidad

Valoramos tu privacidad

Valoramos tu privacidad

Optimización de INP para Páginas de Detalle de Producto (PDP) en 2026

Qué mide INP

Preguntas frecuentes

Lecturas relacionadas

Paso 1: Perfila, no adivines

Paso 2: Aplaza el JS no crítico

Paso 3: Convierte a Componentes del Servidor

Paso 4: Cambio de variante optimista

Paso 5: Galería y miniatura

Paso 6: Búsqueda con debounce

Paso 7: Eleva expresiones regulares y evita el spread

Paso 8: Carga perezosa debajo del pliegue

Midiendo el éxito

Cómo Ordiko envía PDPs buenos en INP por defecto

FAQ

Estrategia de SEO y Canonical para Páginas de Categoría en Ecommerce (2026)

Core Web Vitals para Ecommerce 2026: Soluciones para LCP, INP, CLS

E-E-A-T para Tiendas de Ecommerce en 2026: Experiencia, Experiencia, Autoridad, Confiabilidad