Saviez-vous que les images non optimisées sont l’une des premières causes de lenteur sur un site WordPress ? Et pourtant, il suffit parfois de quelques clics pour alléger votre site, améliorer son temps de chargement et faire grimper vos scores dans Google PageSpeed !
Mais pas question ici de passer des heures à compresser chaque visuel manuellement ou de jongler avec des outils complexes. Découvrons Smush ensemble, une extension WordPress gratuite qui compressera pour vous toutes vos images en un clin d’œil et automatiquement et en bonne qualité.
Je vous montre comment je configure Smush pour alléger les images : compression automatique, chargement différé (lazy load), redimensionnement…, autant de fonctions qui feront la différence.
Prêt à donner un vrai coup de boost à votre WordPress ? On y va !
Installer Smush
Commençons par installer l’extension.
Depuis l’onglet Extensions de votre menu WordPress :
- Cliquez sur Ajouter une extension (en sous-menu ou avec le bouton en haut).
- Tapez « Smush » dans la barre Rechercher des extensions pour afficher l’extension avec le long nom complet : Smush Image Optimization – Optimize Images | Compress & Lazy Load Images | Convert WebP & AVIF | Image CDN, par WPMU DEV – Your All-in-One WordPress Platform (tout est super long ici !).
- Cliquez sur « Installer maintenant« , puis « Activer« .
Assistant de configuration
Une fois activé, rendez-vous dans votre nouvel onglet Smush, qui vous proposera un assistant de configuration rapide.
Cliquez ensuite sur Begin Setup pour commencer. Vous pourrez décider de leur partager des données d’utilisation anonymes pour les aider à améliorer leur outil.
Je vous recommande d’activer TOUTES les options proposées (elles le sont presque toutes déjà) :
- ✅ Compression automatique des nouvelles images / Automatic Compression (évidemment) ;
- ✅ Compression Super Smush, une meilleure compression avec légère perte de qualité (lossy), mais quasi imperceptible à l’œil (ne l’activez pas uniquement si la qualité est vitale pour vous : photographe, illustrateur…) ;
- ✅ Suppression des Métadonnées EXIF / EXIF Metadata (ne l’activez pas si vous êtes photographe ou professionnel de l’image) ;
- ✅ Compression des images originales / Full Size Images ;
- ✅ Activer le Lazy Load, en vérifiant les éventuels conflits (on y revient plus tard).
Puis cliquez sur Complete Setup pour terminer l’assistant. L’outil vous propose ici les options de Smush Pro (Upgrade to Smush Pro).
Une fois ce premier paramétrage effectué, vous tomberez sur le Bulk Smush. Vous y verrez un récapitulatif du nombre d’images optimisées (à 0% ici) et de celles qui peuvent encore l’être (311 sur l’image).
C’est ici que commence le vrai travail d’optimisation !
Compression en masse des images (Bulk Smush)
L’un des plus gros avantages de Smush est sa capacité à compresser automatiquement chaque image que vous téléversez à votre médiathèque. Cette fonction est activée dès l’installation en suivant l’assistant.
Mais si vous avez déjà téléversé des dizaines voire des centaines d’images avant d’installer Smush, pas de panique, vous pouvez les compresser en un clic avec la fonction Bulk Smush. Ci-dessus on voit qu’il y en a 311 à optimiser.
Cliquez simplement sur le bouton BULK SMUSH pour lancer la compression en masse (depuis Smush > Bulk Smush),
Dans la version gratuite, vous pourrez compresser jusqu’à 50 images à la fois. Si vous avez plus d’images, vous devrez relancer l’opération manuellement autant de fois que nécessaire (x7 ici). C’est un peu fastidieux, mais c’est efficace. Et s’il y en a vraiment beaucoup, cette limitation saute avec Smush Pro et vous pouvez tout compresser en une seule fois.
Pendant le processus, vous pouvez naviguer sur votre site ou faire autre chose ; la compression continue en arrière-plan. À la fin, Smush vous affichera un résumé du poids total économisé.
Mes Réglages Smush
Plus bas dans la page (toujours dans Bulk Smush) vous retrouverez tous les réglages de Smush, que vous avez déjà en partie réglés depuis l’assistant.
Mode de compression Smush
Compression Basic, Super ou Ultra (Pro) ?
Notez que vous pouvez choisir la compression Basic sans perte de qualité (lossless), mais préférez la Super qui est plus légère pour une différence qui ne se voit pas de toute manière (après c’est vous qui voyez, mais moi je ne la vois pas ;-D).
Pour le reste j’y apporte 2 améliorations :
- ✅ Activez le redimensionnement des images / Resize original images ;
- ❌ Désactivez la sauvegarde des images originales / Backup original images (vérifiez que Optimize original images soit bien actif ✅).
Redimensionner les images trop grandes (Image resizing)
Une fonctionnalité précieuse de Smush, le redimensionnement automatique des images.
Beaucoup d’utilisateurs téléversent des images directement depuis leur smartphone ou appareil photo BIIIEEEEEN TROP grandes pour le web, avec plusieurs Mo par image parfois !
Une image affichée à 800 px de large sur votre page n’a aucun intérêt à en mesurer 4000000. Vous alourdissez le chargement inutilement, surtout sur mobile (le pauvre).
Activez le redimensionnement dans Smush, presque obligatoirement (voir juste après) :
Depuis le menu : Smush > Bulk Smush, zone Settings (Réglages), partie Image Resizing (Redimensionnement d’image).
Définissez une largeur et une hauteur maximale : moi je mets 2048 px et c’est déjà largement suffisant (2560 par défaut).
Si jamais vous avez besoin d’importer des images verticales très longues, vous pouvez mettre 999999 pour la hauteur (Max height) afin de ne pas être limité.
Je vous dits ça car j’ai moi-même du créer des captures d’écrans de pages dans toute leur longueur pour mes tutos, et limitées à 2048 px, leur largeur était très petite (proportionnellement) et donc l’image illisible.
Peut-être aurez-vous besoin d’insérer des infographies, par exemple, souvent assez longues. Sinon ce réglage peut aussi être changé au moment d’importer ce genre d’image, puis être remis à 2048 ensuite.
Cette fonction évite de surcharger votre médiathèque avec des fichiers très lourds ainsi que vos pages si elles chargent ces fichiers originaux (au lieu de versions redimensionnées).
Le fait de décocher la sauvegarde des images originales (Backup original images) évite de conserver ces fichiers lourds, même si ce sont bien les images redimensionnées qui apparaitront sur le site, afin de ne pas surcharger votre serveur.
Smush appliquera cette règle automatiquement à chaque nouveau téléchargement d’image (upload).
Attention, cela ne s’applique qu’aux images téléversées après l’activation de cette option. Pour les autres vous devrez les remplacer. Vous utiliserez l’extension Enable Media Replace pour remplacer vos images dans WordPress correctement. Sans cela il faut supprimer l’ancienne image avant d’en télécharger sa nouvelle version avec le même nom, mais dans ce cas il faut remettre ses infos. à jour (titre, Texte Alt…), puis refaire les liens qui ne seront plus les mêmes si son URL change…, bref c’est vraiment chiant à faire sans ça ; évitez !
Lazy Load (chargement différé)
Le Lazy Load, chargement différé ou paresseux, est une technique qui consiste à ne charger les images qu’au moment où elles deviennent visibles à l’écran. Les images plus bas dans la page ne seront pas chargées tant que l’utilisateur ne descendra (scroll) pas à leur niveau.
Ainsi, même s’il y a beaucoup d’images à charger, seules les premières le seront en même temps que la page à l’arrivée de l’internaute, puis les suivantes uniquement lorsque l’internaute aura poursuivi sa navigation.
C’est donc un excellent moyen pour consommer moins de ressources et améliorer les performances d’une page et booster le temps de chargement perçu.
Si vous avez suivi l’assistant, le Lazy Load est déjà activé, sinon cliquez simplement sur ACTIVATE (depuis Smush > Lazy Load) :
A priori vous n’aurez rien à faire de plus ici, les réglages par défaut sont très bien.
Un réglage pourrait cependant être utile. Celui d’exclure certaines images du lazy loading. J’avais du le faire pour un logo qui le subissait, ralentissant son apparition au visiteur systématiquement (même s’il est cencé toujours être visible, en haut du site).
Dans ce cas vous irez au niveau de Include/Exclude, à Keywords, et indiquerez un identifiant pour l’image (une classe CSS, un ID, l’URL de l’image…).
Le plus simple pour vous est de le faire avec l’URL de l’image (que vous retrouverez dans vos Médias).
Moi je le fait avec une classe CSS afin de conserver ce réglage si l’image venait à changer (sans devoir se rappeler de ça). Dans ce cas faites un clic droit sur l’image, puis Inspecter (l’élément) pour ouvrir la console du navigateur :
Dans cet exemple, mon thème (GeneratePress) attribue la classe CSS is-logo-image à l’image de mon logo. Avec ce nom-là vous pouvez être sur que seule cette image est concernée.
Vous renseignerez ça dans Keywords précédé d’un point (.) car il s’agit d’une classe CSS (comme c’est indiqué en-dessous) :
Pour information, vous avez aussi la possibilité de :
- Désactiver Lazy Load selon le type de médias (.jpeg, .png, .webp…) ou l’emplacement ;
- Changer l’animation d’apparition des images (Fade in, Spinner…) ;
- Désactiver Lazy Load sur certaines pages (par type de contenus ou par URL) ;
- Exclure certains fichiers (comme on vient de le voir) ;
- Activer le Lazy Load natif (Native lazy load) du navigateur (mais Google peut ne pas le voir).
Conflit Lazy Load
Certains thèmes WordPress, l’extension Jetpack, ou encore WP Rocket proposent déjà un système de Lazy Load. Activer cette fonctionnalité en double peut provoquer des bugs (images qui ne s’affichent pas, clignotement, etc.).
Personnellement je n’ai pas ce souci avec ma méthodologie de travail et je n’utilise pas ces extensions, mais si vous utilisez déjà un Lazy Loading quelque part, désactivez-le avant d’activer celui de Smush.
Vous testerez le résultat sur une ou deux pages en navigation privée.
Vous pourriez aussi avoir les images qui ne s’affichent pas. Mais dans ce cas vérifiez le Lazy Load ou votre système de cache (si vous en avez un) ; c’est très probablement à cause de ça.
Voilà.
Je ne vous parle pas du reste, a priori vous n’en aurez pas besoin, ou alors il s’agit des options de Smush Pro (voir plus bas).
Pourquoi optimiser les images ?
Chaque seconde compte sur le web. Un site lent, c’est peut-être un visiteur qui part. Dans une grande majorité des cas, les images sont les fichiers les plus lourds à charger pour une page. Une seule photo HD non compressée peut suffire à faire passer votre temps de chargement de plusieurs secondes… adieu le score de performance !
Optimiser ses images, c’est avant tout alléger son site sans rien changer. C’est offrir une meilleure expérience utilisateur et surtout pour les mobiles. Évitez que Google vous pénalise dans les résultats de recherche à cause d’un site trop lent, alors que vous pouvez régler ça assez simplement et gratuitement.
C’est d’ailleurs ce que recommande Google lui-même et vous pouvez le mesurer avec son outil PageSpeed Insights, ou d’autres comme GTmetrix ou Pingdom.
Quand dois-je utiliser Smush Pro ?
La version gratuite de Smush convient très bien pour la majorité des utilisateurs.
Après, dans certains cas cela peut-être intéressant de passer sur la version Pro, soit pour gagner un temps considérable ou améliorer significativement les performances.
Smush Pro peut vraiment valoir le coup si :
- Vous avez déjà des centaines ou milliers d’images existantes à optimiser au moment ou vous installez Smush. La version gratuite vous limite à 50 images par lot. Avec Smush Pro, vous compressez toute votre médiathèque en une seule fois. C’est un gain de temps énorme sur un site déjà bien rempli.
- Vous voulez exploiter les formats WebP et AVIF. Ces formats nouvelle génération proposent des images encore plus légères sans perte notable de qualité. Smush Pro peut convertir automatiquement vos fichiers et les servir aux navigateurs compatibles.
- Votre site repose essentiellement sur l’images, comme un portfolio (photographe, artiste…), certains e-commerces (Luxe, décoration…) ou blog très illustré, etc. Smush Pro offre une compression avec perte (lossy) beaucoup plus forte (mode Ultra Smush), jusqu’à 5x plus (d’après ce qui est dit) très peu perceptible même pour un œil avisé.
Pour le reste (CDN, redimensionnement dynamique…) c’est peut être utile pour des cas spécifiques ou lorsque qu’il est question de besoins plus techniques (site international, gros volume d’images…), mais ils ne sont pas indispensables pour tous.
J’espère vous avoir été utile.
Évidemment vous trouverez d’autres plugins WordPress qui propose ce genre de service ; j’ai notamment publié un article sur l’extension ShortPixel pour compresser vos images.
Et si vous avez des questions à ce propos, c’est dans les commentaires (ou contactez-moi).