Comment optimiser un site e-commerce pour mobile ?

Le problème

• 58% du trafic vient du mobile
• Mais le taux de conversion mobile est 64% plus bas que desktop

L’optimisation mobile est donc cruciale.

Checklist complète

1. Vitesse de chargement

Objectif	Impact
< 2 secondes	Idéal
< 3 secondes	Acceptable
> 3 secondes	53% d’abandon

Actions :

• Compresser les images (WebP)
• Lazy loading
• Minifier CSS/JS
• Utiliser un CDN
• Cache navigateur

2. Navigation

Élément	Recommandation
Menu	En bas de l’écran (thumb zone)
Recherche	Visible, facilement accessible
Filtres	Bouton flottant ou sticky
Retour	Geste ou bouton visible

3. Boutons et zones cliquables

• Taille minimum : 44x44 pixels (48x48 idéal)
• Espacement : 8px minimum entre éléments
• CTA principal : Dans la thumb zone

4. Formulaires

Optimisation	Bénéfice
Clavier adapté	type="email", type="tel"
Autocomplétion	Moins de saisie
Champs minimaux	Moins d’abandon
Validation temps réel	Corrections immédiates

5. Images et médias

• Format WebP ou JPEG optimisé
• Srcset pour différentes tailles
• Lazy loading pour images sous le fold
• Vidéos : pas d’autoplay ou léger

6. Checkout mobile

• Guest checkout par défaut
• Apple Pay / Google Pay
• Formulaire sur une colonne
• Clavier numérique pour CB/téléphone
• Barre de progression visible

Éléments spécifiques mobile

Navigation bottom bar

┌─────────────────────────────────────┐
│                                     │
│         [Contenu page]              │
│                                     │
├─────────────────────────────────────┤
│  🏠    🔍    ❤️    🛒    👤        │
│ Home  Recherche  Favoris  Panier  Compte
└─────────────────────────────────────┘

Toujours accessible, dans la thumb zone.

CTA sticky

┌─────────────────────────────────────┐
│         [Page produit]              │
│                                     │
├─────────────────────────────────────┤
│  89€         [AJOUTER AU PANIER]    │
└─────────────────────────────────────┘

Visible sans scroll.

Filtres mobile

┌─────────────────────────────────────┐
│  [Trier ▼]  [Filtrer ▼]  [Prix ▼]  │
└─────────────────────────────────────┘
         ↓ Ouvre un drawer
┌─────────────────────────────────────┐
│  FILTRES              [X] Fermer    │
│                                     │
│  Taille                             │
│  [S] [M] [L] [XL]                   │
│                                     │
│  Couleur                            │
│  [●] [●] [●] [●]                    │
│                                     │
│  [Appliquer (24 résultats)]         │
└─────────────────────────────────────┘

Test de votre site mobile

Outils gratuits

Outil	Ce qu’il mesure
Google PageSpeed Insights	Performance, accessibilité
Google Mobile-Friendly Test	Compatibilité mobile
Chrome DevTools	Simulation devices
GTmetrix	Temps de chargement

Test réel

1. Testez sur vrais appareils (pas juste émulateur)
2. Testez sur différentes tailles (iPhone SE, iPhone Pro Max)
3. Testez avec connexion lente (3G)
4. Demandez à des utilisateurs réels de compléter un achat

Erreurs courantes

1. Menu hamburger en haut : Hors de la thumb zone
2. Pop-ups plein écran : Bloqués par Google, irritants
3. Texte trop petit : < 16px illisible
4. Liens trop proches : Clics accidentels
5. Pas de recherche visible : Navigation difficile
6. Formulaires desktop : Pas adaptés au tactile

Métriques à suivre

Métrique	Cible mobile
Temps de chargement	< 3s
Taux de rebond	< 50%
Taux de conversion	> 1% (améliorer !)
Ajout au panier	> 5%
Complétion checkout	> 30% des paniers

Actions prioritaires

Cette semaine

1. Tester vitesse (PageSpeed Insights)
2. Vérifier taille des boutons
3. Activer paiement mobile (Apple Pay/Google Pay)

Ce mois

4. Implémenter navigation bottom bar
5. Optimiser les images
6. Simplifier le checkout