Introduction

Avoir une boutique PrestaShop « responsive » ne suffit pas. Un thème qui s'adapte visuellement aux écrans mobiles peut malgré tout être mal optimisé : ressources CSS bloquées par le robots.txt, balises sémantiques manquantes, temps de chargement excessifs. Google Search Console signale ces problèmes, mais encore faut-il savoir les interpréter et les corriger.

Dans cet article, je vous guide pas à pas pour auditer votre boutique PrestaShop, comprendre les alertes de ressources bloquées et appliquer les correctifs qui feront réellement la différence — aussi bien pour le SEO que pour l'expérience utilisateur mobile.

Étape 1 : Auditer les performances mobiles de votre boutique

Avant toute optimisation, il faut mesurer. Deux catégories d'outils sont indispensables :

Outils de performance (vitesse de chargement)

Ces outils analysent le poids des ressources, le temps de rendu et les goulots d'étranglement :

• **Google PageSpeed Insights** — L'outil de référence, directement lié aux Core Web Vitals utilisés par Google pour le classement mobile
• **GTmetrix** — Analyse détaillée avec waterfall des requêtes HTTP, scores YSlow et recommandations priorisées
• **Lighthouse** (intégré à Chrome DevTools) — Audit complet : performance, accessibilité, SEO, bonnes pratiques

Outils d'analyse structurelle (SEO technique)

Ces outils vérifient la structure HTML, les balises sémantiques et la crawlabilité :

• **Google Search Console** — Indispensable pour détecter les ressources bloquées, les erreurs d'exploration et les problèmes d'ergonomie mobile
• **Screaming Frog** — Crawl complet de votre site pour détecter les balises manquantes, les redirections et les erreurs

Conseil : Lancez systématiquement les deux types d'audit. Un site rapide mais mal structuré (pas de H1, meta descriptions manquantes) sera tout autant pénalisé qu'un site lent.

Étape 2 : Comprendre et corriger les ressources bloquées

L'alerte la plus fréquente dans Google Search Console pour les boutiques PrestaShop concerne les ressources bloquées par le fichier robots.txt.

Pourquoi cette erreur apparaît

Le fichier robots.txt par défaut de PrestaShop interdit aux robots d'accéder à certains répertoires, dont /modules/. C'est une bonne pratique de sécurité : on ne veut pas que Google indexe les fichiers PHP des modules.

Le problème, c'est que de nombreux modules chargent leurs fichiers CSS et JavaScript depuis ce même répertoire /modules/. Résultat : Googlebot ne peut pas charger ces styles, et considère que la page n'est pas correctement rendue sur mobile.

Le fichier robots.txt par défaut de PrestaShop

Voici la directive concernée dans un robots.txt PrestaShop standard :

# Fichiers générés par PrestaShop
Disallow: /modules/

Cette règle bloque tout le contenu du répertoire /modules/, y compris les fichiers CSS/JS nécessaires au rendu visuel.

Solution recommandée : autoriser les assets statiques

Sur PrestaShop 8.x, la méthode la plus propre consiste à ajouter des exceptions dans le robots.txt pour autoriser les fichiers statiques tout en maintenant le blocage des fichiers PHP :

# Bloquer les fichiers PHP des modules (sécurité)
Disallow: /modules/

# Mais autoriser les assets statiques (CSS, JS, images)
Allow: /modules/*.css
Allow: /modules/*.js
Allow: /modules/*.jpg
Allow: /modules/*.png
Allow: /modules/*.gif
Allow: /modules/*.svg
Allow: /modules/*.woff2

Important : L'ordre compte dans le robots.txt. Les directives Allow doivent être placées après le Disallow pour le surcharger correctement.

Méthode alternative : déplacer les assets dans le thème

Une approche plus radicale mais techniquement plus propre consiste à surcharger les assets des modules dans votre thème. PrestaShop permet de placer les fichiers CSS/JS des modules dans :

/themes/votre-theme/modules/nom_du_module/views/css/
/themes/votre-theme/modules/nom_du_module/views/js/

PrestaShop chargera automatiquement ces fichiers à la place de ceux du module. Le répertoire /themes/ n'étant pas bloqué dans le robots.txt, le problème disparaît.

Vérification avec Google Search Console

Après modification du robots.txt :

1. Allez dans **Google Search Console > Paramètres > Exploration > robots.txt**
2. Utilisez le **testeur de robots.txt** pour vérifier que vos assets sont bien autorisés
3. Utilisez l'outil **Inspection d'URL** (anciennement « Explorer comme Google ») pour vérifier le rendu complet de votre page d'accueil et de quelques fiches produits
4. Vérifiez que le rendu mobile correspond bien à ce que vos visiteurs voient

Étape 3 : Corriger les erreurs de structure HTML

Un problème souvent négligé : les balises sémantiques manquantes. Sur PrestaShop, il est fréquent de constater l'absence de balise

sur la page d'accueil.

Ajouter un H1 sur la page d'accueil

Sur PrestaShop 8.x, modifiez le template de votre page d'accueil dans votre thème :

{* templates/index.tpl *}
{block name='page_content'}
  <h1 class="home-title visually-hidden">{$page.meta.title}</h1>
  {* ... reste du contenu ... *}
{/block}

La classe visually-hidden (ou sr-only en Tailwind CSS) permet de garder le H1 pour le SEO sans impacter le design :

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Checklist des balises essentielles

Pour chaque type de page, vérifiez la présence de :

PageBalise H1Meta DescriptionCanonicalDonnées structurées AccueilNom de la boutique✅ Unique✅ AutoOrganization CatégorieNom de la catégorie✅ Unique✅ AutoBreadcrumbList ProduitNom du produit✅ Unique✅ AutoProduct + Offer CMSTitre de la page✅ Unique✅ AutoArticle

Étape 4 : Optimiser réellement pour le mobile

Une fois les erreurs techniques corrigées, passez à l'optimisation active.

Performances critiques pour le mobile

# Vérifier le poids total de votre page d'accueil
curl -s -o /dev/null -w "Taille totale: %{size_download} octets\nTemps total: %{time_total}s\n" https://votre-boutique.fr

Objectifs à atteindre :

• **LCP (Largest Contentful Paint)** < 2,5 secondes
• **FID (First Input Delay)** < 100 ms
• **CLS (Cumulative Layout Shift)** < 0,1
• **Poids total** de la page < 1,5 Mo (idéalement < 800 Ko)

Actions concrètes à fort impact

1. **Compresser les images** — Utilisez le format WebP (supporté nativement par PrestaShop 8.x). Activez-le dans **Préférences > Images > Format d'image**
2. **Activer la combinaison CSS/JS** — Dans **Paramètres avancés > Performances**, activez la concaténation et la minification
3. **Lazy loading des images** — Natif sur PrestaShop 8.x avec l'attribut `loading="lazy"` sur les images sous la ligne de flottaison
4. **Supprimer les modules inutilisés** — Chaque module actif ajoute potentiellement des requêtes CSS/JS. Désinstallez (ne désactivez pas simplement) les modules non utilisés

Configuration serveur

Assurez-vous que votre serveur est correctement configuré :

# Compression Gzip/Brotli (nginx)
gzip on;
gzip_types text/css application/javascript application/json image/svg+xml;
gzip_min_length 1000;

# Cache navigateur pour les assets statiques
location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

L'importance de maîtriser son hébergement

Un point fondamental que je constate régulièrement : de nombreux marchands n'ont aucun accès à leurs propres fichiers. Que ce soit le FTP, le SSH ou même le panneau d'hébergement, tout est entre les mains d'un prestataire ou d'un « ami qui s'y connaît ».

C'est une erreur critique. Votre boutique en ligne est un actif commercial :

• Vous devez avoir un accès FTP/SFTP à vos fichiers
• Vous devez contrôler votre nom de domaine (registrar)
• Vous devez disposer de sauvegardes régulières (fichiers + base de données)
• Vous devez pouvoir intervenir en urgence sans dépendre d'un tiers

Sans ces accès, vous êtes en situation de dépendance technique et chaque optimisation, même mineure, devient un projet en soi.

Bonne pratique : Mettez en place un système de sauvegarde automatique quotidien. En cas de mauvaise manipulation, vous pourrez restaurer votre boutique en quelques minutes au lieu de quelques jours.

Conclusion

Rendre une boutique PrestaShop véritablement mobile-friendly va bien au-delà de l'installation d'un thème responsive. C'est un travail d'audit technique complet qui touche au robots.txt, à la structure HTML, aux performances de chargement et à la configuration serveur.

Commencez par mesurer (PageSpeed Insights, Search Console), corrigez les erreurs bloquantes (ressources bloquées, H1 manquant), puis optimisez (compression d'images, concaténation CSS/JS, cache serveur). Et surtout : gardez la main sur votre hébergement.