# Optimisation e-commerce mobile : Core Web Vitals, paiement et les correctifs précis qui font progresser la conversion

> 70 à 85 % du trafic e-commerce est mobile. Les dix domaines précis (Web Vitals, zones tactiles, remplissage automatique, Apple Pay, zone du pouce) qui comblent l'écart de conversion entre mobile et ordinateur, avec de vrais outils et repères.

Ryan Badger - 1 mai 2025 - 8 min de lecture

## Pourquoi le mobile, c'est toute la partie

70 à 80 % de votre trafic e-commerce vient du mobile. Pour la plupart des catégories grand public, on approche les 85 %. La conversion sur ordinateur est en général 2 à 3 fois supérieure à celle du mobile, ce qui dit moins que l'ordinateur est meilleur que le mobile est défaillant sur la plupart des boutiques.

Une expérience mobile bien optimisée peut combler l'écart, et souvent l'inverser : certaines marques DTC convertissent désormais sur mobile autant ou plus que sur ordinateur. La différence est précise, mesurable, et relève surtout de l'hygiène, pas de l'innovation.

Cet article couvre ce qui fait vraiment progresser la conversion mobile, avec des repères, des outils et des points précis à corriger. Pas du « concevez d'abord pour le mobile ». Les vérifications précises qui produisent un gain cumulé.

## 1. Les Core Web Vitals et pourquoi Google les surveille

Google utilise les Core Web Vitals comme signal de classement et comme indicateur de la qualité de l'expérience. Au-delà de l'angle SEO, ces métriques sont de solides prédicteurs de la conversion.

### LCP (Largest Contentful Paint)

Le temps avant l'affichage du plus grand élément visible sans défilement (souvent une image d'en-tête ou le H1). Objectif : moins de 2,5 secondes sur mobile en 4G.

Causes les plus courantes d'un mauvais LCP :

- Image d'en-tête non compressée ou trop grande
- Chargement d'une police web qui bloque l'affichage
- Injection de scripts tiers (widgets de chat, statistiques, outils de test A/B) dans le `<head>`

### INP (Interaction to Next Paint)

Le temps entre une interaction de l'utilisateur (un toucher) et la mise à jour visuelle suivante. Objectif : moins de 200 ms.

Causes les plus courantes d'un mauvais INP :

- Pages lourdes en JavaScript (boutiques React/Vue sans découpage du code)
- Scripts de statistiques ou de chat qui se déclenchent de façon synchrone à l'interaction
- Délai de toucher sur les anciens navigateurs mobiles

### CLS (Cumulative Layout Shift)

Les éléments qui sautent dans la page pendant son chargement. Objectif : moins de 0,1.

Causes les plus courantes :

- Images sans attributs de largeur/hauteur
- Publicités ou embeds tiers qui se chargent après le contenu
- Polices qui se chargent et modifient la taille du texte

### Comment vérifier

Gratuit : [PageSpeed Insights](https://pagespeed.web.dev/) lance Lighthouse et rapporte les trois. Testez votre fiche produit la plus rentable, pas votre page d'accueil. Corrigez ce qui est rouge, acceptez ce qui est orange, passez à la suite.

Payant / plus poussé : WebPageTest.org pour l'analyse en cascade, l'onglet Performance de Chrome DevTools pour le profilage en local.

## 2. Une vitesse mobile sous les 3 secondes (du vrai mobile, pas un ordinateur bridé)

L'« émulateur mobile » d'un navigateur de bureau utilise une connexion rapide et un processeur rapide. Les vrais téléphones ont des connexions et des processeurs plus lents. L'écart est considérable.

Testez sur de vrais téléphones en 4G. Si votre page prend 2 secondes dans l'émulateur mobile de Chrome, elle en prend probablement 4 à 5 sur un Android de milieu de gamme en 4G.

### Les plus gros gains de vitesse (dans l'ordre)

1. **Optimisation des images :** compressez à 80 % de qualité, redimensionnez aux dimensions réellement nécessaires, servez du WebP ou de l'AVIF. Shoprocket le fait automatiquement via Cloudflare
2. **Chargez en différé le contenu sous la ligne de flottaison.** Images, iframes et scripts lourds ne doivent pas se charger avant que l'on y fasse défiler la page
3. **Différez le JavaScript non critique.** Statistiques, widgets de chat, outils de test A/B ne doivent pas bloquer l'affichage
4. **Mettez en cache les ressources statiques de façon agressive.** Un an de cache sur les images, polices, CSS, JS avec des URL à empreinte
5. **Utilisez un CDN** (Cloudflare, Fastly, ou celui intégré à votre plateforme). Il sert les ressources depuis des points proches géographiquement
6. **Réduisez les scripts tiers.** Chaque pixel et chaque balise ajoute environ 50 à 200 ms ; passez en revue ce qui est vraiment nécessaire

## 3. La taille des zones tactiles

Les Human Interface Guidelines d'Apple fixent des zones tactiles d'au moins 44×44 pixels. Google Material préconise 48×48. La plupart des versions « mobiles » des thèmes n'atteignent ni l'un ni l'autre.

**Correctifs :**

- Des boutons d'au moins 44 px de haut avec 8 à 12 px de marge intérieure
- Des liens de navigation d'au moins 44 px de haut
- Des champs de formulaire d'au moins 44 px de haut (cela aide aussi l'accessibilité)
- Un espacement d'au moins 8 px entre zones tactiles voisines

Test : ouvrez votre boutique sur un téléphone. Essayez de toucher la navigation par catégories avec votre pouce. Vous trompez-vous de cible ? C'est un problème de zones tactiles.

## 4. Les spécificités du paiement mobile

Le panier et le paiement sur mobile sont l'endroit où la conversion saigne le plus. Liste de choses à faire précises :

### Des formulaires sur une seule colonne

Les formulaires à deux colonnes marchent sur ordinateur, échouent sur mobile. Empilez chaque champ verticalement. Sans exception.

### Des types de champs adaptés

- Champ e-mail : `type="email"` (affiche le clavier e-mail avec le symbole @)
- Téléphone : `type="tel"` (clavier numérique)
- Code postal : `type="text" inputmode="numeric"` pour les pays à codes postaux numériques
- Numéro de carte bancaire : `type="text" inputmode="numeric" autocomplete="cc-number"` (fait fonctionner le remplissage automatique)

La plupart des plateformes font cela correctement de façon native. Cela vaut la peine de vérifier votre formulaire sur un téléphone ; si le mauvais clavier s'affiche, corrigez-le.

### La compatibilité avec le remplissage automatique

Les navigateurs peuvent remplir automatiquement nom, adresse, e-mail, téléphone et coordonnées de carte si les attributs `autocomplete` du formulaire sont corrects. Un client qui touche une suggestion de remplissage automatique termine son paiement en 3 secondes. Sans remplissage automatique, il saisit à la main plus de 12 champs.

Valeurs d'autocomplete standard : `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`.

### Un bouton Ajouter au panier fixe sur les fiches produit

Faites défiler une fiche produit mobile de 3 écrans et le bouton Ajouter au panier est hors de vue. Solution : ajoutez une barre fixe en bas avec le prix et Ajouter au panier, qui apparaît dès que le bouton d'origine sort de l'écran.

### Apple Pay + Google Pay + Link

Ce sont les plus gros gains du paiement mobile. Un paiement en un geste sans saisie ; authentification biométrique native.

- **Apple Pay :** activé automatiquement dès que vous validez votre domaine auprès de Stripe (Shoprocket s'en charge)
- **Google Pay :** similaire
- **Stripe Link :** remplit la carte et l'adresse à partir de l'identité Link valable sur plusieurs sites

Chaque paiement mobile sans ces moyens perd des clients. Activez les trois.

## 5. Réduire les champs du formulaire

Chaque champ de votre paiement mobile est un point de friction. Passez vos champs en revue :

**Généralement nécessaires :**

- E-mail
- Adresse de livraison (nom, rue, ville, code postal, pays)
- Coordonnées de paiement (ou Apple/Google Pay)

**Souvent collectés en trop :**

- Numéro de téléphone (seulement si nécessaire pour la livraison / les transporteurs ; beaucoup n'en ont pas besoin)
- Date de naissance (presque jamais nécessaire à l'achat)
- Nom de l'entreprise (seulement pour le B2B)
- Inscription à la newsletter (pré-cochée là où la loi le permet ; case séparée sinon)
- « Comment nous avez-vous connus ? » (à déplacer dans une enquête après achat)

Moins de champs = paiement plus rapide = meilleure finalisation. Chaque champ supprimé représente à peu près 5 à 10 % d'amélioration de la finalisation du paiement mobile, de façon cumulative.

## 6. Une typographie et une longueur de ligne lisibles sur mobile

- **Texte courant :** 16 px minimum (la valeur par défaut d'iOS et la recommandation Material de Google)
- **Longueur de ligne :** 45 à 75 caractères
- **Interligne :** 1,4 à 1,6 fois la taille de la police
- **Contraste :** WCAG AA au minimum (4,5:1 pour le texte courant, 3:1 pour le grand texte)

Si vos clients pincent l'écran pour zoomer sur votre description de produit, votre texte est trop petit. S'ils doivent tourner le téléphone pour lire, votre ligne est trop longue ou votre police trop serrée.

## 7. Penser à l'usage à une main

La plupart des utilisateurs mobiles tiennent leur téléphone d'une main, le pouce atteignant depuis le bas à droite (ou le bas à gauche pour les gauchers). Les interactions importantes devraient se trouver dans cette zone du pouce.

- L'appel à l'action principal (Ajouter au panier, Paiement, Acheter maintenant) près du bas
- Le menu hamburger en haut à gauche ou en haut à droite, à portée du pouce
- Un bouton « Retour » prévisible (le retour du navigateur vaut généralement mieux qu'un bouton retour personnalisé)

N'exigez pas de double-toucher dans des zones difficiles à atteindre. Chaque moment de gymnastique du pouce fait perdre des clients.

## 8. Une fiche produit pensée pour le mobile

Les fiches produit pour ordinateur montrent souvent tout à la fois (galerie à gauche, détails à droite, description en dessous). Cette disposition ne se transpose pas au mobile ; il faut séquencer le contenu.

Séquence efficace pour une fiche produit mobile :

1. Image principale (galerie à balayer)
2. Titre + prix
3. Sélecteur de variante (taille, couleur)
4. Ajouter au panier (appel à l'action principal)
5. Signaux de confiance (note, livraison gratuite, retours)
6. Description (repliable, coupée après 3 lignes)
7. Caractéristiques / détails (repliables)
8. Résumé des avis avec déploiement « tout voir »
9. Produits associés
10. FAQ (repliable)

Le contenu sous la ligne de flottaison doit être chargé en différé. Un client mobile prend souvent sa décision d'achat dans les 3 premières sections ; tout charger ralentit cette décision.

## 9. Tester sur de vrais appareils

Pas DevTools. Pas l'émulateur mobile du navigateur. De vrais téléphones sur des connexions cellulaires.

Rotation de test minimale :

- iPhone SE (petit écran, appareil plus ancien)
- iPhone 15 Pro (iOS le plus récent, Safari)
- Samsung Galaxy de milieu de gamme (Android, Chrome)
- Un Android plus ancien en 4G (fait ressortir les problèmes de performance)

Bonus : demandez à 3 amis avec des téléphones différents d'essayer d'acheter quelque chose dans votre boutique. Observez-les. Ce qui les fait trébucher, c'est votre liste de corrections.

## 10. Éviter les pièges qui tuent le mobile

Erreurs courantes qui ruinent la conversion mobile :

### Les fenêtres intermédiaires (pop-ups)

Le pop-up « Abonnez-vous pour -10 % ! » qui couvre l'écran dès l'arrivée sur mobile. Google les pénalise dans le classement de la recherche mobile. Les clients tombent dessus et s'en vont. Utilisez plutôt des inscriptions intégrées à la page.

### La vidéo qui démarre seule avec du son

Gaspille de la bande passante, agace les utilisateurs, et iOS la bloque souvent de toute façon. La lecture automatique sans son est acceptable pour une vidéo d'en-tête ; la lecture automatique avec son est hostile à l'utilisateur.

### Les états au survol sur écran tactile

« Survolez pour voir les détails » ne marche pas au toucher. Si votre thème a encore des motifs d'affichage au survol sur mobile, ils sont de fait cassés.

### Les minuscules boutons « fermer » des fenêtres modales

Une croix de 16 pixels dans le coin est impossible à atteindre au pouce. Faites des boutons de fermeture de 44×44 ou utilisez des boutons « Fermer » pleine largeur en bas des fenêtres modales.

### Le défilement horizontal des grilles de produits

Sur mobile, les carrousels de produits à défilement horizontal cachent 80 % des produits sous la ligne de flottaison. Une grille verticale (2 colonnes sur mobile) convertit mieux.

## Ce que Shoprocket gère pour le mobile

L'essentiel de l'indispensable, dès l'installation :

- **Optimisation automatique des images :** redimensionnement + compression + WebP + chargement différé sur chaque image de produit
- **Le panier coulissant (pas un panier en pleine page)** est la valeur par défaut sur mobile
- **Le bouton Ajouter au panier fixe sur mobile** est pris en charge dans les boutiques à thème
- **Un paiement adapté au mobile** avec les bons types de champs, l'autocomplete et l'empilement
- **Apple Pay + Google Pay + Stripe Link** : paiement en un geste via Stripe
- **Un widget de chat en direct adapté au mobile**
- **Diffusion par CDN** via Cloudflare pour chaque ressource
- **Core Web Vitals optimisés d'office** pour la boutique hébergée

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Utilisateurs de l'embed widget : vous contrôlez la vitesse et le design de la page qui l'entoure. Le widget de Shoprocket est chargé en différé et ne bloquera pas l'affichage de votre page, mais la vitesse globale de la page reste à votre charge.

> **Astuce :** une fois par trimestre, lancez PageSpeed Insights sur vos 3 fiches produit les plus rentables, sur mobile. Notez les trois scores Core Web Vitals. Le trimestre suivant, comparez. Une tendance à la baisse est un tueur silencieux de conversion ; repérez-la chaque trimestre plutôt qu'après les dégâts.

## En bref

- **Le mobile représente 70 à 85 % du trafic.** La plupart des boutiques le traitent comme un détail ; pas vous
- **Les Core Web Vitals sont les trois chiffres à suivre :** LCP, INP, CLS. Sous 2,5 s / 200 ms / 0,1
- **Testez sur de vrais appareils en 4G,** pas dans un émulateur de navigateur
- **Spécificités du paiement :** formulaires sur une colonne, bons types de champs, autocomplete, Apple/Google Pay, boutons fixes
- **Moins de champs de formulaire** = meilleure finalisation. Passez en revue ce qui est réellement nécessaire
- **Zones tactiles de 44×44 minimum.** Espacement d'au moins 8 px entre zones
- **La zone du pouce compte.** Appels à l'action principaux près du bas ; menus hamburger en haut à gauche/droite
- **Évitez les tueurs du mobile :** pop-ups, audio automatique, états au survol, minuscules boutons de fermeture

[Démarrez un essai gratuit](https://app-v3.shoprocket.io/signup) et profitez dès le premier jour de l'optimisation automatique des images, d'Apple Pay et d'un paiement pensé pour le mobile. 14 jours, sans carte.

---

- HTML version: https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement
- Language: Français (fr)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)