10 astuces pour améliorer la vitesse de votre site WooCommerce

Est-ce que votre boutique WooCommerce prend trop de temps à charger? La performance est cruciale au succès d’un site de commerce électronique. Les statistiques démontrent que que le taux d’abandon augmente avec le temps de chargement de la page. Selon douze études de cas, chaque accélération de 1 seconde de la vitesse de transmission augmente les ventes de 7% en moyenne.

Voici 10 choses que vous pouvez implanter afin d’améliorer la performance de WooCommerce:

  1. Utilisez le bon type d’hébergement web;
  2. Utilisez un réseau de diffusion de contenu (CDN);
  3. Activez PHP 7.2+ et PHP-FPM dans cPanel;
  4. Activez le module OPCache;
  5. Désactivez la compression PHP;
  6. Activez la compression GZip dans Apache;
  7. Définissez les en-têtes HTTP Cache-Control et Expires;
  8. Installez les outils de performance de Jetpack;
  9. Installez et configurez WP Super Cache;
  10. Combinez et minifiez les fichiers CSS et Javascript.

Commençons donc sans plus tarder.

1. Utilisez le bon type d’hébergement web

Tout d’abord, vous devez déterminer le type de service d’hébergement Web adapté à votre site. J’utilise principalement trois (3) mesures pour évaluer les ressources nécessaires à un site WooCommerce:

  1. Le nombre de produits dans le catalogue;
  2. Le nombre de langues;
  3. Le nombre moyen de visiteurs concurrents aux heures de pointe.

Lorsque vous avez une boutique multilingue, vous devez multiplier le nombre de produits par le nombre de langues. Les plugins multilingues, tels que WPML, copient chaque item dans un nouveau post WordPress pour chaque traduction. La multiplication rapide du nombre de posts peut entraîner une dégradation des performances.

Commençons par évaluer ce qu’il faut pour héberger votre site WooCommerce. Cette évaluation est basée sur le nombre de produit au total (y compris les traductions):

ProduitsTypes d’hébergement webPrix mensuel
1 à 100
  • Minimum: Hébergement mutualisé
  • Recommandé: VPS avec 2 coeurs de CPU, 4GB RAM, et cPanel
$8.95 – $49.95
100 à 500
  • Minimum: VPS avec 2 coeurs de CPU, 4GB RAM, et cPanel
  • Recommandé: VPS avec 4 coeurs de CPU, 8GB RAM, et cPanel
$49.95 – $79.95
500 à 5000
  • Minimum: VPS avec 4 coeurs de CPU, 8GB RAM, et cPanel
  • Recommandé: Serveur d’entrée de gamme avec processeur Quad-Core, 8GB RAM, cPanel
$79.95 – $120.00
5000 à 20,000
  • Minimum: Serveur d’entrée de gamme avec processeur Quad-Core, 8GB RAM, cPanel
  • Recommandé: Serveur dédié avec processeur Dual Quad-Core, 16GB RAM, cPanel
$120.00 – $200.00

Bien entendu, cela peut varier en fonction de l’optimisation de votre installation WooCommerce et du trafic reçu.

Ne vous laissez pas avoir par les stratégies de marketing des sociétés d’hébergement qui prétendent offrir «l’hébergement WooCommerce». La vérité est que la plupart de ces hébergeurs proposent un hébergement Web régulier. Cela ne veut pas dire qu’il s’agit d’un mauvais hébergeur, mais plutôt que la compagnie n’a pas nécessairement d’expertise avec WooCommerce.
Si vous décidez d’opter pour l’hébergement web partagé, assurez-vous que votre hébergeur assure le support expert WooCommerce 24 × 7. Les services d’hébergement WordPress Premium tels que WP Engine ou iThemes ont de véritables experts WooCommerce sur place à tout moment. Ne négligez pas cet aspect.

2. Utilisez un réseau de diffusion de contenu

Un réseau de diffusion de contenu, aussi connu son acrnonyme anglophone CDN, distribue le contenu de votre site Web à partir de plusieurs serveurs à travers le monde. Cette distribution permet à vos visiteurs de charger votre site Web à partir d’un serveur situé à proximité.

Les deux types de services CDN pour sites web

Il est important de faire la distinction entre les deux principaux types de services CDN. Dans un premier temps, il y a les services CDN tels que Cloudfront et StackPath. Ce type de service sert à distribuer tous les fichiers de votre site web à l’exception des fichiers HTML. Cela signifie que les pages web sont toujours servies par le serveur d’origine.

Dans un second temps, il y a les réseaux de diffusion de contenu tels que Sucuri et et Incapsula. Ces services mettent en cache chaque page de votre site web afin de servir celles-ci depuis un emplacement à proximité des visiteurs. Il s’agit de services de protection DDoS combinés à un CDN. Lorsqu’un site web est protégé par un tel type de service, le serveur d’origine n’est jamais sollicité directement par les visiteurs. Les requêtes HTTP sont toujours filtrées par le service protection.

Ceci dit, la question n’est pas de savoir lequel de ces services est le meilleur. Ils sont complémentaires. Vous pouvez – et devriez – utiliser les deux.

Voici pourquoi:

Il est recommandé que les fichiers JavaScript, CSS, et les images soient chargés depuis un nom d’hôte différent de votre nom de domaine principale. Cela permettre d’accroître le nombre de téléchargements en parallèle. Prenons par exemple une feuille de style CSS située à cet URL:

https://www.votresiteweb.com/wp-content/themes/my_theme/style.css

Afin de charger ce fichier en parallèle, il serait alors chargé depuis un URL appartenant au CDN. Par exemple:

https://d20y2o35bn5m47.cloudfront.net/wp-content/themes/my_theme/style.css

En combinant les deux services de CDN, on obtient donc sécurité et rapidité accrue sur tous les angles.

3. Activez PHP 7.3+ et PHP-FPM dans cPanel

PHP 7.3 est plus rapide que tous ses prédécesseurs. Cependant, il ne gère pas les fonctions obsolètes de PHP 5.x telles que PHP 7.0 et 7.1 le font. Par conséquent, si vous utilisez un ancien thème WordPress ou de vieux plugins, vous pourriez rencontrer des problèmes de compatibilité avec PHP 7.3.

Voici comment activer PHP 7.3 et PHP-FPM à partir de votre compte cPanel:

  1. Connectez-vous à votre compte cPanel.
  2. Cliquez sur l’icône Gestionnaire MultiPHP.
  3. Sélectionnez votre nom de domaine dans la liste.
  4. Sélectionnez PHP 7.3 (ea-php73) dans la liste déroulante.
  5. Cliquez sur «Appliquer».

Voici à quoi ressemble le Gestionnaire MultiPHP:

Lorsque vous modifiez la version de PHP pour votre site Web, celui-ci sera indisponible pendant quelques secondes tout au plus. Ne vous inquiétez donc pas. Si vous rencontrez un problème de compatibilité avec PHP 7.3, revenez à la version précédemment configurée.

4. Activez le module OPCache

Le module OPcache compile et met en cache les scripts PHP pour améliorer leur temps d’exécution. Afin d’activer ce module, vous devez avoir un accès « root » au serveur web. Si ce n’est pas le cas, contactez votre fournisseur d’hébergement web pour qu’il le fasse pour vous.

Voici comment procéder:

  1. Connectez-vous au panneau de contrôle WHM.
  2. Cliquez sur EasyApache 4 depuis le menu principal.
  3. Cliquez sur Customize depuis la section Currently Installed Packages afin de modifier le profile en cours.

  4. Cliquez sur PHP Extensions et effectuez une recherche pour « opcache »:

  5. Activez le module OPcache pour chacune des versions de PHP disponible.
  6. Cliquez sur Review depuis la colonne de gauche puis ensuite sur Provision.

EasyApache procédera à l’activation du module OPcache. Aucune autre configuration n’est requise.

5. Désactivez la compression PHP

Oui, vous avez bien lu: il est préférable de désactiver la compression effectuée par PHP. Plusieurs webmestres activent cette option par défaut et ce, avec raison. La compression PHP diminue la taille du contenu HTML généré grâce a Gzip. Cela améliore la vitesse de chargement des pages web.

Toutefois, il est préférable d’utiliser la compression du contenu au niveau du serveur web. Lorsque la compression Gzip est activée au niveau d’Apache, il est possible de compresser tous types de médias incluant les images, fichiers Javascipts, et les feuilles de style CSS. En désactivant la compression PHP, le temps d’exécution s’en trouvera amélioré.

Voici comment désactiver la compression PHP:

  1. Connectez-vous au panneau de contrôle cPanel de votre site web.
  2. Cliquez sur Éditeur INI MultiPHP.
  3. Cliquez sur l’onglet Mode de base puis sélectionnez votre site web dans la liste déroulante.
  4. Défilez jusqu’à la fin du fichier de configuration et désactivez l’option zlib.output_compression.
  5. Cliquez sur Appliquer.

Maintenant que la compression est désactivée au niveau de PHP, passons à l’activation de celle-ci sur Apache.

6. Activez la compression GZip dans Apache

La compression Gzip diminue le temps de chargement des pages en diminuant la tailles des fichiers envoyés aux visiteurs. Afin de procéder, modifiez le fichier .htaccess qui se trouve dans le dossier-racine de votre site web. Il s’agit habituellement du répertoire public_html.

Avant de modifier votre fichier .htaccess, assurez-vous de créer une copie de sauvegarde. Insérez maintenant le code suivant au début du fichier .htaccess:

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE

<IfModule mod_headers.c>
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>

AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/eot
AddOutputFilterByType DEFLATE font/woff
AddOutputFilterByType DEFLATE font/truetype
AddOutputFilterByType DEFLATE font/opentype
</IfModule>

Sauvegardez le fichier puis chargez votre site. Si vous obtenez une erreur 5xx, remettez en place la copie de sauvegarde immédiatemment.

7. Définissez les en-têtes HTTP Cache-Control et Expires

WooCommerce utilise bon nombre de feuilles de styles CSS et de documents Javascripts. De plus, chaque page contient plusieurs images, que ce soit dans une liste de produits ou une page de produit. Tous ces fichiers causent beaucoup de requêtes au serveur web, ce qui augmente le temps de chargement.

Afin d’éviter que chaque fichier soit chargé lors de chaque accès, il est nécessaire de définir les entêtes de cache HTTP. Ces entêtes indiquent aux navigateurs web quels fichiers doivent être cachés et pour quelle durée ils doivent demeurer en cache.

Pour définir ces entêtes HTTP, modifiez le fichier .htaccess se trouvant à la racine de votre site web, puis ajoutez-y ces lignes au tout début:

<IfModule mod_headers.c>
# 1 YEAR
<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf|woff|woff2)$">
Header set Cache-Control "max-age=29030400"
</FilesMatch>

# 1 WEEK
<FilesMatch "\.(js|css|swf)$">
Header set Cache-Control "max-age=29030400"
</FilesMatch>

# 24 HOURS
<FilesMatch "\.(html|htm|txt|php)$">
# Header set Cache-Control "max-age=86400"
</FilesMatch>

# NO CACHE CONTROL
<FilesMatch "mediamap.txt$">
Header set Cache-Control "no-cache, must-revalidate"
</FilesMatch>
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10800 seconds"
ExpiresByType font/opentype A29030400
ExpiresByType font/truetype A29030400
ExpiresByType font/eot A29030400
ExpiresByType image/gif A29030400
ExpiresByType image/png A29030400
ExpiresByType image/jpeg A29030400
ExpiresByType image/x-icon A29030400
ExpiresByType application/pdf A29030400
ExpiresByType application/x-javascript A29030400
ExpiresByType text/plain A86400
ExpiresByType text/css A29030400
ExpiresByType application/xml A604800
ExpiresByType text/html A86400
</IfModule>

Visitez votre site web pour vous assurer que celui-ci charge correctement.

8. Installez les outils de performance de Jetpack

Jetpack est une extension développée par l’équipe de WordPress. Cette extension ajoute des fonctionnalités supplémentaires à WordPress et offre aussi options d’optimisation.

Pour installer Jetpack, connectez-vous au tableau de bord de votre site WordPress. Cliquez sur Extensions > Ajouter. Dans le champ de recherche, tapez Jetpack. Cliquez ensuite sur le bouton Installer puis activez ensuite l’extension.

Une fois Jetpack activé, cliquez sur Configurez Jetpack maintenant. Vous serez alors redirigé vers WordPress.com afin de vous authentifier. Si vous n’avez pas de compte WordPress, vous devrez en créer un avant de pouvoir utiliser Jetpack.

Une fois Jetpack associé à votre compte WordPress, vous serez invité à choisir un forfait. Défilez jusqu’au bas de la page puis cliquez sur Start with free.

Le caractéristiques du forfait gratuit sont limitées mais ce sera suffisant pour optimiser votre site WooCommerce.

Activez l’accélérateur de site Jetpack

L’accélérateur de site de Jetpack diminue le temps de chargement de votre site en hébergeant les images, les fichiers CSS, et les fichiers Javascript sur leur réseau de diffusion de contenu. Ceci permet aux visiteurs de télécharger les différentes composantes de votre site web depuis un serveur situé à proximité.

Pour activer l’accélérateur de site, cliquez sur Jetpack > Réglages puis sélectionnez l’onglet Performance. Utilisez les réglages ci-après:

Chargement optimisé des images

Aussi connue sous le nom de lazy loading, cette technique d’optimisation fait en sorte que les images d’une page web ne sont téléchargées que lorsqu’elle sont dans une zone visible. Par conséquent, lors du chargement initial de la page, seuls les images se trouvant au-dessus du « pli » (above the fold) sont téléchargées.

Soyez toutefois prudent avec le « lazy loading »: cette technique de chargement peut parfois briser les carrousels d’images.

Désactivez les modules Jetpack inutilisés

L’extension Jetpack peut elle-même affecter la vitesse de chargement de votre site si elle n’est pas configurée correctement. Par défaut, Jetpack active plusieurs modules. Il est préférable de désactiver ceux-ci afin de réduire le nombre de fichiers Javascript et CSS requis.

Pour désactiver des modules Jetpack, cliquez sur Jetpack > Tableau de bord. Défilez jusqu’à la toute fin de la page puis cliquez sur Débogage dans le pied de page.

Sur la page suivante, cliquez sur Accédez à la liste complète des modules Jetpack disponibles sur votre site. Si vous souhaitez utiliser certains modules Jetpack, laissez-les activés. Par contre, si vous ne voulez qu’optimiser le chargement de votre site, seuls les modules suivants sont nécessaires:

  • Asset CDN
  • Lazy Images
  • Image CDN
  • Photon
  • Protect
  • Site Verification

Désactivez tous les autres modules dont vous n’avez pas besoin puis sauvegardez les changements.

9. Installez WP Super Cache

Pour éviter de générer dynamiquement chaque page de votre site à chaque accès, utilisez le plugin WP Super Cache. Cette extension met en cache une copie statique de chacune de vos pages Web pour un temps de chargement plus rapide.

Depuis le tableau de bord WordPress, cliquez sur Extensions > Ajouter puis faites une recherche pour wp super cache. Installez puis activez l’extension.

Afin de configurer WP Super Cache, cliquez maintenant sur Réglages > WP Super Cache. Sous l’onglet Easy, sélectionnez Mise en cache activée.

Sélectionnez maintenant l’onglet Avancé. Ne cochez que les options suivantes dans la section Statuts:

  • Mise en cache: Enable Caching
  • Cache Delivery Method: Simple
  • Divers:
    • Ne pas mettre en cache les pages pour les utilisateurs connus;
    • Don’t cache pages with GET parameters;
    • Reconstruction du cache;
    • 304 Not Modified browser caching;
    • Mobile device support;
    • Clear all cache files when a post or page is published or updated;
    • Extra homepage checks.

Cliquez sur Mettre à jour les statuts pour sauvegarder la configuration. Demeurez sous l’onglet Avancé. Défilez la page jusqu’à la section Date d’expiration & éboueur. Entrez les valeurs comme suit:

Cliquez sur Modifier le délai d’expiration pour sauvegarder les changements.

La prochaine partie est cruciale pour le bon fonctionnement de WooCommerce. Toujours sous l’onglet Avancé, défilez jusqu’à la section Noms de fichiers acceptés & URIs rejetées. Entrez  les lignes suivantes:

/cart/
/my-account/
/checkout/
/addons/

Si vous avez modifié les permaliens de WooCommerce pour une ou toute ces pages, assurez-vous de les ajouter à cet endroit aussi.

Sauvegardez maintenant les chaînes ajoutées.

Finalement, activez le préchargement. Cliquez sur l’onglet concerné puis cochez seulement Preload mode. Vous pouvez aussi définir le cycle de préchargement des pages au même endroit. Enregistrez les changements encore une fois.

W3 Total Cache et WP Fastest Cache s’avèrent deux autres extensions de cache pour WordPress aussi très performantes.

10. Combinez et minifiez les fichiers CSS et Javascript

En combinant les fichiers CSS et Javascript, le nombre de requêtes effectuées sera grandement diminué. Il faut toutefois être prudent: bien qu’il soit sécuritaire de combiner des fichiers CSS, il n’en est pas autant pour les fichiers Javascript. Il arrive que la minification et la combinaison des documents Javascript rendent un site web inutilisable.

Pour combiner et minifier les fichiers, nous allons utiliser un plugin nommé Fast Velocity Minify. Depuis le tableau de bord WordPress, cliquez sur Extensions > Ajouter puis cherchez le nom du plugin en question. 

Plugin de minification WordPress

Une fois le plugin activé et installé, cliquez sur Réglages > Fast Velocity Minify. Activez seulement les options suivantes:

  • Functionality
    • Admin Bar Purge
    • Fix Page Editors
  • URL Options
    • Force HTTPS URLs (recommended if you have SSL)
  • HTML Options
    • Cleanup Header
  • Font Options
    • Disable Google Fonts merging
  • Font Awesome
    • Merge or Inline Font Awesome CSS
  • CSS Options
    • Preserve the order of CSS files
    • Inline CSS in the footer
  • Render-blocking JS
    • Skip deferring the jQuery library
    • Skip deferring JS on the login page

Sauvegardez la configuration. Cliquez ensuite sur le bouton FVM Purge dans la barre d’état WordPress. Cela videra la cache de WP Super Cache ainsi que celle de Fast Velocity Minify.

Si vous rencontrez des problèmes d’exécution avec Javascript, cochez les options suivantes:

  • Disable JavaScript processing
  • Disable minification on JS files

Sauvegardez de nouveau la configuration puis videz encore la cache.

En terminant

Suivez la performance de votre site WooCommerce tout au long du processus d’optimisation. Testez la vitesse de votre site web avec des outils tels que WebPageTest.org et GTmetrix à chaque étape. Vous pourrez ainsi identifier d’autres causes de lenteur.

Si vous êtes expérimenté avec CentOS Linux et cPanel, installez le module PageSpeed pour Apache. Ce module offre de multiple filtres permettant d’optimiser les fichiers CSS, JS, ainsi que les images.

Avez-vous d’autres astuces pour améliorer la performance de votre site WooCommerce? Laissez-nous savoir en commentaire!

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.