Pourquoi l'INP est-il tellement plus difficile que le LCP ?

Le LCP est principalement un problème de CDN et d'optimisation d'image avec des solutions bien comprises. L'INP est le temps d'exécution JavaScript lors de l'interaction utilisateur ; chaque clic peut avoir un goulot d'étranglement différent. Corriger l'INP nécessite une discipline au niveau des composants sur chaque élément interactif de la page.

Les composants serveur React corrigent-ils automatiquement l'INP ?

En grande partie oui. RSC réduit le bundle JS expédié au navigateur, ce qui réduit le travail sur le fil principal, ce qui améliore l'INP. Mais les parties interactives de la page ont toujours besoin de JS client — RSC à lui seul ne corrigera pas un composant client mal écrit qui crée des regex dans onClick.

Quel est le plus grand tueur d'INP sur les PDPs ?

Le rendu lourd côté client des widgets de recommandation ('Souvent achetés ensemble', 'Vous pourriez aussi aimer') qui expédient 50–200Ko de JS et hydratent agressivement lors de la première interaction. Déplacez-les vers des composants serveur ou chargez-les paresseusement derrière IntersectionObserver.

À quelle vitesse une PDP bien optimisée peut-elle obtenir un INP ?

Un INP p75 dans le monde réel en dessous de 100ms est réalisable. Les PDP Ordiko par défaut à 80–160ms p75 INP sans optimisation manuelle. Les thèmes personnalisés qui suivent les modèles de ce guide peuvent descendre en dessous de 100ms de manière cohérente.

Optimisation de l'INP pour les pages de détails de produits (PDP) en 2026 | Ordiko

Guide

Optimisation de l'INP pour les pages de détails de produits (PDP) en 2026

Un guide ciblé pour corriger l'Interaction jusqu'au Prochain Peinture (INP) sur les PDPs de commerce électronique en 2026, couvrant l'échange de variantes, la galerie, l'ajout au panier et les modèles de composants serveur React qui déplacent systématiquement l'INP en dessous de 200ms.

PT1H30M

TL;DR. L'INP sur le PDP est amélioré en expédiant moins de JavaScript et en rendant les interactions optimistes. Utilisez les React Server Components pour les parties statiques. Utilisez useOptimistic pour l'échange de variantes et l'ajout au panier. Utilisez startTransition pour les mises à jour non urgentes. Débounchez la recherche avec AbortController. Élevez les regex et évitez le spread dans les gestionnaires d'événements. Objectif : < 200ms p75, atteignable < 100ms.

Ce que mesure l'INP

L'Interaction to Next Paint (INP) mesure le temps le plus long entre une interaction et le rendu sur une page pendant la visite de l'utilisateur. Une "interaction" est un clic, un tap ou une pression de touche qui déclenche JavaScript.

L'INP est calculé comme le pire cas (excluant les rares valeurs aberrantes), pas la moyenne. Un clic de filtre lent peut ruiner votre score INP même si 99 autres interactions étaient rapides.

Valeur INP	Verdict
≤ 200ms	Bon
200ms – 500ms	Besoin d'amélioration
> 500ms	Mauvais

FAQ

Pourquoi l'INP est-il tellement plus difficile que le LCP ?: Le LCP est principalement un problème de CDN et d'optimisation d'image avec des solutions bien comprises. L'INP est le temps d'exécution JavaScript lors de l'interaction utilisateur ; chaque clic peut avoir un goulot d'étranglement différent. Corriger l'INP nécessite une discipline au niveau des composants sur chaque élément interactif de la page.
Les composants serveur React corrigent-ils automatiquement l'INP ?: En grande partie oui. RSC réduit le bundle JS expédié au navigateur, ce qui réduit le travail sur le fil principal, ce qui améliore l'INP. Mais les parties interactives de la page ont toujours besoin de JS client — RSC à lui seul ne corrigera pas un composant client mal écrit qui crée des regex dans onClick.
Quel est le plus grand tueur d'INP sur les PDPs ?: Le rendu lourd côté client des widgets de recommandation ('Souvent achetés ensemble', 'Vous pourriez aussi aimer') qui expédient 50–200Ko de JS et hydratent agressivement lors de la première interaction. Déplacez-les vers des composants serveur ou chargez-les paresseusement derrière IntersectionObserver.
À quelle vitesse une PDP bien optimisée peut-elle obtenir un INP ?: Un INP p75 dans le monde réel en dessous de 100ms est réalisable. Les PDP Ordiko par défaut à 80–160ms p75 INP sans optimisation manuelle. Les thèmes personnalisés qui suivent les modèles de ce guide peuvent descendre en dessous de 100ms de manière cohérente.

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

Type de script	Stratégie recommandée
Analytique (GA4, Plausible)	`afterInteractive`
Pixels marketing	`afterInteractive` ou `lazyOnload`
Widget de chat	`lazyOnload` + IntersectionObserver
SDK de test A/B	Blocage en ligne (rare) ou `beforeInteractive`
Moteur de recommandation	Composant serveur ou IO paresseux
Widget d'avis client	Chargement paresseux avec IntersectionObserver

import Script from 'next/script';

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

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

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 créée à chaque clic
  setItems(prev => [...prev, ...newItems]); // spread dans l'accumulateur
}

const TAG_REGEX = /[<>]/;  // élevé à la portée du module

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

Nous respectons votre vie privée

Nous respectons votre vie privée

Optimisation de l'INP pour les pages de détails de produits (PDP) en 2026

Ce que mesure l'INP

FAQ

Étape 1 : Profilage, ne devinez pas

Étape 2 : Différer le JS non critique

Étape 3 : Convertir en composants serveur

Étape 4 : Échange de variante optimiste

Étape 5 : Galerie et miniature

Étape 6 : Recherche débouncée

Étape 7 : Élever les regex et éviter le spread

Étape 8 : Chargement paresseux en dessous de la ligne de flottaison

Mesurer le succès

Comment Ordiko expédie des PDP avec un INP bon par défaut

FAQ

Stratégie SEO de Page de Catégorie et Canonique pour Ecommerce (2026)

Core Web Vitals pour le commerce électronique 2026 : corrections LCP, INP, CLS

E-E-A-T pour les magasins de commerce électronique en 2026 : Expérience, Expertise, Autorité, Fiabilité

Nous respectons votre vie privée

Nous respectons votre vie privée

Optimisation de l'INP pour les pages de détails de produits (PDP) en 2026

Ce que mesure l'INP

FAQ

Lectures associées

Étape 1 : Profilage, ne devinez pas

Étape 2 : Différer le JS non critique

Étape 3 : Convertir en composants serveur

Étape 4 : Échange de variante optimiste

Étape 5 : Galerie et miniature

Étape 6 : Recherche débouncée

Étape 7 : Élever les regex et éviter le spread

Étape 8 : Chargement paresseux en dessous de la ligne de flottaison

Mesurer le succès

Comment Ordiko expédie des PDP avec un INP bon par défaut

FAQ

Stratégie SEO de Page de Catégorie et Canonique pour Ecommerce (2026)

Core Web Vitals pour le commerce électronique 2026 : corrections LCP, INP, CLS

E-E-A-T pour les magasins de commerce électronique en 2026 : Expérience, Expertise, Autorité, Fiabilité