**TL;DR.** De grands PDP optimisent trois choses : (1) la vitesse (LCP < 1,8 s, INP < 200 ms), (2) la clarté (galerie, variante, bouton d'achat), et (3) la confiance (avis, politique de retour, expédition, preuve sociale). Chaque élément a un impact mesurable sur la conversion. Empilez-les délibérément.
## L'entonnoir PDP
Entonnoir e-commerce typique (références sectorielles 2025–2026) :
| Étape | Conversion médiane | Quartile supérieur |
| ------------------------------------- | ----------------- | ---------------- |
| Vue PDP → ajout au panier | 8–15% | 20–30% |
| Ajout au panier → passage à la caisse | 50–65% | 70–80% |
| Passage à la caisse → achat | 50–70% | 75–90% |
| **Vue PDP globale → achat** | **2–4%** | **8–15%** |
Les magasins qui passent de la médiane au quartile supérieur à chaque étape doublent ou triplent le revenu par session.
## Vitesse
Couvrant en détail dans le [guide Core Web Vitals](/guides/core-web-vitals-ecommerce-2026). Seuils clés pour le PDP :
- LCP ≤ 1,8 s (cible), ≤ 2,5 s (bon).
- INP ≤ 150 ms (cible), ≤ 200 ms (bon).
- CLS < 0,05 (cible), ≤ 0,1 (bon).
Une seconde d'amélioration du LCP sur le PDP entraîne généralement une augmentation de la conversion de 5 à 15 %.
## Galerie et image principale
La première image du produit est votre LCP. Modèles :
| Élément | Meilleure pratique |
| ------------------ | ------------------------------------------------------------------- |
| Taille de l'image principale | 800×800px à 1200×1200px sur desktop ; largeur de la fenêtre complète sur mobile |
| Format | AVIF (avec fallback WebP/JPEG) |
| Préchargement LCP | Oui, `
```
**Taille** : utilisez des boutons avec l'étiquette de taille.
```html
S
M
L
XL (Rupture de stock — prévenez-moi)
```
Règles :
- Utilisez `aria-pressed` pour l'état sélectionné.
- Désactivez visuellement les variantes en rupture de stock ; proposez "Prévenez-moi quand disponible."
- Mettez à jour l'URL pour inclure la variante sélectionnée pour le partage (`?variant=size-m`).
- UI optimiste pour le changement de variante (couvrant dans le [guide INP](/guides/inp-optimization-product-pages)).
## Ajouter au panier
Le CTA principal. Meilleures pratiques :
| Élément | Modèle |
| ---------------------- | ---------------------------------------------------------------------- |
| Texte du bouton | "Ajouter au panier" ou "Ajouter au sac" (vocabulaire de votre marque) |
| Couleur | Primaire de la marque ; contraste élevé avec l'arrière-plan de la page |
| Taille | Pleine largeur sur mobile ; cible tactile minimum de 48×48px |
| Collant sur mobile | Oui, ancré en bas lors du défilement au-delà du premier repli |
| État de chargement | Spinner dans le bouton pendant que le serveur confirme ; ne jamais bloquer la page |
| Modèle de confirmation | Mini-panier glissant ou toast ; pas d'interruption de page |
| Urgence de stock | "Il ne reste que 3" si vrai ; ne jamais mentir |
| Prix près du bouton | Oui, grand et clair |
Anti-modèles :
- Plusieurs CTAs principaux ("Ajouter au panier" + "Acheter maintenant" + "Achat rapide") — divise l'attention.
- Interruption modale après ajout au panier ("Continuer vos achats ou passer à la caisse ?") — ajoute une étape.
- Prix caché (forcer le défilement vers le haut pour voir).
## Signaux de confiance
Le groupe de signaux près du bouton d'achat :
1. **Seuil de livraison gratuite** : "Livraison gratuite à partir de 50 $" — augmente la taille du panier.
2. **Résumé de la politique de retour** : "Retours gratuits sous 30 jours" — réduit le frottement à l'achat.
3. **Livraison estimée** : "Arrive mercredi 15 mai" — des dates concrètes battent les plages.
4. **Badges de sécurité** : Indicateur de "Paiement sécurisé" style Stripe — mineur mais cumulatif.
5. **Étoiles d'avis agrégées + nombre** : "4,7 ★ d'après 218 avis" — signal de confiance principal.
## Preuve sociale
Modèles de preuve sociale efficaces :
- **Extraits d'avis vérifiés** : 2 à 3 avis au-dessus de la ligne de flottaison avec note étoilée, auteur, date.
- **Nombre d'avis** : un grand nombre (218 avis) est plus convaincant que de simples étoiles.
- **"X personnes ont vu ceci aujourd'hui"** : rareté à faible pression. Utilisez des données réelles, pas aléatoires.
- **Notifications d'achats récents** : pop-up montrant "Sarah de Londres a acheté ceci il y a 3 heures." Réel, opt-in pour l'acheteur. Fréquence : toutes les 30 à 60 secondes, maximum.
- **Photos générées par les utilisateurs** : grille de style Instagram de clients portant/utilisant le produit.
À éviter :
- Avis faux.
- Urgence de stock fausse ("Il n'en reste qu'un !" quand il y en a 200).
- Minuteries de compte à rebours agressives ("L'offre se termine dans 3:21 !").
Ces pratiques sont contre-productives — les acheteurs modernes les reconnaissent et la confiance diminue.
## Fréquemment achetés ensemble
Un véritable levier de conversion. Modèle :
```
Ce produit : Sac messager en cuir marron 149 $
+ Ceinture à boucle en laiton 89 $
+ Porte-cartes en cuir 49 $
─────────────────────────────────────────────────────
Total du lot : 287 $
[ Ajouter le lot au panier → 258 $ ] (économise 29 $)
```
Mise en œuvre :
- Précalculer les paires "fréquemment achetées ensemble" à partir de la co-occurrence des articles de commande + similarité cosinus sur `descriptionEmbedding`.
- Réels `` tags pointant vers les produits recommandés (crawlabes pour le SEO).
- Ajout de lot en un clic.
## Produits similaires
En dessous de fréquemment achetés ensemble. Utilisez :
- pgvector cosinus sur `descriptionEmbedding` pour trouver des similaires dans la même catégorie.
- Optionnellement filtrer par gamme de prix.
- Réels ` ` tags avec `rel="related"`.
## Spécifications et description
Le contenu long est bon pour le SEO et pour les achats à forte considération. Structure :
```markdown
## Description
[Texte marketing complet — 2-4 paragraphes]
## Spécifications
| Matériau | Cuir pleine fleur |
| Dimensions | 33 cm × 28 cm × 10 cm |
| Poids | 0,8 kg |
| Quincaillerie | Laiton massif |
| Origine | Fabriqué en Italie |
## Contenu de la boîte
- Sac
- Bandoulière amovible
- Sac de protection
- Guide d'entretien
## Entretien
[Instructions d'entretien]
```
Ce contenu va également dans le champ JSON-LD `description` du produit, améliorant la profondeur des résultats enrichis.
## Section des avis
En dessous de la section des spécifications. Meilleures pratiques :
- Afficher la moyenne de tous les temps + le nombre de manière proéminente.
- Histogramme de distribution (5 étoiles : 67 %, 4 étoiles : 22 %, 3 étoiles : 8 %, 2 étoiles : 2 %, 1 étoile : 1 %).
- Trier et filtrer (les plus récents, les plus utiles, par étoile).
- Pagination ou défilement infini (chargement paresseux).
- Répondre aux avis lorsque pertinent.
- Badge d'achat vérifié.
## Comment le PDP par défaut d'Ordiko est construit
- Rendu côté serveur avec React Server Components.
- Image principale LCP préchargée avec `priority` et `fetchPriority="high"`.
- Sélecteur de variante avec `useOptimistic` pour un retour instantané.
- Ajout au panier mobile collant lors du défilement au-delà du premier repli.
- Confirmation de mini-panier glissant (pas d'interruption de page).
- Signaux de confiance (livraison gratuite, retours, paiement sécurisé) rendus côté serveur.
- Résumé des avis vérifiés et liste des avis (top 5 en JSON-LD).
- Fréquemment achetés ensemble via similarité cosinus pgvector.
- Produits similaires dans la même catégorie, liens crawlables.
- Description complète + spécifications + avis en dessous de la ligne de flottaison.
INP par défaut < 200 ms p75 avec cette configuration.
## FAQ
**Quelle est l'optimisation PDP la plus sous-estimée ?**
Un bouton d'ajout au panier mobile collant qui reste visible pendant le défilement. Sur de longs PDP (ce qu'ils devraient être pour le SEO), les utilisateurs défilant les avis ou les spécifications ont besoin d'une seule touche pour acheter. Les magasins qui ajoutent un CTA collant voient généralement une augmentation de 10 à 20 % de la conversion mobile.
**Dois-je cacher les variantes en rupture de stock ?**
Non. Montrez-les visuellement désactivées mais toujours présentes. Les cacher crée une UX incohérente et signale que les clients revenant ne peuvent pas trouver un produit qu'ils ont acheté auparavant. Désactiver + 'Prévenez-moi quand disponible' convertit les clients en abonnés par e-mail.
**Combien de preuve sociale est trop ?**
Une notification pop-up d'achats récents toutes les 30 à 60 secondes semble utile. Toutes les 5 secondes semble manipulatif. Un 'X personnes ont vu ceci au cours des dernières 24 heures' est acceptable. Une preuve sociale excessive est la principale cause de l'érosion de la confiance.
**Comment Ordiko aborde-t-il l'UX PDP ?**
Le PDP par défaut d'Ordiko inclut un CTA mobile collant, une image principale préchargée LCP, des échantillons de couleur/taille avec UI optimiste, un résumé d'avis vérifiés, fréquemment achetés ensemble (pgvector cosinus sur les embeddings de description), et un fil d'Ariane + JSON-LD par défaut. INP < 200 ms p75 avec le thème par défaut.