logo Pixel idea ampoule

Comment rendre ton site internet 2 fois plus rapide !

Comment rendre ton site internet 2 fois plus rapide !

Qui ne s’est jamais retrouvé devant son écran à attendre qu’un site web se charge telle une vache regardant le train passer ?

vache

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. Tu as 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.

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, mais certains détails viennent rendre leur chargement encore plus laborieux tel que :

Autant dire que si on s’attaque uniquement à ce problème, ton site va passer d’une torture à 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 ton site, tu peux encore réduire sa taille.

Choisir le bon format d’image

Avant l’intégration sur ton 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 3 différents à utiliser sans hésiter selon tes besoins :

Compresser ses 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.

compression

Pour cela, il existe une multitude de solutions. Pour faire simple, je vais te dévoiler les 2 que j’utilise principalement et qui remplissent parfaitement leur rôle.

3. Quels outils choisir?

Parmi toutes les possibilités existantes, il y a 2 outils que j’utilise et qui fonctionnent à merveille. Ils sont totalement gratuits et en ligne. Pas besoin de télécharger quoi que ce soit…

Retrouve mon commentaire à leur sujet sur la page “Ressources”

Le premier se nomme :

Cette plateforme te permet de compresser jusqu’à 20 images (JPG, PNG ou WebP) simultanément.

Tout se fait automatiquement et tu aperçois instantanément le gain en pourcentage réalisé. Tu peux les télécharger une par une, ou la totalité dans un dossier ZIP.

interface TinyPNG

TinyPNG propose également une partie payante avec abonnement et permet même l’installation d’une extension sur ton site WordPress pour compresser toutes tes images en une seule fois.

Une très bonne solution si tu ne souhaite pas te prendre la tête avec les réglages et que tu souhaites 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 tes images.

De plus, une barre centrale amovible laisse voir le résultat des opérations en temps réel.

Squoosh interface

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 te permet de compresser tes images au fur et à mesure de ton projet. Il ne convient pas pour une optimisation de masse.

Tu l’auras compris, la compression de tes images est incontournable avant de les utiliser sur ton 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 à tes clients, il est raisonnable de compresser les images si tu ne souhaites pas que ton mail reste bloqué dans ta boîte d’envoi ou que tes clients ne les reçoivent pas, car trop volumineux…

Conclusion

La première chose à faire est donc d’optimiser toutes tes images à destination de ton site internet et tu gagneras à coup sûr en rapidité.

Vu la quantité de solutions existantes sur le marché, dis-moi en commentaires quels sont les outils que tu utilises ou si tu en connaît d’autre?

À très vite, Yannik

5 1 vote
Évaluation de l'article
S’abonner
Notification pour

1 Commentaire
Commentaires en ligne
Afficher tous les commentaires
logo Pixel idea ampoule

Rejoignez la
communauté
Pixel idea

Recevez les dernières astuces de Pixel idea (ainsi que d’autres ressources).
C’est gratuit
logo Pixel idea ampoule

Rejoins la
communauté
Pixel idea

Reçois les dernières astuces de Pixel idea (ainsi que d’autres ressources).

C’est gratuit
×
×

Panier

Envie d'aller plus loin
avec Pixel idea?

Rejoins la communauté et continue de te former simplement dans la bonne humeur.

Comment améliorer tes créations et booster ta productivité?

DOCUMENT PDF GRATUIT

Télécharge le document complet contenant 50 ressources indispensables si tu veux booster ta créativité.