Améliorez les performances de la boutique WooCommerce de votre boutique de commerce électronique

Votre boutique WooCommerce est-elle accessible à tous les internautes où qu'ils soient ? La question de la performance de boutique est au cœur des priorités des propriétaires de boutiques ainsi que des hébergeurs WooCommerce pour l'activité et la visibilité de votre boutique en ligne sur Internet.

Pourquoi améliorer les performances de la boutique WooCommerce ?

Pour optimiser l'expérience utilisateur :

La fidélisation des clients dépend en grande partie de l'amélioration des performances des magasins WooCommerce des magasins visités. Quant à l'expérience utilisateur, 3 éléments ressortent et doivent être surveillés :

1. La vitesse d'affichage des pages d'un site internet (40% des visiteurs abandonnent la navigation si le temps de réponse dépasse 3 secondes)
2. Le temps nécessaire pour télécharger les éléments d'une page
3. La fluidité du navigateur dans la manipulation des éléments d'une page

Pour Améliorer les Performances Mobile/Web :

Avec la généralisation des appareils mobiles (smartphones ou tablettes), les utilisateurs ne se contentent plus de leur ordinateur fixe ou portable. Il en résulte un environnement d'exploitation plus complexe. Les mobinautes ont de plus en plus d'attentes : 85% s'attendent à un temps de chargement amélioré aussi rapide que sur un PC.

Pour optimiser le référencement naturel :

Le temps de réponse du serveur d'hébergement est un critère mesuré par les moteurs de recherche. Cela favorise la vitesse d'indexation d'une nouvelle page web et permet d'indexer plus de pages en profondeur. Google recommande une moyenne de 1,5 seconde pour afficher une page Web.

Pour maîtriser les coûts :

Il y a de plus en plus de données à stocker, manipuler et exploiter. Une gestion efficace des performances d'une boutique WooCommerce optimise les coûts. Cela induit :

Une boutique en ligne moins gourmande en ressources
Meilleure disponibilité aux heures de pointe

Tester le temps de chargement de la boutique WooCommerce :

La première étape est évidemment de connaître les performances que délivre votre boutique. Pour cela, de nombreux outils performants existent et donnent des indicateurs sur ce qui doit absolument changer ou s'améliorer. Voici 3 outils d'évaluation de performance :

Outils Pingdom
GTmetrix
Google PageSpeed Insights

Comme à l'école, le but ici est d'obtenir les meilleures cotes dans ces différents outils. Cela permettra dans un premier temps d'optimiser votre taux de conversion grâce à une expérience utilisateur améliorée. De plus, vous bénéficierez d'un meilleur référencement puisque Google a annoncé que la vitesse de chargement des sites web était prise en compte dans ses algorithmes.

A noter cependant qu'il faut savoir distinguer la vitesse brute (chargement du code) de la vitesse réellement perçue par l'utilisateur. C'est de cette dernière dont on parle, celle à laquelle l'utilisateur est confronté.

De plus en plus, vous entendez parler de la performance d'un site Web comme critère de positionnement dans les moteurs de recherche. Ce facteur comprend plusieurs indicateurs qui permettent à l'algorithme de Google de juger si votre boutique de commerce électronique est rapide et de l'associer à d'autres facteurs pour déterminer les positions de vos pages de produits.

Nous traiterons ici des 10 plus importantes :

1. Hébergement Web WooCommerce
2. Optimisation des images
3. Installez le plug-in de cache
4. Intégrez WordPress CDN
5. Regrouper les fichiers CSS et JS
6. Utilisez les sprites CSS
7. Allégez les pages au maximum
8. Optimisation de la base de données
9. Sous-domaines pour les actifs
10. Activer la compression Gzip

1. Hébergement Web WooCommerce :

Pour choisir un hébergement WooCommerce, ne pensez pas automatiquement « économie » en allant directement au moins cher. Si votre boutique WooCommerce est mal hébergée, cela peut inclure des temps d'arrêt et de l'insécurité.

Vous êtes sûrement un visiteur vous-même ! Si une menace est détectée sur votre boutique, vous irez certainement chez un concurrent. Un bon hébergement doit être adapté à vos besoins ; des besoins qui sont différents pour les blogs, les sites à faible trafic ou au contraire à fort trafic.

Afin de ne pas vous tromper, n'hésitez pas à contacter des professionnels qui pourront vous conseiller.

Pour avoir une boutique WooCommerce qui s'affiche rapidement tout le temps, il est impératif d'avoir à sa disposition un bon hébergeur comme Cloudways, celui qui assure stabilité, puissance, disponibilité et sécurité. Il n'y a pas de secret pour cela, il faut mettre un budget minimum.

L'équation va dépendre de nombreux paramètres : les serveurs (qualité des disques durs, performances, etc.), la redondance (la multiplication du nombre de serveurs pour pallier les problèmes de panne), le service (intervention rapide, etc.).

L'hébergement Web pour WooCommerce est l'un des éléments cruciaux pour garantir un service de qualité. Assurez-vous de le choisir!

Kinsta est une autre excellente option pour héberger votre site WooCommerce. Leur architecture hautement sécurisée et axée sur la vitesse leur permet de gérer facilement les pics de trafic. Pour les solutions Woocommerce, ils offrent une mise à l'échelle automatique, des sauvegardes quotidiennes, un environnement de serveur optimisé pour WooCommerce et un grand nombre de modules complémentaires optionnels.

2. Optimisation des images :

Les images sont le premier facteur influençant le temps de chargement des sites web. De nombreux commerçants négligent cet aspect essentiel du référencement et se contentent d'insérer des images sans aucune optimisation.

Il n'est pas rare de voir des gens télécharger des photos directement de leur appareil photo numérique vers leur site Web, même si elles pèsent plusieurs mégaoctets. Pourtant, il existe des astuces simples pour y remédier !

Il existe plusieurs outils et méthodes qui vous permettent d'optimiser les images. La première astuce consiste à "enregistrer des images pour le Web" lors de la création de visuels avec Photoshop.

Cela leur permet d'être automatiquement optimisés et adaptés au web. Il existe également des outils comme TinyPNG et des plugins de compression d'image disponibles pour supprimer toutes les données inutiles qui augmentent le poids des images.

3. Installez le plug-in de cache :

Vous avez la possibilité de stocker les éléments statiques de vos pages produits côté client. Par exemple le logo. Cela réduit le nombre de requêtes du serveur pour afficher vos pages Web.

Le principe est simple : lors de la première visite sur la boutique WooCommerce, les fichiers statiques sont stockés sur le navigateur de l'utilisateur. A la prochaine visite, la page s'affiche quasi instantanément car il y a moins de requêtes à faire sur le serveur. C'est un moyen puissant d'optimiser le temps de chargement.

Pour tirer parti de la mise en cache, plusieurs sont disponibles pour créer un système de cache : Breeze — plugin de cache WordPress gratuit, par exemple.

4. Intégrez le CDN WordPress :

Le réseau de diffusion de contenu (CDN) est un autre paramètre important pour améliorer les performances des magasins WooCommerce qui n'est pas suffisamment utilisé par les magasins WooCommerce. Le fonctionnement du CDN WordPress est le suivant : au lieu de charger tous les éléments d'une page depuis un seul serveur, on passe par un réseau de serveurs situés dans de nombreux centres de données à travers le monde.

Pourquoi? Plus l'utilisateur est éloigné du serveur, plus le temps de chargement sera long. Grâce à plusieurs serveurs, le CDN peut fournir des pages mises en cache à partir du serveur ou des serveurs les plus proches de chaque visiteur. Votre contenu statique est donc disponible sur un maximum d'endroits à travers le monde.

5. Regroupez les fichiers CSS et JS :

Toujours dans un souci d'alléger au maximum votre boutique, nous vous conseillons de compresser vos fichiers CSS et JS (le plugin de cache Breeze peut le faire). Soyons clairs, les sites web sont désormais alourdis par l'utilisation de plus en plus de code JavaScript et CSS pour fonctionner.

Cela entraîne peu de choses positives mais aussi une augmentation du poids de votre magasin et donc de sa lenteur. Tout comme nous vous l'avons expliqué pour les images, il faut réduire au maximum le poids de ces fichiers en regroupant le code.

6. Utilisez les Sprites CSS :

Améliorer les performances de la boutique WooCommerce signifie également utiliser la technique dite CSS Sprites. Cette pratique, largement utilisée dans les jeux vidéo auparavant (2D), permet d'utiliser une seule image qui en contient plusieurs autres. C'est le webdesigner qui sélectionne l'image qu'il souhaite utiliser pour la propriété « background-position ».

Plus concrètement, imaginez que votre boutique WooCommerce ait Twitter, Facebook, Instagram, Pinterest, RSS et YouTube par exemple. Au lieu d'avoir une image pour chaque bouton, vous pourrez rassembler ces six images dans un seul fichier. Vous pouvez alors utiliser un seul fichier image pour toutes les icônes mentionnées ci-dessus.

7. Allégez les pages au maximum

Comme le dit le proverbe, ce qui compte n'est pas la quantité mais la qualité. Il est recommandé d'éviter de surcharger votre boutique WooCommerce avec trop de vidéos, de sliders, d'images ou même de publicités car cela ralentit considérablement la vitesse de votre boutique. Efficacité ne veut pas dire surcharge, ce qui est plus du domaine du web.

Privilégiez les pages légères et simples, cela ne fera qu'améliorer votre visibilité mais aussi la rapidité de chargement de votre boutique.

8. Optimisation de la base de données :

Les bases de données stockent votre contenu comme vos images de produits, vos articles de blog, vos configurations, etc. Le problème est que pendant qu'elles fonctionnent, elles créent des fichiers lourds qui peuvent être optimisés. C'est pourquoi il est préférable d'optimiser votre base de données WooCommerce. De plus, assurez-vous de configurer votre serveur de base de données.

Alors construisez bien vos tableaux, faites quelques trucs efficaces et fiables (si vous codez à la main) et n'hésitez pas à l'optimiser de temps en temps via des requêtes SQL que vous pourrez trouver sur Internet. Idem, fixez les ratios clients dans votre configuration ainsi que les différents points stratégiques.

Notez que vous pouvez utiliser l'optimisation de la boutique WooCommerce à l'aide du plugin WP-DBManager disponible dans le répertoire des plugins WordPress.

9. Sous-domaines pour les actifs :

Autre optimisation pour les images ou les médias en général : la création de sous-domaines dédiés aux assets. Lorsque vous vous connectez à une page Web, votre navigateur utilise par défaut un certain nombre de connexions de sous-domaine (4, 6, 8 …). C'est une sorte de file d'attente de requêtes HTTP. Cela pose des limites car il doit attendre qu'une requête soit terminée pour pouvoir en lancer une autre.

Cependant, si vous configurez plusieurs sous-domaines pour vos images et vidéos par exemple, cela vous permettra de démarrer plusieurs groupes de connexions HTTP simultanément, ce qui permettra à un côté de les gérer et de créer une file d'attente pour eux : les requêtes "standard".

Et d'autre part, de faire une file d'attente différente pour vos requêtes : « images/assets ». Cela permet de partager les ressources d'une manière ou d'une autre.

10. Activer la compression Gzip :

Lorsqu'un utilisateur accède à votre boutique, un appel est passé à votre serveur pour envoyer les données demandées à afficher. Les données peuvent être des images, des feuilles de style ou des fichiers JavaScript. Inutile de dire que plus la taille des données sera grande et plus il faudra de temps pour les charger dans le navigateur.

Heureusement, la compression Gzip permet de réduire la taille des données. Si Gzip est activé sur votre serveur, la version compressée de la page Web ou du fichier demandé est chargée sur le navigateur.

Ensuite, le navigateur décompresse les données reçues avant de les interpréter. Enfin, la compression Gzip permet de réduire la taille des informations transmises, et donc de réduire considérablement le temps de chargement.

Avec ces 10 façons, vous êtes sûr d'optimiser l'amélioration des performances de la boutique WooCommerce de votre WooCommerce. D'autres techniques peuvent être mises en place pour aller plus loin dans l'optimisation : cache serveur, etc. Mais si vous mettez en place celles dont nous avons parlé dans cet article, alors vous avez déjà fait le gros du travail.

À propos de l'auteur :

Saud Razzak est le responsable de la communauté WordPress chez Cloudways - une plate-forme d'hébergement WooCommerce gérée. Saud est chargé de créer le buzz, de diffuser les connaissances et d'éduquer les gens sur WordPress dans la communauté du monde entier. Pendant son temps libre, il aime jouer au cricket et apprendre de nouvelles choses sur Internet.