Por que o INP é muito mais difícil que o LCP?

O LCP é principalmente um problema de CDN e otimização de imagens com correções bem compreendidas. O INP é o tempo de execução do JavaScript na interação do usuário; cada clique pode ter um gargalo diferente. Corrigir o INP requer disciplina em nível de componente em cada elemento interativo na página.

Os Componentes de Servidor React corrigem o INP automaticamente?

Em grande parte sim. O RSC reduz o pacote JS enviado para o navegador, o que reduz o trabalho na thread principal, o que melhora o INP. Mas as partes interativas da página ainda precisam de JS do cliente — o RSC sozinho não corrigirá um componente do cliente mal escrito que cria regex em onClick.

Qual é o maior assassino de INP em PDPs?

Renderização pesada do lado do cliente de widgets de recomendação ('Frequentemente comprados juntos', 'Você também pode gostar') que enviam 50–200KB de JS e hidratam agressivamente na primeira interação. Mova esses para Componentes de Servidor ou carregue-os de forma preguiçosa atrás do IntersectionObserver.

Quão rápido uma PDP bem otimizada pode ficar em INP?

Um INP p75 do mundo real abaixo de 100ms é alcançável. PDPs Ordiko têm um INP p75 padrão de 80–160ms sem otimização manual. Temas personalizados que seguem os padrões deste guia podem ficar abaixo de 100ms consistentemente.

Otimização de INP para Páginas de Detalhes de Produtos (PDP) em 2026 | Ordiko

Guia

Otimização de INP para Páginas de Detalhes de Produtos (PDP) em 2026

Um guia focado para corrigir a Interação até o Próximo Pintar (INP) em PDPs de ecommerce em 2026, cobrindo troca de variantes, galeria, adicionar ao carrinho e os padrões de Componentes de Servidor React que consistentemente mantêm o INP abaixo de 200ms.

PT1H30M

TL;DR. INP no PDP é corrigido ao enviar menos JavaScript e tornar as interações otimistas. Use React Server Components para partes estáticas. Use useOptimistic para troca de variantes e adição ao carrinho. Use startTransition para atualizações não urgentes. Debounce a busca com AbortController. Eleve regex e evite spread em manipuladores de eventos. Meta: < 200ms p75, alcançável < 100ms.

O que o INP mede

Interaction to Next Paint (INP) mede o maior tempo de interação até a pintura em uma página durante a visita do usuário. Uma "interação" é um clique, toque ou pressionamento de tecla que aciona JavaScript.

O INP é calculado como o pior caso (excluindo outliers raros), não a média. Um clique lento em um filtro pode arruinar sua pontuação de INP, mesmo que 99 outras interações tenham sido rápidas.

Valor do INP	Veredicto
≤ 200ms	Bom
200ms – 500ms	Precisa de melhorias
> 500ms	Ruim

Passo 1: Perfil, não adivinhe

Perguntas frequentes

Por que o INP é muito mais difícil que o LCP?: O LCP é principalmente um problema de CDN e otimização de imagens com correções bem compreendidas. O INP é o tempo de execução do JavaScript na interação do usuário; cada clique pode ter um gargalo diferente. Corrigir o INP requer disciplina em nível de componente em cada elemento interativo na página.
Os Componentes de Servidor React corrigem o INP automaticamente?: Em grande parte sim. O RSC reduz o pacote JS enviado para o navegador, o que reduz o trabalho na thread principal, o que melhora o INP. Mas as partes interativas da página ainda precisam de JS do cliente — o RSC sozinho não corrigirá um componente do cliente mal escrito que cria regex em onClick.
Qual é o maior assassino de INP em PDPs?: Renderização pesada do lado do cliente de widgets de recomendação ('Frequentemente comprados juntos', 'Você também pode gostar') que enviam 50–200KB de JS e hidratam agressivamente na primeira interação. Mova esses para Componentes de Servidor ou carregue-os de forma preguiçosa atrás do IntersectionObserver.
Quão rápido uma PDP bem otimizada pode ficar em INP?: Um INP p75 do mundo real abaixo de 100ms é alcançável. PDPs Ordiko têm um INP p75 padrão de 80–160ms sem otimização manual. Temas personalizados que seguem os padrões deste guia podem ficar abaixo de 100ms consistentemente.

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 de script	Estratégia recomendada
Analytics (GA4, Plausible)	`afterInteractive`
Pixels de marketing	`afterInteractive` ou `lazyOnload`
Widget de chat	`lazyOnload` + IntersectionObserver
SDK de teste A/B	Inline blocking (raro) ou `beforeInteractive`
Motor de recomendação	Server Component ou lazy IO
Widget de avaliações de clientes	IntersectionObserver lazy load

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 (interativo)
import { VariantSelector } from './variant-selector';    // Client (interativo)
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 criado em cada clique
  setItems(prev => [...prev, ...newItems]); // spread no acumulador
}

const TAG_REGEX = /[<>]/;  // elevado ao escopo do 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 />,
});

Valorizamos a sua privacidade

Valorizamos a sua privacidade

Otimização de INP para Páginas de Detalhes de Produtos (PDP) em 2026

O que o INP mede

Passo 1: Perfil, não adivinhe

Perguntas frequentes

Passo 2: Adiar JS não crítico

Passo 3: Converter para Server Components

Passo 4: Troca otimista de variantes

Passo 5: Galeria e miniatura

Passo 6: Busca debounced

Passo 7: Elevar regex e evitar spread

Passo 8: Carregar preguiçosamente abaixo da dobra

Medindo o sucesso

Como a Ordiko envia PDPs bons em INP por padrão

FAQ

Estratégia de SEO e Canonical para Páginas de Categoria em Ecommerce (2026)

Métricas Web Essenciais para Ecommerce 2026: Correções de LCP, INP, CLS

E-E-A-T para Lojas de Ecommerce em 2026: Experiência, Especialização, Autoridade, Confiabilidade

Valorizamos a sua privacidade

Valorizamos a sua privacidade

Otimização de INP para Páginas de Detalhes de Produtos (PDP) em 2026

O que o INP mede

Passo 1: Perfil, não adivinhe

Perguntas frequentes

Leituras relacionadas

Passo 2: Adiar JS não crítico

Passo 3: Converter para Server Components

Passo 4: Troca otimista de variantes

Passo 5: Galeria e miniatura

Passo 6: Busca debounced

Passo 7: Elevar regex e evitar spread

Passo 8: Carregar preguiçosamente abaixo da dobra

Medindo o sucesso

Como a Ordiko envia PDPs bons em INP por padrão

FAQ

Estratégia de SEO e Canonical para Páginas de Categoria em Ecommerce (2026)

Métricas Web Essenciais para Ecommerce 2026: Correções de LCP, INP, CLS

E-E-A-T para Lojas de Ecommerce em 2026: Experiência, Especialização, Autoridade, Confiabilidade