10 conseils pour accélérer le chargement des images sur un site

Pour un site web, les images sont d’une grande importance. Elles permettent de mettre en valeur votre site et peuvent surtout contribuer à un meilleur classement dans les moteurs de recherche.

Chargement d'images
Crédit 123RF

Visiter un site dont les images tardent à charger peut alors représenter un véritable problème. Cela peut faire fuir les visiteurs et donc réduire le taux de conversion de votre site. Pour accélérer venir à bout de cette difficulté, voici dix conseils importants à mettre en pratique.

1.     Choisir le bon format pour les images

Pour choisir un format pour les images de votre site web, vous disposez de quatre options fiables. Vous pouvez ainsi opter pour un format JPEG, un format GIF, un format PNG ou un format WebP. Ces différents formats ont tous leurs avantages, mais aussi des défauts. Le format JPEG par exemple est de haute qualité et est peu compressible contrairement au format GIF qui présente une faible qualité, mais propose un mode animé.

Le plus souvent, il est conseillé d’utiliser le format JPEG pour une bonne qualité d’images. C’est une très bonne option lorsque vos images ne sont pas très lourdes, car compresser une image en format JPEG peut lui faire perdre sa qualité. Le format WebP est une meilleure alternative. Créé par Google, il est destiné à remplacer tous les autres formats sur internet. Ce format d’image permet de réduire le poids de vos images pour un meilleur chargement tout en conservant leur qualité.

2.     Réduire le poids et la taille des images

Une image trop lourde est généralement plus difficile à charger. Il est donc nécessaire de compresser les images pour réduire leur poids (taille du fichier) et leur taille (dimensions). La taille d’une image est exprimée en pixel alors que la taille de fichier est exprimée en Ko. Pour vos sites web, la taille du fichier  doit être comprise entre 50Ko et 500Ko. Quant à la bonne résolution, elle est de 72 pixels par pouce.

Il existe différents outils pouvant vous permettre de compresser vos images tout en maintenant la qualité d’origine. Le taux de compression prend en compte les caractéristiques de votre fichier et peut varier entre 25% et 80%, une fenêtre assez large pour vous permettre d’obtenir une image pour votre site web avec un bon ratio poids-qualité d’image.

3.     Réduire le nombre d’images

Plus votre article contient d’images plus elles prendront de temps à charger. Il est donc important de savoir gérer les images sur son site. Pour ce faire, vous devez essayer de sélectionner les images les moins utiles et les retirer. Vous pouvez aussi choisir une image plus attractive qui, à elle seule, pourrait regrouper les messages d’autres images. Une seule image peut avoir plus d’impact que dix si elle est bien choisie.

Lorsque vous publiez un article sur votre page il n’est pas utile d’illustrer chaque sous-titre par exemple. Vous pouvez choisir une image globale et d’autres images secondaires seulement pour les parties les plus pertinentes de votre article.

4.     Réduire le contenu de la page

La rapidité de chargement de vos images ne dépend pas seulement de leur poids ou de leur nombre. Elle peut dépendre d’autres éléments sur la page. S’il y a trop de contenu, c’est tout le contenu qui met du temps à charger et donc les images aussi. Pensez donc à réduire le reste du contenu de votre page et ne publier que l’essentiel. Les vidéos tout comme les images doivent être revues pour rester dans les normes et ne pas peser sur la page.

5.     Contrôler l’affichage des scripts

Les scripts bien qu’utiles à votre site peuvent être la cause de son échec. Lorsque les scripts s’affichent déjà en début de page, ils empêchent de voir l’essentiel et ralentissent le chargement d’autres contenus tels que les images. Pour réduire l’impact de ces scripts, vous disposez de deux options : l’utilisation des attributs async et defer. Ces attributs sont placés sur la balise script et agissent sur l’affichage des scripts sur le site.

L’attribut async permet d’avoir accès à vos images en attendant le chargement du script. Cependant, dès que le script aura fini de charger, il s’exécutera et arrêtera le rendu. L’attribut defer n’empêche pas également le chargement des scripts mais il vous permet d’avoir accès à vos images avant l’exécution des scripts.

6.     Utiliser un CDN

Lorsque tous les éléments de votre site sont hébergés sur un même serveur, plus le trafic sur le site augmente, plus vos images mettent du temps à charger. Le CDN (Content Delivery Network) permet de réduire le temps de chargement de vos images dans ces circonstances. C’est un réseau qui permet de rediriger la requête des utilisateurs vers les PoP CDN OVH les plus proches d’eux. Ces derniers pourront alors charger les images en un temps plus court.

7.     Utiliser efficacement les plugins

Les plugins sont intéressants car ils sont de bonnes solutions de compression d’images. Il peut pourtant arriver que ces plugins soient à l’origine du temps de chargement un peu trop long de vos images. Lorsqu’ils sont cumulés, les plugins deviennent plus un frein qu’une assistance.  Il est donc nécessaire de choisir intelligemment les plugins à utiliser et de s’assurer de leur utilité. Il faut aussi éviter qu’il y ait des doublons.

8.     Utiliser un lazy loading

Le lazy loading est une technique qui consiste à différer le chargement des ressources du site afin de réduire le temps de chargement. C’est une belle alternative si vous voulez permettre à vos images d’avoir la liberté de charger plus rapidement. Grace à cette technologie, les visiteurs du site ne seront pas interrompus dans leur recherche par des contenus qu’ils n’auront pas sollicités.

9.     Optimiser les fichiers CSS

Les fichiers CSS (Cascading Style Sheets) sont des fichiers codés permettant de contrôler la présentation des ressources d’une page. Elles sont chargées avant les éléments de la page et le chargement des images est contraint d’attendre la fin de leur téléchargement. Il est donc essentiel d’optimiser ces fichiers pour permettre un affichage plus rapide de vos images sur le site.

Optimiser des fichiers CSS revient à supprimer les déclarations inutiles, les compresser et les mettre dans le cache. Il faut ensuite répartir les CSS non utiles à l’affichage de la page dans des fichiers supplémentaires.

10.Choisir le bon hébergeur pour votre site

Tous vos efforts pour un meilleur affichage des images sur votre site peuvent ne pas aboutir si vous n’avez pas un bon hébergeur. Les performances et les prix des hébergeurs ne sont pas les mêmes mais votre choix dépendra des résultats que vous souhaitez obtenir. Il dépendra peut-être aussi de votre budget mais il est certain que la performance de votre site en dépend. Ainsi plus votre hébergeur est performant plus le chargement de vos images se fera rapidement.

Laisser un commentaire

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