Accélérer son site web en optimisant les images : faîtes la chasse aux kilos (octets) superflus

Toutes les images affichées sur vos pages web sont-elles optimisées pour un chargement rapide ? Si l’on en croit les conseils remontant les plus fréquemment dans nos rapports d’analyse de pages web, la probabilité que vous puissiez faire économiser quelques centaines de kilo-octets de téléchargement (voire bien plus) à vos visiteurs n’est pas négligeable ! Voilà qui mérite une rapide vérification ne trouvez-vous pas ? D’autant qu’avec Dareboost, le test de vitesse de chargement de la page web de votre choix ne vous prendra que quelques minutes, et qu’il vous dressera un diagnostic complet, notamment concernant l’ensemble des visuels utilisés.

Comme dans l’exemple ci-dessous, montrant que le site e-marketing.fr se trouve bien dans la moyenne du web actuel… A savoir des images qui représentent plus de 60% du poids total de la page web.

Avec un tel “poids”, l’incidence sur le délai de chargement est incontestable. Et l’absence - ou l’oubli - d’optimisation du poids des images peut se solder par de précieux dixièmes de seconde supplémentaires (voire des secondes) pour le chargement de vos pages par vos utilisateurs. Pire : moins bonne sera leur connexion web plus ils en pâtiront. Pour illustration, 1 méga-octets de données supplémentaires se téléchargent :

• en 200ms avec une connexion fibre avec un débit de 40 Mbps, 
• en 1 seconde avec une connexion ADSL et un débit de 8 Mbps 
• en 2 secondes avec un débit de 4 Mbps, sachant qu’aujourd’hui 30% des internautes français ne disposent pas d’un débit allant au delà !

D’où l’intérêt de partir en chasse de tous les kilo-octets superflus qui peuvent très facilement se glisser dans les images que vous utilisez. Une traque relativement simple à mettre en place en suivant les 3 conseils suivants.

Etape 1 : Limitez-vous aux images vraiment nécessaires

Il ne s’agit pas, bien évidemment, de vous interdire l’utilisation des images sur vos pages, mais de raisonner en termes de budgets de performance, c’est à dire : avoir conscience de l’impact de chaque ajout d’image sur le temps de chargement de la page et d’arbitrer entre cet impact et les bénéfices attendus avec l’ajout de ce visuel (sur l’attractivité de la page par exemple). De cette manière, vous saurez éliminer les éléments superflus de manière pragmatique. Et vous profiterez des bienfaits des visuels essentiels à votre page de manière optimale.

Etape 2 : optimisez sans dégrader

Première phase essentielle : vérifier que vous utilisez vos visuels à la “juste” dimension ! En effet, utiliser une image originale plus grande sur sa taille d’affichage n’apporte aucun bénéfice en qualité et surcharge inutilement la page web. Et configurer une taille d’affichage - dans l’éditeur de votre CMS par exemple - ne change en rien la quantité de données téléchargées par l’internaute.

Veillez donc à fournir directement les images aux bonnes dimensions. Sauf si votre CMS prend en charge cette fonctionnalité, utilisez votre outil favori ou faites-en la demande auprès de vos équipes ou votre prestataire.

Reste ensuite à optimiser ces visuels, c’est à dire réduire leur poids sans pour autant diminuer leur qualité. Ce qui passe par le choix du format d’enregistrement le plus adapté, la suppression des données de l’image superflues pour un affichage web (EXIF, commentaires, etc.) et la configuration des options du format choisi. Les services en ligne capable de réaliser simplement ces traitements ne manquent pas, comme Imagify ou ImageRecycle pour ne citer que des outils français...

Etape 3 : osez la compression 

Au-delà de l’optimisation, la compression des images, avec perte de qualité cette fois, se doit d’être envisagée, au vu des gains conséquents que cela peut vous apporter en matière de performance web. Un chapitre sur lequel certains d’entre vous se montreront réticents, craignant que l’attractivité de vos pages (et votre taux de conversion) souffre de l’utilisation d’image à la qualité imparfaite. Pourtant, tous vos visuels n’ont pas besoin d’être en haute définition. Et bon nombre de vos visiteurs vous sauront même gré de leur épargner de (très) lourds fichiers à télécharger. 

Pour l’exemple : entre la version HD et celle raisonnablement compressée d’une même photo au format jpeg, le poids peut aisément être divisé par 2 ! En parallèle, des études démontrent que les internautes tolèrent tout à fait des baisses de qualité d’images, même significatives.

En bref, ne vous montrez pas trop perfectionnistes sur la qualité de vos visuels et, encore une fois, mettez-vous en position d’arbitrage entre le bénéfice attendu et l’impact sur le temps de chargement !

Restez en veille !

Votre site web évolue chaque jour, au gré des refontes, mises à jour techniques et bien entendu au jour le jour avec la publication de nouveaux contenus. Autant d’occasions pour “laisser passer” des visuels non-optimisés sur votre site, qui vont alors de porter préjudice à la vitesse de chargement de vos pages. Seule solution pour parer à ce risque avec une réactivité optimale : mettre les performances de vos pages web sous surveillance et configurer une alerte en cas de prise de poids intempestive de votre site web.