Qui ne s’est jamais retrouvé devant son écran à attendre qu’un site web se charge telle une vache regardant le train passer ?
Qui n’attrape pas d’urticaire à la simple vue de ce fameux symbole ?
Alors, comment remédier une bonne fois pour toutes à ce problème et concevoir un site 2x plus rapide?
C’est ce que nous allons voir sans plus tarder dans cet article :
Sommaire
1. La lenteur d’internet à l’heure de la 5G. Vous avez dit paradoxe ?
Mais pourquoi certains sites internet prennent-ils autant de temps à s’afficher qu’une voiture électrique à se charger alors que nous sommes maintenant à l’ère de la 5G ?
Actuellement, les sites que l’on visite consomment en moyenne 2,5 Mo de bande passante par page. À titre de comparaison, c’est autant que l’entier du célèbre jeu vidéo de notre enfance Doom.
Pas étonnant dès lors que ça bouchonne dans les tuyaux…
Entre le texte, les effets visuels en animation, les images et les vidéos, un site internet moderne est (très) riche en contenus lourds.
Le mode de consommation sur smartphone
Nos habitudes de consommation d’internet ont évolué pour passer de plus en plus en version mobile. Cela représente plus d’une visite sur deux et dépasse donc la consultation via un poste fixe comme un ordinateur.
Le problème réside dans la croissance des débits (malgré la fibre, la 4G et la 5G), qui reste inférieure au poids moyen des pages.
Depuis l’irruption de la navigation mobile sur smartphone, les algorithmes de Google prennent en compte de manière importante la vitesse de chargement pour le référencement.
Pour cette raison, il est devenu nécessaire de penser la construction d’un site internet dans sa version mobile (légère et peut-être simplifiée) en premier lieu et dans un second temps sa version standard pour ordinateurs de bureau.
Malheureusement, c’est encore loin d’être normalisé et quantité de sites ne répondent pas à ces exigences.
Conséquence
Une page lourde sera plus longue à charger et donc moins bien référencée dans les moteurs de recherche.
Alors qui est responsable de cet état de fait ? C’est ce que nous allons découvrir au prochain chapitre :
2. Identifier le coupable
Sans surprises, les grandes responsables sont… les images.
Ce sont en effet les éléments les plus lourds d’une page, elles représentent même 62 % du poids d’un site web.
Les raisons de ce chiffre sont que les images actuelles sont de plus en plus lourdes car en plus haute résolution.
Autant dire que si on s’attaque uniquement à ce problème, votre site va passer d’une tortue à un cheval de course.
Dimensions d’images inappropriées
Les images et photos sont généralement en haute définition ce qui veut dire que la taille est très (trop) grande pour le web.
Il s’agit donc de les réduire à la bonne taille pour les écrans. De plus, si l’image est destinée uniquement à la version mobile de votre site, vous pouvez encore réduire sa taille.
Choisir le bon format d’image
Avant l’intégration sur votre site internet, il convient de vérifier les formats d’images.
En effet, tous les formats ne sont pas appropriés pour internet, en voici 4 différents à utiliser sans hésiter selon tes besoins :
- JPG
- WebP
- PNG
- SVG
Compressez vos images
Après la réduction de la taille et le choix du format vient le temps de la compression de l’image à proprement parler. C’est la dernière étape d’optimisation.
Pour cela, il existe une multitude de solutions. Pour faire simple, je vais vous dévoiler les 2 que j’utilise principalement et qui remplissent parfaitement leur rôle.
3. Quels outils choisir?
Cette plateforme vous permet de compresser jusqu’à 20 images (JPG, PNG ou WebP) simultanément.
Tout se fait automatiquement et vous apercevez instantanément le gain en pourcentage réalisé. Vous pouvez les télécharger une par une, ou la totalité dans un dossier ZIP.
TinyPNG propose également une partie payante avec abonnement et permet même l’installation d’une extension sur votre site WordPress pour compresser toutes vos images en une seule fois.
Une très bonne solution si vous ne souhaitez pas vous prendre la tête avec les réglages et que vous souhaitez la meilleure qualité possible en étant le plus léger.
Cet utilitaire permet de glisser-déposer un fichier image et de le compresser comme bon te semble.
Au contraire de TinyPNG, on ne peut traiter qu’une seule image à la fois. Mais il y a quantité de réglages pour compresser et redimensionner vos images.
De plus, une barre centrale amovible laisse voir le résultat des opérations en temps réel.
On peut même combiner 2 réglages différents et voir l’incidence en direct. Mais en règle générale, je préfère laisser l’image originale à gauche et voir le résultat de la compression à droite.
Un outil très abouti, qui permet de compresser vos images au fur et à mesure de votre projet. Il ne convient pas pour une optimisation de masse.
Vous l’aurez compris, la compression de vos images est incontournable avant de les utiliser sur votre site internet.
Mais réduire le poids des images est une fonction utile tous les jours en tant que graphiste indépendant.
Lors d’envoi de visuels ou de bons à tirer à vos clients, il est raisonnable de compresser les images si vous ne souhaitez pas que votre mail reste bloqué dans votre boîte d’envoi ou que vos clients ne les reçoivent pas, car trop volumineux…
Conclusion
La première chose à faire est donc d’optimiser toutes vos images à destination de votre site internet et vous gagnerez à coup sûr en rapidité.
Vu la quantité de solutions existantes sur le marché, dites-moi en commentaires quels sont les outils que vous utilisez ou si vous en connaissez d’autre?
