Checklist CRO e-commerce : règles 1-5, performance et ergonomie de base

Voici la semaine 1 de la série 194 règles CRO pour e-commerce. Chaque semaine, nous prenons cinq critères de la checklist CRO e-commerce 2026 de Flag Agency, l’agence web PrestaShop de Frattamaggiore (Naples, Italie), et nous vous expliquons comment les vérifier et comment les corriger pour de vrai sur votre boutique.

On commence par la page Général : les règles qui valent pour tout le site, pas pour un seul gabarit. Ce sont les fondations. Si la boutique est lente ou pénible à utiliser au pouce, vous pouvez écrire les plus belles fiches produit du monde : le panier restera vide.

Cette semaine : règles 1 à 5 sur 194.

1. Gardez les Core Web Vitals dans les limites (sur données réelles, pas seulement Lighthouse)

Quoi vérifier. Les trois indicateurs d’expérience de Google, mesurés sur mobile et sur les données réelles des utilisateurs (Search Console → rapport Signaux web essentiels, ou CrUX), pas seulement avec un test de laboratoire :

• LCP ≤ 2,5 secondes — le temps d’affichage de l’élément principal (souvent la grande image ou le titre).
• INP ≤ 200 millisecondes — le temps de réaction de la page quand on touche ou on clique.
• CLS ≤ 0,1 — à quel point le contenu « saute » pendant le chargement.

Cette règle remplace l’ancien critère « la page doit charger en 5 secondes ». Aujourd’hui, ce qui compte c’est ce que voit le visiteur et quand il peut agir.

Pourquoi ça pèse sur les ventes. Celui qui attend s’en va. Et celui qui touche « Ajouter au panier » sans rien voir se passer retouche, s’agace et ferme l’onglet. Le LCP vous fait perdre des visites avant même qu’elles commencent ; l’INP les fait perdre au moment de l’achat.

Comment faire sur PrestaShop.

• Reliez le domaine à Search Console et lisez le rapport Signaux web essentiels en mobile : Lighthouse donne une idée, les données réelles disent la vérité.
• Commencez par le serveur : hébergement lent, TTFB élevé et pas de cache = LCP hors limites, quoi que vous fassiez ensuite. En cas de doute, lisez comment choisir le bon serveur PrestaShop ou regardez notre hébergement PrestaShop.
• Dans le back-office, Paramètres avancés → Performances : activez le cache Smarty, la compilation « ne jamais recompiler », la minification et la combinaison des CSS et du JavaScript. Puis retestez : certains thèmes et modules anciens cassent, il faut vérifier page par page.
• Le thème pèse plus que tout le reste. Si le vôtre est bourré de sliders, de carrousels et de polices chargées à la main, aucun réglage ne le sauvera : envisagez un thème conçu léger, comme Flag Theme pour PrestaShop 9.

Erreur fréquente. Fêter un 95 sur Lighthouse en desktop fibre alors que, dans Search Console, le mobile est tout orange. Le test de laboratoire sert à trouver les causes, pas à crier victoire.

2. Optimisez les images (mais jamais de lazy load sur la principale)

Quoi vérifier. Trois choses, dans l’ordre :

• Format : WebP ou AVIF à la place du JPEG et du PNG.
• Tailles responsives : l’attribut srcset, pour que le téléphone télécharge la petite version et pas celle de 2000 px.
• Lazy load uniquement pour les images sous la ligne de flottaison. Jamais sur l’image principale : c’est elle qui détermine le LCP, la retarder dégrade le score au lieu de l’améliorer.

Pourquoi ça pèse sur les ventes. Dans un e-commerce, les images représentent l’essentiel du poids d’une fiche produit. Plus elles sont légères, plus vite le client voit le produit. Et un client qui voit le produit commence à l’évaluer.

Comment faire sur PrestaShop.

• Importez des originaux déjà recadrés à la bonne taille : PrestaShop génère les miniatures, il ne fait pas de miracles sur un fichier de 8 Mo.
• Après chaque changement de formats d’images, il faut régénérer les miniatures (Apparence → Paramètres des images). Sur les gros catalogues, ça part en timeout : il existe un module qui les régénère par petits cycles.
• Vérifiez que les balises <img> du thème ont width et height : sans ça, la mise en page saute et le CLS se dégrade.
• Contrôlez avec l’inspecteur du navigateur que la photo principale de la fiche produit n’a pas loading="lazy".

Erreur fréquente. Installer un module « optimisation d’images », activer le lazy load partout, et dégrader le LCP de la fiche produit. Plus rapide en apparence, plus lent là où ça compte.

3. Maîtrisez les scripts tiers

Quoi vérifier. La liste de tout ce que votre site charge et que vous n’avez pas écrit : pixels publicitaires, chat, widgets d’avis, cartes, flux sociaux, modules installés et jamais retirés. Pour chacun, trois réponses : utile ?, utile sur toutes les pages ?, peut-il charger plus tard ?

Pourquoi ça pèse sur les ventes. Chaque script supplémentaire occupe le navigateur et ralentit la réponse aux touches, c’est-à-dire l’INP. Le client ne pense pas « conflit JavaScript ». Il pense « ce site ne marche pas ».

Comment faire sur PrestaShop.

• Ouvrez Modules dans le back-office et désinstallez (pas seulement désactivez) ce que vous n’utilisez plus depuis des mois. Un module désactivé laisse souvent des fichiers et des hooks derrière lui.
• Chargez les pixels après le consentement aux cookies : en Europe c’est une obligation légale, et accessoirement cela allège les pages des visiteurs qui refusent. Attention : le consentement relève de la loi, ce n’est pas une astuce de vitesse.
• Limitez les scripts aux pages utiles : le chat sur produit et panier, la carte uniquement sur les contacts. Sur PrestaShop, cela passe souvent par une condition dans le template du thème ou par un module sur mesure.
• Remesurez après chaque nettoyage. Sans mesure, c’est de la foi, pas de l’optimisation.

Erreur fréquente. Garder deux outils d’analyse qui font la même chose « au cas où », plus trois pixels de campagnes terminées il y a deux ans.

4. Faites que seul le cliquable ait l’air cliquable

Quoi vérifier. Boutons et liens doivent s’annoncer : forme reconnaissable, couleur contrastée, état hover sur desktop et état focus visible au clavier. L’inverse compte aussi : un badge, un encadré coloré ou une icône décorative ne doivent pas ressembler à un bouton.

Pourquoi ça pèse sur les ventes. Si le client doit deviner où cliquer, vous ajoutez une étape mentale à chaque écran. Et s’il touche trois fois un élément qui n’est pas un bouton, il conclut que le site est cassé.

Comment faire sur PrestaShop.

• Un seul style pour le bouton principal (« Ajouter au panier », « Commander »), identique partout.
• Ne supprimez jamais l’outline du focus dans le CSS du thème : il sert aux personnes qui naviguent au clavier et c’est un critère d’accessibilité. Pour savoir où vous en êtes, commencez par l’analyse d’accessibilité gratuite.
• Dans les filtres de catégorie, rendez toute l’étiquette cliquable, pas seulement la petite case.
• Faites un test à voix haute avec quelqu’un qui ne connaît pas le site : « montre-moi où tu cliquerais pour acheter ».

Erreur fréquente. Le bouton fantôme : texte gris clair sur fond blanc, sans bordure, parce que « c’est plus élégant ». Élégant et invisible.

5. Laissez de la place aux pouces : zones tactiles d’au moins 44×44 px

Quoi vérifier. Chaque élément interactif — boutons, liens, sélecteurs de taille et de couleur, champs, le « + » de la quantité, la croix de fermeture — doit avoir une zone tactile d’au moins 44×44 px, avec assez d’espace autour pour ne pas toucher le voisin.

Pourquoi ça pèse sur les ventes. Le pouce est large et le téléphone est le canal principal. Un sélecteur de taille trop petit se touche de travers : le client commande la mauvaise taille (ou abandonne) et vous récupérez un retour.

Comment faire sur PrestaShop.

• Testez le site sur votre téléphone, debout, à une main. C’est le test le plus honnête qui soit.
• Dans le thème, augmentez le padding et le min-height des boutons au lieu d’agrandir seulement le texte, et espacez les entrées du menu mobile.
• Surveillez les sélecteurs d’attributs, la pagination et les filtres : c’est là que les thèmes standard font les cibles les plus petites.
• Si vous devez toucher au template sans casser les mises à jour, demandez de l’assistance PrestaShop ou partez d’un thème pensé pour le mobile.

Erreur fréquente. Tout rétrécir pour « faire tenir le produit dans le premier écran ». Mieux vaut un scroll de plus qu’un toucher raté.

En bref

• Règle 1 — Core Web Vitals sur données réelles mobiles : LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1.
• Règle 2 — Images en WebP/AVIF, srcset, lazy load sous la ligne de flottaison mais jamais sur l’image principale.
• Règle 3 — Scripts tiers seulement là où ils servent, en différé ou après le consentement.
• Règle 4 — Boutons et liens reconnaissables (couleur, forme, hover, focus) ; pas de faux boutons.
• Règle 5 — Zones tactiles d’au moins 44×44 px, avec de l’espace entre les éléments.

La semaine prochaine, on continue avec la page Général. En attendant, revoyez les bases avec les 6 conseils pour augmenter les conversions de votre e-commerce.