Optimiser la vitesse de son site Wordpress et Woocommerce

Optimiser la vitesse de son site WordPress et Woocommerce

Chercher à optimiser la vitesse de son site, que ça soit sur WordPress, Woocommerce ou un autre CMS est une étape indispensable pour rester dans la compétition du référencement des moteurs de recherche.
Chercher à optimiser la vitesse de son site, que ça soit sur WordPress, Woocommerce ou un autre CMS est une étape indispensable pour rester dans la compétition du référencement des moteurs de recherche.

Chercher à optimiser la vitesse de son site, que ça soit sur WordPress, Woocommerce ou un autre CMS est une étape indispensable pour rester dans la compétition du référencement des moteurs de recherche.

GTMetrix

Un site peut avoir le meilleur contenu, mais s’il est très lent, le taux de rebond sera trop important pour que Google vous laisse conserver vos places et agacera fortement vos lecteurs / clients.

Un site rapide c’est s’assurer de :

    • Garantir une expérience utilisateur fluide : L’idéal c’est que l’utilisateur puisse naviguer à travers les pages facilement, générer une conversion avant qu’il ou elle craque.
    • Générer des bonnes statistiques sur Analytics : En effet, un site lent aura tendance à faire retourner sur Google vos visiteurs pendant qu’il charge.
    • Ne pas bloquer son SEO juste à cause d’un site lent !

Avant de commencer

Si vous arrivez ici, il y a probablement quelque chose qui cloche sur votre CMS, qu’il soit sous WordPress, Drupal ou Prestashop on fera du monitoring et les maintenances nécessaires pour rendre votre site plus rapide !

Monitorer avec GTMetrix

Avant d’entreprendre toute installation ou configuration, nous prendrons le temps de voir comment interpréter les résultats qui donnent de mauvais scores. C’est le site que j’utilise tout le temps pour vérifier la vitesse et voir ce qui pourrait bloquer un affichage ou avoir un rendu détaillé du déroulement des chargements de fichiers.

Entrez l’url de la page à vérifier, pensez à sélectionner le serveur qui conviendrait le mieux pour votre localisation. Dans notre cas on utilisera Londres (le plus proche de la France dans la liste) :

Optimiser la vitesse de son site WordPress GTMetrix

GTMetrix regroupe deux indicateurs, Yslow de Yahoo et PageSpeed de Google, ils ont pour rôle de rendre un rapport sur la vitesse du site scanné, les potentiels blocage de rendu

Comment optimiser la vitesse de son site ?

Pour optimiser la vitesse de son site, il faudra mettre les mains dans les plugins et plus important : coté serveur !

Côté WordPress

    • Trouver les plugins qui ralentissent le site
      0
      Quel plugin ralenti votre site ?x
      :
      Commencez par désactiver tous les plugins et activez-les un à un tout en utilisant GTMetrix à chaque activation pour cibler les plugins lent.
    • Désactiver des plugins : Ne négligez pas cette partie, si vous en avez plus de ~15 actifs pour un blog ou plus de ~30 pour un Woocommerce essayez de désactiver au maximum les plugins optionnels ou qui ralentissent trop, si vous voulez conserver un plugin mais qu’il est lent, tentez de trouver une alternative.

Les outils / plugins

    • Autoptimize : Un monstre pour tout WordPress ou Woocommerce, Il compressera les fichiers selon vos besoins : compression, concaténation et cache des fichiers javascript / css je l’ai d’ailleurs mit dans les 9 plugins indispensables pour WordPress.
    • LiteSpeed Cache ou WP Fastest Cache : Si vous souhaitez une solution plus complète avec des exclusions du cache pour certaines pages et optimisation des images… Désinstallez Autoptimize si vous utilisez ceux-ci.

Encore plus de vitesse :

(optionnel) Si votre site internet propose beaucoup d’images, armez-vous d’un second serveur qui fournira les images pour votre site : un CDN (Content Delivery Network)

Je vous conseille de compresser vos images à la main grâce à tinypng pour éviter d’installer un autre plugin.

Côté serveur (Gzip)

Il faudra tout d’abord savoir sur quoi tourne votre installation, linux ou windows et pour le serveur php ngninx ou apache. Informez la personne en charge de votre serveur si vous n’avez pas accès au terminal de commande.

On peut trouver ces informations directement dans WordPress : Outils > Santé du site > onglet Informations > menu Serveur.

Le plus probable sera une architecture linux pour le serveur et Apache ou Nginx pour le serveur web, on détaillera la mise en place Gzip sur ces deux derniers types. Une documentation IIS est disponible pour des installations sous serveur Windows.

Qu’est-ce que la compression GZIP ?

Le GZIP est un Game changer, une requête plus grosse que plein de petites requêtes sera toujours plus rapide, vous aurez peut-être fait attention, a taille équivalente, un seul fichier sera toujours rapide à copier que plusieurs.

Le blog avec Gzip et Autoptimize :

Optimiser la vitesse de son site WordPress GTMetrix
Gzip + Autoptimize

Le blog avec uniquement Autoptimize :

Blog compression autoptimize
Autoptimize

Le blog sans Gzip et sans Autoptimize :

Optimiser la vitesse de son site avec et sans Gzip
Pas de Gzip – pas d’Autoptimize

On se rend compte qu’avec ces résultats, la compression serveur est une option non négociable pour avoir de bons résultats sur ces indicateurs.

D’ailleurs on remarquera que l’outil de google (PageSpeed) est bien plus punitif qu’Yslow en matière de compression avec un gain de 37% contre seulement 16% pour Yslow. Google le veut absolument activé, une manière de forcer des pages légères pour mobile, tandis qu’Yslow relativise en donnant une note moyenne relative au temps d’affichage / taille du site jugé « acceptable ».

Mettre en place la compression GZIP

Pour les serveurs Linux + Apache :

Vérifier si le module mod_deflate est activé dans le fichier de configuration Apache

vim /etc/httpd/conf/httpd.conf

Ouvrez-le et si la ligne ci-dessous est présente et sans # devant, nous pourrons passer à la suite.

LoadModule deflate_module modules/mod_deflate.so

Optimiser la vitesse de son site WordPress et Woocommerce
Apache – httpd.conf – deflate_module

Si votre deflate_module était en commentaire (#) redémarrez votre service Apache avec :

Cent OS :

sudo service httpd restart

Ubuntu :

sudo /etc/init.d/apache2 restart

Debian :

Maintenant il ne reste plus qu’a insérer nos « filtres » du deflate_module dans notre .htaccess :

<IfModule mod_deflate.c>
  # Compression du HTML, CSS, JavaScript, Text, XML et les polices
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Retire les bugs pour les (très) anciens navigateurs
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Pour les serveurs Linux + Nginx :

Nginx dispose de la configuration gzip par défaut, vous n’auriez rien à faire de plus que de l’activer dans le gzip.conf , comme pour la configuration Apache, on spécifie le type de fichiers à compresser.

# vim /etc/nginx/conf.d/gzip.conf
gzip on;
gzip_min_length  100;
gzip_buffers  8 32k;
gzip_types  text/plain text/css application/x-javascript text/xml application/xml text/javascript;
gzip_vary on;

Une fois les configuration rentrées, on redémarre le service Nginx

# systemctl restart nginx

Attention : Avec Gzip, ne compressez pas les images et fichiers binaires tels que les pdf, fichiers excel… La compression n’aura aucun effet et pourront impacter la charge CPU.

Les bonnes pratiques
0
Quelles autres mesures avez-vous pris pour augmenter la vitesse de votre site ?x

Chaque image chargée est une requête : Pensez à réduire le nombre d’articles affichés, évitez d’afficher des galeries trop importantes et retirez des produits sur votre accueil si c’est un site E-commerce

Synthèse

    1. Monitoring : On analyse nos pages
      0
      Quelle est votre note PageSpeed et Yslow ?x
    2. On supprime un maximum de plugins
      0
      Combien avez-vous de plugins actifs ?x
    3. On installe un plugin pour minifier / concaténer, compresser et mise en cache
    4. On met en place GZIP sur notre serveur

Si vous n’avez pas du tout accès au serveur, fournissez cet article à celui ou celle qui est en charge de l’installation 😉

Voilà vous avez la possibilité avec ces petites manipulations d’accélérer drastiquement la vitesse de votre site / plateforme E-commerce qui reste un élément indispensable pour un bon référencement sans pénalisations.