La performance web peut être définie par le temps de chargement et d’exécution d’une page web. Autrement dit, en vulgarisant, il s’agit de la vitesse d’un site web. Ce facteur est important à prendre en compte pour votre SEO et ce, pour plusieurs raisons.
Pourquoi optimiser la vitesse de votre site ?
Parce que Google aime (un peu) ça
C’est bien connu, Google souhaite que les éditeurs de sites web appliquent ce qui est bon pour l’utilisateur, tel qu’un site se chargeant rapidement par exemple. Pourtant, aujourd’hui, il semblerait que la vitesse d’affichage d’une page web ne soit pas un facteur de référencement direct majeur de l’algorithme de Google malgré les communications régulières du moteur de recherche dans ce sens :
- En avril 2010 Google annonce sur son blog pour les webmasters que désormais la vitesse de chargement d’un site aura un impact sur son positionnement dans les SERP.
- En juin 2013, au SMX, Matt Cutts nous apprend que Google déploiera un critère pénalisant pour les sites lents dans les résultats mobiles.
Mais lorsqu’on y regarde de plus près, la vitesse d’un site ne semble pas si importante aux yeux du moteur de recherche :
- En Août 2013, Moz publie une étude qui vise à mettre en lumière une corrélation entre la performance web et le positionnement dans les SERP. Ils concluront que ce facteur a un impact quasiment nul sur le référencement.
- En avril 2015, dans un Hangout, John Mueller, ingénieur chez Google annonce qu’il ne sait pas exactement quelle est l’influence de la vitesse de chargement sur un site. Il ajoute ensuite qu’il existe bien un facteur pénalisant pour les sites particulièrement lents, mais qu’il estime que la plupart des webmasters ne devraient plus se soucier de cet aspect-là.
Pourtant, si la vitesse de chargement ne semble pas être un critère direct de référencement il est tout de même préférable de présenter un site performant à Google :
- Un site performant sera crawlé plus rapidement donc Google sera en mesure d’indexer plus de contenus à temps égal alloué à votre site. Cela pourrait notamment permettre de le positionner sur plus de mots clés grâce à un contenu connu de Google plus vaste et donc finalement d’augmenter le nombre de ses visites.
- Google expérimente parfois des marqueurs dans les SERP dont des indications de lenteur, ce qui pénaliserait fortement le CTR des sites concernés si cela se déployait de façon permanente.
Parce que c’est bon pour vos utilisateurs
La mission d’un chargé de référencement n’est pas simplement d’amener un internaute d’une requête sur un moteur de recherche à une page web. Il s’agit également de contribuer pleinement à la stratégie du site pour atteindre un objectif (vente, récupération en lead, délivrance d’une information, résoudre un problème, répondre à une question…).
Un site lent est un obstacle pour chacun de ces objectifs.
Différentes études nous montrent en effet que la lenteur d’un site est très frustrante pour les utilisateurs.
- En 1999, une étude de Zona Research annonce qu’un tiers des visiteurs quitte un site au-delà de 8 secondes de chargement. En 2006, Akamai nous parle de 4 secondes…
- Des tests chez Amazon révèlent que les ventes baissent d’1% par tranche de 100ms de chargement supplémentaire.
- En 2014, CDNetworks publie les résultats d’un sondage annonçant que 71% des personnes interrogées se disent “moins susceptibles de faire confiance à une marque ayant un site Internet trop lent” !
- DareBoost, société spécialisée dans l’optimisation de la vitesse des sites web dont le CEO, a été interviewé dans un article précédent nous donne quelques chiffres supplémentaires sur son site qui démontrent l’intérêt d’avoir un site rapide. On apprend ainsi “qu’une seconde de chargement peut coûter 7% de conversion” ou encore que réduire les temps de chargement d’un site e-commerce permet d’augmenter le panier moyen.
Si vous souhaitez satisfaire vos utilisateurs, réduire votre taux de rebond et augmenter votre taux de conversion, vous avez tout intérêt à optimiser la vitesse de votre site.
Pourquoi optimiser les images ?
Lorsqu’on souhaite réduire les temps de chargement d’un site, plusieurs leviers s’offrent à nous. On peut s’appuyer sur un serveur ou un CDN plus adapté, nettoyer le code source ou utiliser des plugins pour améliorer le cache et compresser ou réduire les données envoyées au client
Parce que c’est facile !
En plus de toutes les options citées ci-dessus, une autre peut être réalisée sans avoir à mettre les mains dans le code : l’optimisation des contenus. Il s’agit donc de réduire le poids des images du site.
L’avantage est que cette tâche est simple à réaliser qu’elle ne demande pas de grandes compétences techniques et peut donc être confiée à n’importe qui.
La seule limite à ce levier est le coût en temps qu’il peut représenter. Il peut cependant être possible d’automatiser en partie la tâche en mettant en place un processus pour compresser l’ensemble des images du site.
Parce que c’est universel !
La plupart des facteurs de ralentissement varient d’un site web à l’autre en fonction du CMS utilisé, du fournisseur d’hébergement choisi ou de la qualité du code. Chaque site peut faire l’objet d’un audit spécifique pour en améliorer la vitesse. Seules les images concernent la quasi-totalité du web et peuvent être optimisées de la même manière d’un site à l’autre. Ainsi, devant un site lent, vous ne pourrez pas vous tromper de piste en vérifiant si les images sont optimisées.
Parce que c’est efficace !
Une image mal optimisée peut vite devenir l’élément le plus lourd de la page et donc pénaliser le chargement de celle-ci. Il est possible de réduire le poids d’une image de plusieurs Mo à quelques Ko facilement sans que l’internaute ne perçoive la différence entre les deux versions.
Ainsi, sans changer les informations de votre site web, vous pouvez facilement diviser le poids d’une page par 10 dans les pires (ou meilleurs) scénarios !
Et comment fait-on ?
Pour optimiser une image, il suffit de suivre quelques grands principes que je vous liste ci-dessous.
La dimension de l’image
D’abord, il faut veiller à ce que le fichier d’image sur le site n’ait pas une dimension supérieure à celle qui est donnée à voir à l’internaute. Si votre CSS indique l’affichage d’une image en 300*500px, il est inutile d’uploader un visuel de 600*1000px. Cela générerait du chargement inutile pour l’internaute.
Au sujet de la résolution d’image, j’ouvre une parenthèse sur le mythe de la densité d’affichage de 72 pixels par pouce. Cette résolution était adaptée à l’époque des écrans cathodiques qui avaient tous une densité se rapprochant de ce chiffre. Aujourd’hui, la résolution des écrans est beaucoup plus variable et la densité moyenne se rapproche plus des 100 ppp, chiffre en constante augmentation. Les navigateurs s’appuient uniquement sur les dimensions en pixel d’une image pour définir sa taille d’affichage. Ainsi, une image 800*600 px en 72 ppp s’affichera également de la même manière qu’une image de dimension équivalente en 300 ppp. Définir une résolution est aujourd’hui important surtout pour le print.
Le format de fichier
Il faut ensuite choisir le bon format de fichier. Les navigateurs web sont capables d’afficher différents formats qui sont adaptés à des usages variés.
- Le Jpeg est à préférer lorsque vous souhaitez afficher une image complexe telle qu’une photographie. En effet, il affiche 16,7 millions de couleurs et offre une bonne optimisation qualité/poids.
- Le PNG doit être privilégié lorsqu’une image contient du texte ou pour afficher des icônes, illustrations ou logos. En effet, ce format fonctionne sans perte de données au détriment du poids des fichiers. Il est particulièrement adapté aux images synthétiques ayant une palette de couleur moins vaste que dans une photographie. De plus, le PNG gère la transparence.
- Le GIF présente le grand avantage de supporter les images animées. Parfait pour les illustrations humoristiques ! Ce format est limité à 256 couleurs maximum. Il est plus adapté aux images présentant des aplats et peut donc éventuellement servir aux logos ou aux icônes.
Les différentes optimisations présentées ci-dessus peuvent toutes être obtenues grâce à un logiciel de traitement d’image tel que Adobe Photoshop ou GIMP. Une fois ce traitement effectué, il est possible de réduire encore le poids des images grâce à l’utilisation d’outils d’optimisation :
On trouve facilement sur le web différents outils gratuits qui fonctionnent tous d’une manière similaire : il suffit d’uploader ses images et de laisser la machine travailler. A la sortie, on récupère une image similaire à l’œil nu, mais dont le poids a été réduit.
On peut citer par exemple :
- Compressor.io: ce service particulièrement efficace permet de nettement réduire le poids d’une image et offre une interface permettant de comparer les deux versions de l’image.
- Images optimizer propose, en plus d’une interface web, de télécharger un logiciel pour Windows.
- J’ai personnellement une préférence pour TinyPNG qui prend en compte jusqu’à 20 fichiers dans une liste d’attente.
Si vous utilisez un CMS tel que WordPress, des plugins peuvent également optimiser automatiquement vos images en coulisses. On peut par exemple citer EWWW Image Optimizer ou WP Smush.
De nombreux autres outils de ce type existent et sont accessibles gratuitement à partir d’une simple recherche sur votre moteur préféré !
Images libres de droit, source pixabay.com
Après avoir fait de la vidéo, je suis tombé dans la marmite du SEO. Je suis actuellement chargé de contenu et de référencement chez un annonceur à Nantes.
L’optimisation des images est très importante pour la fluidité de nos blogs / sites, j’ai fait un article sur les différents outils en ligne pour la compression des images.
Il y a aussi le redimensionnement et les bonnes pratiques du web qui rentre en compte sur le travail des images.
Tiny Png est excellent, il y a aussi JPEGmini qui est pas mal et PNGoptimizer (intéressant pour les png)
Un article utile à lire et à relire 🙂
Très bon article, je complète juste une ou deux techniques CSS efficaces:
– Pour les grandes images d’habillage dont le alt n’aurait pas d’importance SEO, on peut utiliser une propriété CSS background et charger des images de taille différente avec des media queries. Cela permet de charger des images moins lourde lorsque l’utilisateur est sur un terminal mobile.
– Penser à la technique du CSS sprite pour les icones (http://www.w3schools.com/css/css_image_sprites.asp). Cela consiste à regrouper toutes les icônes dans le même fichier image et ainsi limiter les requètes avec le serveur.
Merci pour ce petit récap très complet sur l’optimisation des images. On voit encore sur de nombreux sites, des images, qui ralentissent la vitesse des pages.
@Renaud : Effectivement il existe de nombreux outils de ce type en ligne. Merci pour ces exemples supplémentaires.
@Christophe : Je ne me suis pas attarder sur les astuces en CSS car je souhaitais présenter des techniques accessibles au plus grand nombre mais comme tu le dis très bien, il y a d’autres leviers à activer lorsqu’on modifie un peu le code.
@Julien : Merci pour ce commentaire :).
@Louis Bazile j’ai passé un coup de Compressor.io sur mes images, il est vraiment puissant 🙂
Il optimise les images jpeg et png parfaitement, il ne fait pas de quartier.
A noter il existe maintenant un plugin WP pour TinyPNG (et pour Magento aussi d’ailleurs).
Merci pour cet article et notamment les outils pour redimensionner, très pratiques.
A cela j’ajouterai en premier de ne pas oublier de renommer les images. On oublie trop souvent la recherche Images de Google.
Bonne continuation sur le blog 😉
Un article vraiment intéressant. Débutante dans ce domaine, je suis ravie d’avoir pu trouver un article m’expliquant les usages des images sur le web et les outils disponible pour m’aider à faire mieux.
Merci!
Je viens d’essayer TinyPNG, c’est juste incroyable !
Je compresse à 60% et je suis incapable de voir la différence à l’oeil nu !
Il y a de la magie de ce petit outil 🙂
J’avais vraiment le plaisir de lire cet article qui donne un aspect très important sur l’optimisation de son site web. Certe, un site web lent va pas se crawler rapidement ce qui affecte le référencement de ce site et généralement si vous utilisez l’outil de Google vous allez trouver que tout le temps le problème se situe au niveau des images non optimisées.
Compresser les images c’est une solution mais la base de tou ca est de bien faire le design de son site web..si vous choisissez un thème qui utilise 90% d’images dans votre site n’attendez pas un miracle même si vous compressez vos images votre site sera lent à ce moment là..si vous n’activez pas le Gzip dans votre serveur n’attendez pas un miracle non plus..il faut souligner plusieurs aspects à traiter avant de se mettre en ligne!
J’ai vu sur Interne que si le site d’Amazon mettait 1 seconde de plus à charger, ça leur ferait un manque à gagner de 1,6 milliard de dollars par an.
C’est ici : http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
J’aime bien WP Smush : très pratique d’utilisation. Après, toutes les optimisations des images c’est bien de les faire, mais pas au détriment du reste, c’est un complément intéressant.