Performance – Une alternative aux plugins pour la compression des images

Compresser ? Pour quoi faire ?

Votre site commence a afficher quelques années au compteur, il a plusieurs pages et un blog. Et des dizaines d’images sont stockées dans la bibliothèque média…Ces images ont été téléchargées « brut de fonderie », sans optimisation, sans compression, elles font plus de 2000px de large et pèse plusieurs MO pour…servir de miniature. Alors oui wordPress fait un truc formidable c’est qu’il recrée plusieurs formats de votre image pour adapter un peu mais…

Les images sont le suspect n°1 quand un site devient trop lent

Quasiment la moitié du temps de chargement d’une page ( lors d’une première visite après le cache navigateur fait quand même son job) est consacré aux images ! Et vous vous doutez : plus elles sont lourdes, plus ça prend du temps. Résultat lorsque c’est trop long, on s’agace, on abandonne et on clique sur le site suivant.

Les différentes solutions pour alléger les images

Les plugins

Je ne vais pas tous les répertorier parce qu’il y en a pléthore juste citer les plus gros, wp smush, imagify, shortpixel , EWWW . Il y a des avantages à les utiliser, installation facile, la plupart ont une offre gratuite jusqu’à un certain nombre d’images. Mais il y a aussi des inconvénients, quasiment tous sont sur des versions premium par abonnements pour avoir accès à leur API à des tarifs plus ou moins abordables, et puisqu’on parle de performances installer un énième plugin sur votre WordPress n’arrange en général pas vos affaires de ce côté là.

Squoosh

Avec cet outil mis à disposition par google on va pouvoir traiter les images par batch soit avant de les uploader dans sa bibliothèque média soit en curatif sur les différents dossiers « upload » de WordPress , avec des paramètres de compression intégralement contrôlés (couleurs, format, etc). Pour exécuter les commandes en batch vous aurez besoin d’avoir nodeJs installé sur votre machine.

Définir les paramètres de compression

Aller sur squoosh et glisser/déposer une des images du dossier.

écran d'accueil de l'appli Squoosh

Régler les paramètres, je vous conseille de rester sur mozJPEG pour le format ( un jour le WebP sera supporté absolument partout ! Coucou apple ! ), de ne pas choisir le resizing si c’est un traitement curatif (comme dit plus haut WordPress recrée plusieurs formats de vos images qui seraient écrasés au nouvelles dimensions), de réduire la qualité aux alentours de 56 et de baisser le nombre de couleurs. La barre au centre vous permet de contrôler la différence avant/après. Nous sommes déjà à une belle réduction de poids !

Vous pouvez copier la commande avec tous les paramètres en cliquant sur le rectangle à côté du « Edit ».

Mise en place des paramètres de compression et contrôle du résultat.

On ouvre un terminal au niveau du dossier qui contient les images à compresser.

Ouverture du terminal avec powershell pour entrer une ligne de commande.

J’ai pris pour l’exemple volontairement des images bien lourdes. On copie la commande récupérée précédemment, à la fin je rajoute -d nomDeDossier ./ pour créer un nouveau dossier et ne pas écraser mes visuels d’origine on ne sait jamais …

Copie d'écran de la ligne de commande et résultat du batch de compression.

Chaque image a été copiée puis traitée avec les paramètres en quelques secondes !

Besoin d’aide avec votre site wordPress ?

Laisser un commentaire