Refonte site Prestashop : orienter performance et accessibilité

Nous ouvrons aujourd’hui les portes de notre blog à Adonis Karavokyros, de l’agence Prestarocket. Utilisateur de longue date de notre solution de monitoring synthétique des Performance Web, Adonis va nous présenter comment il a considérablement amélioré les web performances et la qualité du thème par défaut de Prestashop (CMS e-commerce).

Comment tirer profit de votre refonte de site Prestashop ?

Des optimisations qui ont largement bénéficié à la communauté, puisque cette version optimisée du thème est disponible pour toute la communauté.

Même si le thème par défaut sur la version 1.7 de Prestashop s’est énormément amélioré (notamment en matière d’intégration et de flexibilité) par rapport à la version 1.6, nous avons commencé à travailler sur une version optimisée (Classic-rocket) pour plusieurs raisons :

• la version de BootStrap 4 sur le thème Classic n’est pas à jour ;

• des gains de performance sont facilement réalisables ;

• quelques problèmes d’accessibilité et de bonnes pratiques SEO étaient à corriger.

Initialement, ce thème Classic-rocket devait nous servir de base pour les projets de nos clients. Après avoir discuté avec différents membres de l’équipe PrestaShop, ils nous ont proposé de le mettre à disposition de la communauté PrestaShop. Nous avons accepté car les échanges avec PrestaShop ont été très constructifs et ils nous ont bien aidé sur la gestion d’un projet open source.

Le thème Classic-rocket est gratuit et disponible ici.

Et voici sans plus attendre l’illustration des gains obtenus :

Lors de ce chantier mené à l’été 2018, le Speed Index a été divisé par plus de 2, et le score qualité de Dareboost a augmenté de 10 points grâce aux corrections apportées.

Notre utilisation de Speed Analysis

Nous utilisons cette solution depuis sa création ou presque, pour monitorer les sites de nos clients sous PrestaShop. Par quoi commencer pour votre refonte site Prestashop ?

La solution nous donne des conseils déjà priorisés et “facile à comprendre”, pour améliorer les performances d’un site. Il ne nous reste donc plus qu’à les mettre en œuvre !

Pour améliorer les performances, il y a pour nous 4 axes de travail principaux :

• côté infrastructure (serveur) ;

• côté applicatif (ici, PrestaShop) ;

• côté intégration (ici, le thème PrestaShop) ;

• côté client/contenu (sensibiliser le client à l’optimisation des images qu’il ajoutera à sa boutique, etc.).

Enfin, dans le cadre de cette refonte de thème, il faut accepter que certaines optimisations proposées par le module ne soient pas nécessairement réalisables. En effet, ce thème est utilisé par toute la communauté. Et les e-commerçants (sans ressources techniques) peuvent ajouter des modules, du contenu libre etc.. Il faut donc garder en tête cette contrainte.

Par exemple, le framework CSS Bootstrap, même s’il est plutôt lourd et pas nécessairement optimisé, reste un compromis nécessaire pour que les e-commerçants puissent bénéficier des modules tiers qui s’appuient dessus, sans quoi ils ne pourront probablement pas procéder aux adaptations nécessaires.

Les optimisations réalisées lors de la refonte site Prestashop

Nous nous concentrons ici uniquement sur les recommandations en lien avec le front-end.

Performance/Poids

Pour améliorer les performances, nous avons travaillé sur ces 3 types de ressources : images, JavaScript et CSS.

Images

Les images représentent la plus grosse partie du poids d’une page web (surtout en ecommerce).

Avant optimisation, les images comptaient pour 67 % du poids de la page d’accueil (1,27 Mo); après optimisations, on arrive à 25 % uniquement, soit 165 Ko.

Pour arriver à ce résultats, 2 techniques principalement :

• l’utilisation de lazysizes pour charger les images uniquement lorsqu’elles sont utiles pour l’internaute (voir notre article sur le Lazy Loading) ;

• l’optimisation des dimensions des images responsive (je vous conseille l’excellente présentation de Nicolas Hoizey à We Love Speed).

Nous aurions souhaité aller encore plus loin et utiliser le format WebP, pour avoir des images plus légères encore lorsque le navigateur de l’internaute supporte ce format, mais la configuration de PrestaShop ne le permet pas encore.

Javascript

Le thème par défaut délivre 155 Ko de javascript contre 85 Ko après optimisation (un gain proche de 50 %).

Pour ce travail, nous avons commencé par identifier les scripts les plus lourds : par exemple, le module de recherche propose un affichage des résultats sous forme de « liste autocomplete » avec jquery-ui. Ce seul script approche les 60 Ko : nous avons simplement remplacé ce module par un module équivalent utilisant un script pesant 1,8 Ko (gzip).

Ensuite, nous avons supprimé les scripts JavaScript du thème qui faisaient doublon avec des fonctionnalités déjà proposées par Bootstrap nativement.

Enfin, nous utilisons un seul et même script (slick) pour gérer le slider de la page d’accueil et le carrousel des images sur la fiche produit. Nous ne chargeons que les fichiers réellement utilisés de Bootstrap (le carrousel inclus n’est donc pas chargé par exemple)

CSS

Nous avons également gagné 50 % de poids sur les fichiers CSS (80 Ko vs 33,5 Ko).

Nous avons repris tous les CSS du thème pour éviter les doublons avec Bootstrap et là encore, pour ne charge de Bootstrap que les composants réellement utilisés.

Bilan

Voici une capture du rapport de comparaison après et avant optimisation, pour le poids de la page, distribué par type de contenus :

En bleu marine, nos optimisations. En bleu clair, le thème avant optimisation.

Concernant l’optimisation pour le référencement naturel et l’accessibilité, nous avons appliqué plusieurs corrections comme par exemple :

• une meilleure hiérarchisation du contenu (plus de Hn dans le footer par exemple) ;

• une bonne utilisation des attributs rel/prev sur les pages de type liste ,

• une correction des formulaires avec l’association d’un label à chaque champ ;

• des balises meta noindex/nofollow sur les pages de listing avec tri (du moins cher au plus cher…) ;

• des données structurées : Open Graph & JSON-LD.

À venir

Ce thème, bien qu’il soit largement plus performant que la version initiale, reste une base et il faudra pour chaque projet qui l’adopte, rester vigilant sur les modifications apportées pour garder de bon résultats. Et comme le recommande Speed Analysis, surveiller la performance de vos pages web reste le meilleur moyen d’apporter cette garantie tout au long de la vie de vos sites e-commerce.

Nous avons également prévu de travailler sur de nouvelles améliorations de notre thème Classic-rocket dans le futur :

• amélioration de la perception de la performance (en se basant sur les bons conseils de Stéphanie Walter) ;

• Progressive Web App ;

• amélioration de l’UX des formulaires ;

• nouveau module pour gérer le menu ,

• Etc.

En conclusion, n’oubliez pas non plus de bien configurer vos environnements de Production côté Back-End. Trop souvent, les bases ne sont pas respectées, comme par exemple l’activation du cache Smarty.

En savoir plus sur Prestarocket :

Nous sommes une agence à taille humaine spécialisés dans la création de boutique en ligne sous PrestaShop. Nous gérons des boutiques avec un CA variant de quelques centaines de milliers d’euros à plusieurs millions. Nous travaillons également sur une offre de thèmes et modules sur PrestaShop.