Comment accélérer WooCommerce avec WP Rocket et Botiga

Vous avez du mal à accélérer WooCommerce et à créer une boutique à chargement rapide ?

Avoir un magasin rapide est essentiel car les temps de chargement de votre magasin affecteront l'expérience de vos acheteurs, votre classement SEO et même les taux de conversion de votre magasin.

Mais en même temps, les boutiques WooCommerce sont plus difficiles à optimiser que les sites WordPress classiques, ce qui pourrait vous décevoir par les temps de chargement de votre boutique.

Il y a plusieurs raisons, mais deux des plus importantes sont que les magasins WooCommerce utilisent beaucoup plus de bases de données que les sites WordPress classiques et que vous ne pouvez pas mettre en cache toutes les pages de votre magasin.

Cependant, cela ne signifie pas que vous n'avez pas d'options pour créer un magasin plus rapide.

Avec les bons outils, vous pouvez accélérer votre boutique sans nécessiter de connaissances techniques particulières.

Dans ce tutoriel, je vais vous expliquer l'optimisation de la vitesse de WooCommerce de la manière la plus simple que je connaisse : avec le plugin WP Rocket et quelques autres outils et réglages.

En cours de route, je partagerai des données de test de performances réelles afin que vous puissiez voir comment chaque réglage affecte le temps de chargement du magasin.

À la fin, vous devriez avoir un magasin à chargement beaucoup plus rapide - et vous n'aurez pas besoin d'un diplôme en informatique pour tout configurer.

Ça sonne bien ? Accélérons WooCommerce ensemble.

Deux tactiques fondamentales d'optimisation de la vitesse de WooCommerce avant WP Rocket

Dans la section suivante, je vais tout vous dire sur la façon dont vous pouvez utiliser WP Rocket pour accélérer WooCommerce et obtenir une boutique à chargement plus rapide.

Cependant, si vous souhaitez une boutique WooCommerce à chargement rapide, vous devez toujours disposer d'une base de performances solide. Sinon, utiliser WP Rocket, c'est un peu comme mettre du rouge à lèvres sur un cochon.

Fondamentalement, WP Rocket rendra toujours votre magasin plus rapide . Mais si votre fond de teint est trop lent à démarrer, vous aurez toujours un magasin lent. Ce sera juste un peu… "moins lent".

Alors, qu'est-ce qu'une base solide pour les performances de WooCommerce ?

Vous devez clouer ces deux détails :

1. Choisissez un thème WooCommerce plus rapide

Le thème de votre boutique jouera un rôle énorme dans la rapidité de son chargement. Les grands thèmes gonflés chargeront plus de ressources, ce qui ralentira votre site.

D'un autre côté, un thème WooCommerce rapide fera le contraire : il ne chargera que le minimum nécessaire pour créer une boutique attrayante et conviviale.

Nous avons un article dédié où nous avons testé un tas d'options pour trouver les thèmes WooCommerce les plus rapides. Mais, si vous voulez gagner du temps, vous pouvez utiliser notre thème Botiga gratuit :

Dès le départ, Botiga est conçu pour la performance. Il utilise uniquement du JavaScript vanille (pas de dépendances jQuery), minimise son code automatiquement et fait moins de 44,3 Ko prêt à l'emploi.

De plus, tous les sites de démonstration sont construits avec l'éditeur de blocs natif, ce qui signifie que vous n'avez pas besoin d'alourdir votre boutique avec un plugin de création de pages juste pour que votre site ressemble à la démo.

Dans le même temps, Botiga propose un ensemble de fonctionnalités de commerce électronique utiles, notamment les suivantes :

• Plusieurs styles de page de paiement et de panier
• Recherche instantanée de produits pour aider les acheteurs à trouver rapidement des produits
• Recommandations de produits élégantes
• Échantillons de variation de produit
• Mises en page de plusieurs galeries de produits
• Liste de voeux
• Barre d'ajout au panier collante

Botiga a une version gratuite entièrement fonctionnelle ainsi qu'une édition Pro à 69 $ qui ajoute plus de fonctionnalités.

Pour ces raisons, nous allons utiliser Botiga comme exemple pour accélérer notre magasin.

Vous pouvez télécharger Botiga ici ou parcourir les démos pour voir quelques exemples.

2. Utilisez l'hébergement WooCommerce optimisé pour les performances

Au-delà de l'utilisation d'un thème rapide, vous souhaiterez également choisir un hébergement WordPress optimisé pour les performances.

Bien qu'il puisse être tentant d'opter pour l'hébergement le moins cher possible, l'hébergement partagé bon marché n'a généralement pas les ressources nécessaires pour gérer WooCommerce, ce qui entraînera des temps de chargement et des performances médiocres, quoi que vous fassiez.

Là encore, nous avons un article où nous avons testé un tas d'hébergeurs pour trouver l'hébergement WordPress le plus rapide. Si vous êtes pressé, voici quelques bonnes options à considérer :

• Kinsta – lisez notre avis complet sur Kinsta
• WP Engine - Je recommande particulièrement les plans d'hébergement dédiés au commerce électronique qui incluent Elasticsearch (ce qui améliorera considérablement les performances de recherche de produits de votre magasin)
• Cloudways - lisez ma critique complète de Cloudways

Comment accélérer WooCommerce avec WP Rocket

Il est maintenant temps d'utiliser WP Rocket pour attacher les boosters et accélérer le chargement de WooCommerce.

Parce que nous utilisons un hébergement solide et le thème Botiga rapide pour notre boutique, il se charge déjà assez rapidement tout seul. Voici une capture d'écran des mesures de performances de WebPageTest qui montre d'où nous partons sur la page d'accueil :

Cependant, avec WP Rocket, nous pouvons toujours le faire charger plus rapidement. Il existe de nombreux excellents plugins d'optimisation des performances WordPress, alors pourquoi est-ce que je recommande WP Rocket pour WooCommerce ?

Eh bien, vous pouvez lire ma critique complète de WP Rocket pour savoir pourquoi je l'aime, mais voici un bref résumé des points forts :

1. Il a une compatibilité WooCommerce prête à l'emploi . Si WP Rocket voit que vous utilisez WooCommerce, il se configurera automatiquement de manière optimale en ce qui concerne les bases telles que la mise en cache. C'est un énorme avantage, car une configuration incorrecte de la mise en cache sur une boutique WooCommerce peut interrompre les fonctionnalités clés.
2. C'est très facile à utiliser . En plus du point ci-dessus, WP Rocket a généralement une interface simple, une documentation détaillée et un support premium.
3. Cela rend votre site beaucoup plus rapide . J'ai gardé le meilleur pour la fin. WP Rocket fonctionne tout simplement, et il fait un excellent travail pour accélérer le chargement des magasins WooCommerce (et d'autres sites WordPress également). Il possède également des fonctionnalités uniques telles que la possibilité de supprimer les CSS inutilisés et de retarder l'exécution de JavaScript.

WP Rocket est un plugin premium, mais payer 49 $ est un petit prix à payer pour une boutique WooCommerce plus rapide. Il existe une relation directe entre les temps de chargement des pages et les taux de conversion, donc l'accélération de votre boutique peut facilement récupérer votre argent sous la forme d'une augmentation des taux de conversion.

Pour commencer, assurez-vous d'acheter une copie de WP Rocket. Ensuite, voici comment le configurer pour WooCommerce.

1. Installez le plugin pour activer les optimisations de base

Pour commencer, rendez-vous dans votre boutique WooCommerce (ou configurez-la d'abord si vous n'en avez pas encore), puis installez et activez WP Rocket :

Dès que vous activez le plugin WP Rocket, il activera automatiquement les fonctionnalités suivantes pour accélérer votre boutique :

• Mise en cache des pages – WP Rocket exclura également automatiquement le contenu clé de WooCommerce pour éviter les problèmes tout en mettant en cache autant de contenu que possible. Par exemple, il exclura votre panier et vos pages de paiement, entre autres réglages de compatibilité.
• Mise en cache du navigateur
• Compression GZIP
• Prise en charge Cross-Origin pour les polices Web
• Optimisation des fichiers Google Fonts

Sur une boutique WooCommerce, WP Rocket optimisera également automatiquement la requête AJAX get_refreshed_fragments . C'est ce que WooCommerce utilise pour mettre à jour dynamiquement le contenu du panier d'un client.

Encore une fois, ces optimisations se produisent toutes automatiquement, donc votre magasin devrait déjà se charger plus rapidement dès que vous activez WP Rocket.

Voici comment la page d'accueil de notre boutique se charge maintenant sans toucher à un seul paramètre dans WP Rocket :

Vous pouvez voir que le temps de premier octet a été réduit d'environ 450 ms (de 0,509 à 0,043 s), ce qui entraîne une réduction similaire de presque toutes les autres métriques, y compris la plus grande peinture de contenu (LCP). Le temps de peinture le plus important est passé d'environ 1,1 seconde à environ 0,7 seconde.

Cette réduction est principalement le résultat de la mise en cache des pages compatible avec WooCommerce que WP Rocket implémente, bien que les autres ajustements soient également utiles.

2. Configurer les optimisations de fichiers

Bien que WP Rocket active de nombreuses fonctionnalités utiles par défaut, il en existe également d'importantes que vous devrez activer manuellement.

Pour commencer, accédez à l'onglet Optimisation des fichiers dans la zone des paramètres de WP Rocket ( Paramètres → WP Rocket ).

C'est là que vous pouvez optimiser le code CSS et JavaScript de votre boutique, ce qui peut faire une grande différence dans les performances de votre boutique (en particulier en ce qui concerne Core Web Vitals et le score de performance Lighthouse).

Voici les paramètres que je recommande :

Fichiers CSS :

• Minify CSS files – Le thème Botiga minimise déjà son code par défaut, mais cela peut être utile pour minifier le code des plugins que vous utilisez.
• Optimiser la livraison CSS → Supprimer les CSS inutilisés - Cela supprimera les CSS inutiles page par page pour réduire la taille du fichier de chaque page.

Je ne recommande pas de combiner des fichiers CSS, car cela n'est plus vraiment utile maintenant que la plupart des hébergeurs de qualité utilisent HTTP/2.

Fichiers Javascript :

• Réduire les fichiers Javascript
• Chargement JS différé
• Retarder l'exécution de JavaScript

Comme avec CSS, je ne recommande pas de combiner des fichiers JavaScript.

Pour garantir le fonctionnement de votre boutique, vous pouvez ajouter des exclusions au paramètre de délai d'exécution de JavaScript . Cela retarde essentiellement le chargement de tout le JavaScript jusqu'à ce qu'un utilisateur interagisse avec votre site (par exemple, clique ou défile).

C'est idéal pour améliorer votre temps de peinture de contenu le plus important, mais vous pouvez avoir du JavaScript que vous souhaitez charger immédiatement, comme des scripts de suivi (par exemple, Google Analytics ou Google Tag Manager) ou certains plugins que vous utilisez peut-être.

WP Rocket maintient une page détaillée de toutes les exclusions potentielles afin que vous n'ayez pas besoin de comprendre les scripts pour vous exclure. Vous pouvez simplement les copier à partir de cet article d'aide de WP Rocket et les coller dans le champ Fichiers JavaScript exclus .

Par exemple, si vous souhaitez exclure Google Analytics, configurez-le comme suit :

Après avoir fait ces ajustements, vous pouvez voir encore plus d'améliorations. La taille de la page de notre page d'accueil a été réduite d'environ 80 Ko et le temps de peinture le plus important a encore chuté, passant de ~ 0,7 seconde à ~ 0,5 seconde.

3. Optimisez vos médias

À ce stade, vous avez extrait la plupart des performances de WP Rocket. Cependant, il existe quelques autres zones de paramètres que vous voudrez peut-être explorer pour apporter des modifications supplémentaires.

Dans l'onglet Média , je recommande d'activer le chargement différé et les dimensions d'image manquantes. Le premier vous aidera avec les performances et le second peut réduire les problèmes avec Cumulative Layout Shift (CLS) pour améliorer encore les performances de vos Core Web Vitals :

4. Ajouter un réseau de diffusion de contenu (pour les magasins mondiaux)

Un réseau de diffusion de contenu (CDN) vous permet d'accélérer les temps de chargement de votre boutique en mettant en cache des actifs statiques tels que des images et des scripts sur un réseau de serveurs mondiaux.

Ensuite, les visiteurs peuvent télécharger ces fichiers statiques à partir du serveur physiquement situé le plus près d'eux, ce qui réduit les temps de téléchargement et accélère votre boutique.

Si votre magasin ne cible que les acheteurs d'une zone géographique spécifique, par exemple au Royaume-Uni, vous ne remarquerez probablement pas beaucoup d'avantages d'un CDN.

Mais si vous ciblez des acheteurs du monde entier, par exemple au Royaume-Uni et aux États-Unis, un CDN est une autre excellente option pour accélérer WooCommerce.

Dans la section CDN , WP Rocket vous propose deux options pour ajouter un CDN à votre boutique :

1. Vous pouvez utiliser le service officiel RocketCDN, qui ne coûte que 7,99 $ par mois pour une bande passante illimitée. Il est basé sur le réseau mondial de StackPath. C'est l'option la plus simple car elle propose une configuration automatique.
2. Vous pouvez intégrer n'importe quel CDN tiers en demandant à WP Rocket de réécrire vos URL. Les options populaires sont StackPath, KeyCDN, Bunny CDN, CloudFront et autres.

Si vous ne vous sentez pas à l'aise pour configurer votre propre CDN, je vous recommande d'utiliser le service RocketCDN, car il offre un bon rapport qualité-prix puisque vous obtenez une bande passante illimitée pour un prix forfaitaire :

Dépannage des problèmes avec WP Rocket sur WooCommerce

Bien que suivre les instructions ci-dessus devrait conduire à une boutique WooCommerce plus rapide sans aucun problème, il existe de rares scénarios dans lesquels vous pourriez rencontrer des problèmes mineurs.

L'exemple le plus courant serait les problèmes avec certains types de contenu dynamique tels que les listes de souhaits des utilisateurs, les articles récemment consultés ou le contenu spécifique à un lieu (par exemple, des prix différents pour différents pays).

Par exemple, si un utilisateur visite un produit qu'il a ajouté à sa liste de souhaits, vous souhaiterez peut-être l'afficher sur la page du produit. Mais dans certains cas, la mise en cache peut conduire à un comportement bancal ici.

Alors, comment pouvez-vous résoudre ce problème ? Passons en revue quelques conseils.

Tout d'abord, essayez d'utiliser des plugins de contenu dynamique codés de manière compatible avec le cache. Cela signifie essentiellement que le plugin génère son contenu dynamique en utilisant JavaScript ou AJAX au lieu de PHP.

Si vous n'êtes pas sûr, vous pouvez contacter le développeur du plugin où vous rencontrez des problèmes. Certains plugins incluent des outils de compatibilité intégrés. Par exemple, le plugin YITH WooCommerce Wishlist a un paramètre pour activer le chargement AJAX, ce qui résoudra tous les problèmes de mise en cache.

L'équipe WP Rocket a également créé des plugins/outils de compatibilité pour les plugins WooCommerce populaires qui pourraient causer des problèmes :

• Plug-in de liste de souhaits YITH WooCommerce
• Widget WooCommerce natif des produits récemment consultés
• Plugin YITH WooCommerce Produits récemment consultés

Si les correctifs ci-dessus ne sont pas une option, un autre correctif potentiel consiste à ajouter une règle d'exclusion de cache qui cible le cookie défini par le plug-in. C'est plus avancé, mais cela vous permettra de contourner le cache pour les utilisateurs qui ont besoin de voir du contenu dynamique.

Vous pouvez essayer de trouver des informations sur les cookies dans la documentation du plugin ou engager un développeur pour le découvrir pour vous. Ensuite, vous pouvez configurer des règles d'exclusion du cache des cookies dans la zone Règles avancées de WP Rocket :

Autres plugins utiles d'optimisation de la vitesse WooCommerce au-delà de WP Rocket

WP Rocket peut faire presque tout ce dont vous avez besoin pour optimiser les performances de WooCommerce. Mais il y a une exception principale :

Images!

Votre magasin aura probablement une tonne d'images de produits. Et si vous ne faites pas attention, ces images de produits peuvent ralentir votre boutique (en particulier vos pages de produits et de boutique).

La solution consiste à optimiser les images de votre site en les compressant et en les redimensionnant. Vous pouvez y parvenir automatiquement en utilisant un plugin d'optimisation d'image.

Nous avons un article complet sur les meilleurs plugins d'optimisation d'image WordPress, mais voici quelques-unes des meilleures options :

• Imagify – ce plugin vient du même développeur que WP Rocket
• ShortPixel - c'est le plugin que j'utilise sur mes propres sites
• WP Compress – une autre option de haute qualité ; en savoir plus dans notre revue WP Compress

Au-delà des images, un autre outil utile pour les grands magasins est un certain type de solution de recherche de produits.

Si vous avez beaucoup de produits, la recherche de produits peut être très gourmande en ressources car elle entraîne de nombreuses requêtes de base de données lourdes.

Vous pouvez résoudre ce problème en utilisant des solutions de recherche hors serveur telles que Elasticsearch (via le plugin ElasticPress) ou Jetpack Search (qui est également basé sur Elasticsearch, mais plus simple à mettre en œuvre).

Accélérez votre boutique WooCommerce aujourd'hui

Si vous voulez que votre boutique WooCommerce soit un succès, il est important qu'elle se charge rapidement.

Pour préparer votre boutique au succès, il est important de commencer par établir une base solide :

1. Choisissez un thème WooCommerce à chargement rapide tel que le thème Botiga gratuit.
2. Utilisez un hébergement WordPress aux performances optimisées comme Kinsta ou WP Engine.
3. Configurez les fondations de votre site de commerce électronique.

À partir de là, WP Rocket peut vous aider à mettre en œuvre un certain nombre d'optimisations de performances WooCommerce, notamment la mise en cache compatible WooCommerce, l'optimisation CSS et JavaScript, etc.

Si vous ajoutez également un plugin d'optimisation d'image pour optimiser les images de vos produits, vous devriez être prêt à utiliser une boutique WooCommerce légère et rapide.

Avez-vous encore des questions sur la façon d'accélérer WooCommerce avec WP Rocket et Botiga ? Faites le nous savoir dans les commentaires!