Pagespeed Prestashop

Comment optimiser la vitesse de chargement et le score PageSpeed de sa boutique Prestashop ?

Précisons d'abord qu'on entend par Google PageSpeed Insights un outil ingénieux de Google, spécialement conçu pour évaluer minutieusement la performance d'un site web en termes de rapidité d'affichage de pages. En procédant à ce diagnostic digital, l'outil vous délivre un ensemble d'indications précieuses, vous guidant sur quels aspects de votre site requièrent une retouche, voire une refonte radicale, pour en optimiser la vitesse de chargement des pages. Imaginons un temps de chargement de page rampant, synonyme de frustration pour l'utilisateur, une réelle entrave à une expérience web fluide, que ce soit sur un dispositif mobile ou un ordinateur de bureau. Un tel problème conduit inévitablement l'utilisateur à abandonner le site précipitamment, et vous, de votre côté, vous voyez vos conversions, vos statistiques et votre classement SEO en prendre un véritable coup.

Soyons clairs, une boutique en ligne qui se charge rapidement présente une panoplie d'avantages incontestables. Cela se traduit, entre autres, par une expérience utilisateur agréable et une hausse notable des conversions.

Concernant la manière d'optimiser la vitesse de chargement de PrestaShop, il existe une multitude de techniques et d'astuces. Pour vous aider, voici une liste non exhaustive de quelques astuces faciles à appliquer et favorisant une amélioration rapide.

Résumé des principales recommandations PageSpeed

En suivant scrupuleusement les consignes de Google, le temps d'affichage idéal pour un site marchand doit se situer aux alentours de 1.5 secondes. Donc pour évaluer la rapidité du chargement de votre plateforme, une audit serait nécessaire.

Pour une estimation précise, n'hésitez pas à vous référer au score décerné par PageSpeed Insights. Cet outil effectue une analyse complète et vous attribue deux notes sur 100, une pour la version mobile de votre site et l'autre pour l'interface desktop.

Mais avant de prendre ce tutoriel en main, il serait judicieux de faire un essai sur la vitesse de chargement de votre boutique en ligne sur PrestaShop. Pour faire cela, Google PageSpeed Insights ou GtMetrix peuvent être des outils précieux. Ils vous fourniront des données significatives qui démontreront si les changements que vous êtes sur le point d'apporter impacteront ou non la performance de votre commerce en ligne.

Facile : activer les options de performances natives de PrestaShop

Dès le début, vous devez accéder à votre interface Prestashop et naviguer jusqu'à l'onglet intitulé Paramètres avancés, suivi de Performances. Ce chemin de deux étapes est crucial pour arriver à la destination souhaitée.

Le volet Performances de la plate-forme PrestaShop est un panier rempli de diverses options, toutes ayant le potentiel d'accroître ou de freiner la précieuse vitesse de chargement de votre magasin virtuel. C'est un endroit à explorer avec soin, plutôt qu'une fosse de tous les désirs dont vous activez toutes les options au hasard.

Tenez-vous à carreau : il serait hasardeux d’activer toutes les options à l’aveuglette, sans garantir que tout soit correctement opérationnel sur votre site de commerce électronique. Ce n'est pas un jeu de casino, mais plutôt un processus de peaufinage délicat qui requiert une approche réfléchie.

L'application de ce tutoriel judicieusement conçu, et lors de toute manipulation de cette nature sur votre CMS PrestaShop, vous devez systématiquement prendre le pouls de chaque option, l'une après l'autre. C'est ainsi que, tel un médecin compétent, vous comprendrez comment chaque intervention façonne la santé et le bien-être de votre boutique numérique.

Optimisation des scripts JavaScript

Les langages informatiques tels que JavaScript peuvent s'avérer être un frein pour une vitesse de chargement optimale d'un site web. Plutôt que d'envisager de les écarter, il serait plus judicieux de chercher à les peaufiner en s'appuyant sur toute une myriade de préconisations, qui ne sont pas exhaustives et doivent être examinées minutieusement, car elles sont liées au type de site en question. En effet, le JavaScript a tendance à se heurter au CSS lors de la phase initiale de création de la page. Il est donc primordial que la durée du CSS critique (Critical CSS) demeure relativement courte.

Dans la mesure du réalisable, il serait préférable de mettre en œuvre les scripts asynchrones après le premier rendu de la page. Positionner les balises

Activation du cache Prestashop

Dans la rubrique initiale de la section Performances de votre boutique e-commerce PrestaShop, il vous est possible de paramétrer les options.
Compilation des templates : préférez l'option "Ne jamais recompiler les fichiers de templates".
Le Cache : faites glisser le curseur jusqu'à Oui.
Synchronisation multi-serveurs : maintenez le curseur sur Non.
Type de mise en cache : sélectionnez l'option "Système de fichier".
Vider le cache : optez pour "Vider le cache chaque fois qu’une modification est effectuée". Cette option offre l'avantage de vider automatiquement la mémoire cache à chaque fois qu'une modification est réalisée sur votre boutique en ligne. De cette manière, vos clients pourront à tout moment contempler les mises à jour les plus récentes sur vos pages web.

Autres optimisations sur le Javascript

Réduire le JavaScript à sa plus simple expression, c'est un peu comme faire entrer un grand ami costaud dans une petite voiture; c'est relever un défi, quoi! Cette compaction du code JS peut faire maigrir les données de plusieurs octets et vite fait bien fait, diminuer le temps de déroulement du script. On dit que le temps c'est de l'argent, non? Alors, minifions donc ce JavaScript!

Maintenant, imaginez-vous dans une grande cuisine plein de pots de confiture ouverts. C'est un peu le bordel, non? Eh bien, combiner les ressources JavaScript, c'est un peu comme rassembler tous ces pots de confiture dans un seul et grand pot; on simplifie la vie, ou plus techniquement, on réduit le temps de réponse des requêtes. On appelle ça la concaténation. Pas mal comme truc, hein ?

Ensuite, compresser le JavaScript dans le HTML c'est un peu comme faire rentrer un éléphant dans un réfrigérateur. Ça permet de charger en un clin d'œil une bonne partie de vos effets et scripts. Mais attention, le JavaScript Inline peut parfois être à double tranchant, creusant une panne sur certains thèmes spécifiques. Or, ce serait dommage de casser l'ambiance, non ?

Activation du Smart Cache CCC

L'une des principales utilités des options CCC (Combinaison, Compression et Caching) est de diminuer le délai de chargement des pages (publiques) de votre espace de vente en ligne. Notons toutefois qu'elles n'influencent en rien votre interface d'administration. Qui plus est, suivant la compatibilité de votre thème avec ces options, leur activation pourrait provoquer des dysfonctionnements. Je ne saurais trop vous recommander de vérifier, après activation, que tout reste opérationnel sur votre site de commerce en ligne.

Dans certaines circonstances, il peut être judicieux d'activer l'option « Smart cache » pour vos feuilles de styles CSS et votre code JavaScript. Cette démarche a généralement pour effet d'optimiser de façon significative le temps de chargement de votre site marchand.

Concernant le « Smart cache » pour vos feuilles de styles, je vous suggère de déplacer le curseur sur Oui. Pour ce qui est du « Smart cache » relatif au code JavaScript, faites également glisser le curseur sur Oui. Concernant l'optimisation Apache, je préconise de maintenir le curseur sur Non.

Rien ne sert de se précipiter, il est toujours plus judicieux de procéder par étapes et d'être certain des modifications effectuées. In fine, l'essentiel est d'améliorer l'expérience de navigation de vos utilisateurs sans perturber la gestion de votre boutique. En pariant sur les options CCC, vous donnez à votre site les meilleures chances de se démarquer en affichant un temps de chargement optimisé.

Optimisations CSS

Il est préconisé d'incorporer le code CSS en amont du document : En effet, le fait de positionner les ressources CSS en début du document HTML offre au navigateur un accès instantané aux balises et facilite l'envoi de la requête associée au code CSS.

Le CSS doit par ailleurs être inséré de façon "en ligne" (inline) au niveau de l'en-tête du document : En positionnant le CSS sous forme "inline" en tête de la ligne de flottaison, le contenu d'importance est charger en priorité, avant même les scripts.

Par ailleurs, le recours à l'importation des règles de feuille de style depuis un autre fichier de feuille de style induit des échanges supplémentaires sur le chemin critique, provoquant ainsi un retard dans la visibilité du rendu. Il est donc judicieux d'opter pour un unique link href afin d'échapper à une multitude démesurée de requêtes. La pratique commune, et ô combien efficace, est de placer un link rel=stylesheet au sein de l'en-tête de la page HTML.

Configuration et mise en place CDN

Opter pour la mise en place d'un CDN peut se révéler être une solution efficace pour accélérer le temps de chargement des plateformes de commerce électronique basées sur PrestaShop. En effet, l'usage d'un CDN permet de réduire considérablement la distance qui sépare le serveur Web de l'utilisateur qui consulte votre plateforme en ligne.

Bien que son utilisation ne soit pas une obligation, vous pouvez choisir d'activer un CDN à l'image de solutions populaires telles que CloudFlare ou KeyCDN, pour ne citer que ces dernières.

En ce qui concerne la dernière rubrique "Cache de Performances" de PrestaShop, nous vous suggérerions de privilégier l'option CacheApc. Pour ce faire, il suffit de basculer l'option "Utiliser le cache" en position "Oui" et de sélectionner ensuite "CacheApc".

Important : la vitesse sur mobile

A l'intersection de la technologie et du digital, l'indexation mobile-first s'est hissée au sommet. À l’instar de la vitesse de chargement sur ordinateur, celle sur mobile requiert une optimisation maximale. En effet, l'ère du web mobile exigent et pointilleux que nous vivons nous y contraint. Il est ainsi à noter que le trafic mobile peut se hisser à plus de la moitié du trafic total de votre plateforme en ligne.

S'y ajoute la prouesse technologique qu'est AMP (Accelerated Mobile Pages) qui renforce l'idée que Google aspire à un environnement mobile-friendly comme critère crucial dans l'ordonnancement de son moteur de recherche.

Il n'est pas négligeable de rappeler selon Google, que 53% des utilisateurs abandonnent un site mobile qui prend plus de 3 secondes à se charger en 4G, et 5 secondes en 3G. A cela s'ajoute un TTFB (Time To First Byte) de 1.3 secondes, qui est le temps de chargement du premier octet, soit le temps d'accès au serveur. Et pour vous donner une idée du péril, figurez-vous qu'une seconde perdue pourrait entraîner jusqu'à 20% de perte de conversions.