Comment diminuer le poids de ses images ?

Diminuer le poids de ses images est la première étape pour optimiser la vitesse de votre site. Cette démarche va permettre d’améliorer sa vitesse de chargement de façon significative !

D’après les études réalisées HostingManual.net, 57% des visiteurs quittent un site qui met plus de 3 secondes pour se charger.

3 secondes c’est le temps maximum que vous avez pour faire vos premières preuves. Notre monde va vite, il faut que votre site aussi ! Parmi les 57% de visiteurs quittant votre site, 80% n’y reviendront jamais car ils garderont une image de site lent.

Enfin, la moitié d’entre eux en parleront à leurs amis pour leur déconseiller de venir vous visiter.

Les images représentent une très grosse partie de ces ralentissements de vitesse, il va donc falloir faire en sorte de les optimiser au maximum !

L’heure est grave, il va falloir faire de votre site une machine de guerre !

1# Comment voir la vitesse de son site ?

Avant de commencer à optimiser son site, il faut d’abord constater ce qui ne va pas.

J’utilise la plupart du temps Page Speed Insight, réalisé par Google lui même, qui donne déjà un très bon aperçu. C’est un outil en plus gratuit ! Il y a pas mal d’outils payants sur internet, pas sûr qu’ils servent vraiment quand on voit le résultat fourni par Google.

Google Page Speed Insight

Aujourd’hui Google étant vraiment en Mobile First, c’est surtout l’affichage sur un mobile qui va compter pour lui et qu’il va donc calculer.

Vous aurez alors une note attribuée pour la vitesse de votre site, si elle est entre 50 et 89 vous êtes pas trop mal, entre 90 et 100 vous êtes incroyable. Ne restez surtout pas dans le rouge en dessous de 50, ce serait très mauvais pour vous et votre référencement !

Notation de votre performance

En général vous pouvez constater que vos photos représentent une grosse partie de la vitesse du site. Il va donc falloir améliorer tout ça !

2# Choisir le bon format

Des photos on en retrouve partout : dans les articles, dans les vignettes de vos articles qui sont présentes elles mêmes sur la page d’accueil et celle des catégories, dans votre logo …

Il vous faut choisir un format léger. Pour ça, je vous déconseille de partir sur du PNG !

Bien que ce format soit populaire car il garde une très bonne qualité, vous n’avez pas besoin d’avoir la meilleure qualité du monde pour votre site, vous allez voir que le JPEG fait très bien le travail ! Si vous pouvez d’ailleurs les mettre au format JPEP 2000, JPEG XR ou WebP c’est encore mieux. Je n’ai personnellement pas la possibilité de le faire donc je me contente du JPEG.

3# Compresser ses images

Votre image par défaut aura une taille normale. L’idéal serait maintenant de compresser votre image avant de la mettre en ligne, de quoi gagner une place merveilleuse !

Afin de compresser mes images tout en gardant la meilleure qualité possible, je passe par TinyPNG qui va faire un très joli travail. Je vous donne un exemple parlant :

Mon site préféré !

Je viens de compresser la première image utilisée dans cet article. Comme vous pouvez le constater elle passe de 160,9Kb à 67,9Kb, soit une économie de place de 58% ! C’est énorme !

Et la qualité n’est pas mauvaise comme vous pouvez le constater, c’est même largement suffisant pour ce que j’ai à illustrer !

4# Plugin pour améliorer la compression

Il y a parfois certaines images que vous oublierez de compresser ou qui peuvent être compressées encore plus que ça. Je vais donc vous conseiller un plugin WordPress permettant de faire un joli travail de ce côté là.

Je vous invite donc à télécharger Smush !

Tableau de bord de Smush

Comme vous pouvez le voir cette application m’a permis de gagner encore 1,5Mb de place en optimisant encore plus mes photos que ce qu’elles ne sont déjà. 1,5Mb pour un site c’est juste énorme sachant que celui-ci est encore tout frais !

La version gratuite fait du bon travail, la version pro permet de doubler l’optimisation de vos images. Si votre site est trop lourd, ce sera peut être une solution à envisager !

5# Plugin pour différer le chargement des images

Nous ne sommes pas là sur une accélération de votre site mais plutôt sur une optimisation de celui-ci. Afin de rendre accessible votre site de suite, vous avez la possibilité de différer le chargement de vos images.

Votre site est alors accessible immédiatement et ne doit pas attendre le chargement de toutes vos images avant de s’afficher, elles seront remplacées par des vignettes, de quoi faire patienter vos visiteurs.

Voici l’application LazyLoad :

Tableau de bord de Lazy Load

Elle permet donc d’afficher des vignettes sur tout votre contenu média en attendant que celui-ci finisse de charger. Google adore ça, il le conseille même lorsque vous faîtes un test de vitesse de votre site !

Conclusion

Même si ça ne fait pas tout, l’optimisation de vos images doit être une priorité pour l’accélération de votre site. Chacune de vos images doit être compressée à son maximum.

Faîtes le test avant et après et dîtes moi ce que vous avez pu gagner en vitesse en le faisant !

Conseils de blog a gagné 30 points de vitesse en compressant tout, sachant que Smush était déjà activé avant de lancer le premier test.

Et vous, qu’utilisez-vous pour améliorer le chargement de votre site ?

Réponses en commentaires !

RelatedPost

Et si vous partagiez votre découverte ?
  •  
  •  
  •  
  •  

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Votre dernier article tagué dans ce commentaire, ça vous dit ?

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