PageSpeed 99/100 sur une vraie boutique PrestaShop 9.1 avec 80+ modules

Pas une démo. Une vraie boutique.

Quand on voit des études de cas PageSpeed en ligne, il s'agit généralement d'un site minimaliste avec quelques pages et à peine de fonctionnalités. Ce n'est pas ce dont il s'agit ici.

mypresta.rocks est notre boutique PrestaShop 9.1 en production. Elle fait tourner plus de 80 modules actifs — et ce ne sont pas des modules légers de configuration uniquement. Nous parlons de modules qui ajoutent de vraies fonctionnalités front-end : sliders animés, mega menu avec sous-menus, un checkout one-page complet, un moteur de blog avec commentaires et partage, un widget de recherche en direct, des flux de réseaux sociaux, des galeries de produits, des popups de vente, des comptes à rebours, des bannières de consentement aux cookies, des programmes de fidélité, des tableaux de bord analytiques, et bien plus.

Chacun de ces modules charge ses propres fichiers CSS et JavaScript. Chacun s'accroche au front office et rend des éléments visibles et interactifs sur la page. C'est le type de configuration qui détruit normalement votre score PageSpeed.

Et pourtant, voici nos scores Google PageSpeed Insights :

• Mobile : 99 Performance, 97 Accessibility, 100 Best Practices, 100 SEO
• Desktop : 99 Performance, 97 Accessibility, 100 Best Practices, 100 SEO

Ce n'est pas de la théorie. C'est ce que Google mesure en ce moment sur notre page d'accueil en direct.

Les chiffres

Mobile (4G lente, Moto G Power)

• First Contentful Paint : 1,2s
• Largest Contentful Paint : 1,5s
• Total Blocking Time : 110ms
• Cumulative Layout Shift : 0
• Speed Index : 1,4s

Desktop

• First Contentful Paint : 0,3s
• Largest Contentful Paint : 0,9s
• Total Blocking Time : 30ms
• Cumulative Layout Shift : 0,011
• Speed Index : 0,5s

Ces résultats proviennent de Lighthouse 13 fonctionnant sur l'infrastructure de Google — le même test qui alimente le rapport PageSpeed Insights que chaque propriétaire de boutique consulte.

Comment nous l'avons fait

Il n'y a pas de tour de magie unique. La performance à ce niveau vient d'un pipeline discipliné qui touche chaque couche de la pile technologique. Nous avons couvert les fondamentaux dans notre guide d'optimisation des performances PrestaShop.

Extraction du Critical CSS

Le plus grand ennemi d'un rendu rapide est le CSS bloquant le rendu. Le système CCC de PrestaShop (Combine, Compress, Cache) fusionne toutes les feuilles de style des modules en un seul fichier volumineux. Sur notre boutique, ce fichier dépasse 500KB.

Nous extrayons le CSS critique above-the-fold en utilisant la bibliothèque Critters de Google et nous l'intégrons directement dans le HTML. La feuille de style complète est ensuite chargée de manière asynchrone en utilisant le pattern media="print" onload="this.media='all'". Le navigateur affiche la page immédiatement avec les styles intégrés, et le reste se charge en arrière-plan sans rien bloquer.

Purge du CSS

Avec 80+ modules, le CSS combiné contient des milliers de règles qui ne sont jamais utilisées sur une page donnée. Nous exécutons PurgeCSS contre le HTML réel des pages clés ainsi que tous les fichiers JavaScript et de templates dans le thème et les modules.

Le résultat : 852KB réduit à 548KB — une réduction de 36% de la charge CSS. Moins de CSS signifie des téléchargements plus rapides, un parsing plus rapide, et un remplacement plus fluide sans décalage de mise en page.

Découpage JavaScript

Tout le JavaScript n'a pas besoin de s'exécuter immédiatement. Nous divisons le bundle JavaScript CCC en deux parties :

• Bundle synchrone (~140KB / 41KB gzip) : Fonctionnalités de base — jQuery et les scripts core de PrestaShop
• Bundle différé (~497KB / 111KB gzip) : Bootstrap, scripts du thème, et scripts de modules non critiques chargés via <script defer>

Le bundle différé se charge sans bloquer le thread principal. Cela seul a réduit notre JavaScript synchrone de plus de 60%.

Chargement intelligent des assets

Le JavaScript de checkout (180KB+ minifié) est complètement différé sur les pages hors checkout. Il se charge via requestIdleCallback sur la page d'accueil et les pages de contenu, et ne se charge immédiatement que sur les pages produit, panier et checkout où il est réellement nécessaire.

Le JavaScript de paiement Stripe est entièrement supprimé des pages hors checkout.

Optimisation des images

Toutes les images de produits et de bannières sont servies au format AVIF via la négociation de contenu Apache — zéro overhead PHP. Notre convertisseur batch a traité 5 399 images, réduisant le stockage total des images de 994MB à 44MB (réduction de 95,6%).

Notre bannière hero mobile ne fait que 25KB. La version desktop est de 56KB. Les deux maintiennent une excellente qualité visuelle à ces tailles.

Nous préchargeons uniquement l'image LCP mobile et rien d'autre. Sur une connexion 4G lente avec ~200KB/s de bande passante, chaque ressource préchargée est en compétition avec le CSS critique pour la bande passante. Précharger une police ou une bannière desktop a en réalité détérioré notre FCP — une leçon apprise à la dure.

Accessibilité WCAG 2.1

Le score d'accessibilité élevé a nécessité une attention particulière aux ratios de contraste pour chaque élément de la page :

• Tous les textes respectent les exigences de contraste WCAG 2.1 AA (4,5:1 pour le texte normal, 3:1 pour le texte large)
• Les éléments interactifs ont des indicateurs de focus visibles
• Hiérarchie de titres appropriée et labels ARIA partout
• Les éléments cachés utilisent .visually-hidden correctement pour les lecteurs d'écran

Pourquoi c'est important

Google utilise les Core Web Vitals comme signal de classement. Une boutique rapide et accessible se classe mieux, convertit mieux, et offre une meilleure expérience à chaque visiteur.

Mais plus important encore pour nos clients : chaque technique d'optimisation que nous utilisons sur mypresta.rocks est intégrée dans nos produits. Le module Performance Revolution qui alimente ce pipeline est disponible pour tous nos clients. La même extraction de Critical CSS, le même découpage JavaScript, le même chargement intelligent des assets.

Si nous pouvons atteindre 99/100 avec 80+ modules actifs sur une vraie boutique en production — des modules qui ajoutent des sliders, de la recherche, du checkout, un blog, des popups, et tout le reste — votre boutique peut y arriver aussi. Associez-le avec Instant Redis pour le cache côté serveur et vous disposez d'une pile de performance complète.