Pourquoi alléger un site internet ?

Alors que le très haut débit n’est pas encore accessible au plus grand nombre malgré la diffusion d’Internet à travers le monde, le poids moyen d’une page web n’a jamais été aussi imposant.

Ainsi, il semblerait que le poids moyen d’une page Internet serait actuellement de 2,3 Mo, (soit le poids du jeu Doom en entier dans sa version sortie en 1993 par ID Software. Pour les plus geek d’entre nous)

Aujourd’hui, les pages Web sont plus graphiques, elles misent sur une foule de scripts JavaScript, des images en haute définition, parfois de la musique, de la vidéo… Des atouts censés rendre les sites séduisants, mais qui pèsent sur la rapidité d’affichage et les performances globales d’Internet à travers le monde.

 

Donc, alléger son site permet :

  • une meilleure accessibilité partout que ce soit avec la 5G que la 2G,
  • Une accessibilité pour les personnes ayant un handicap,
  • Bon pour le référencement naturel de son site internet si vous voulez en savoir plus c’est un thème que j’aborde dans une série d’articles sur le SEO RESPONSABLE
  • Et surtout le plus important, c’est bon pour la planète ! Un site qui est léger (comme une plume) et un site qui nécessite moins de place sur un serveur, donc moins d’énergies. Et alors si votre hébergeur utilise de l’énergie verte comme Infomaniak, alors la c’est le must !

 

Mais qu’elles sont les actions à mettre à place pour alléger son site internet ?

Le must du must serait d’avoir un site écoconçu, si vous avez un site statique avec très peu de changement, vous pouvez passez par des CMS Léger et écoconçu, tel que Hugo, Gatsby,kirby, pelican, et il en a plein d’autres, je suis entrain justement de m’orienté  vers ce style de solution pour refaire mon site internet qui est un site assez statique en soit,

La mise en place est assez complexe au début quand on est habitué à une mise en ligne par wordpress et tout est en anglais. Toute la liberté que l’on a avec wordpress et les extensions (qui créent justement l’obégielle du web) sont limité ce qui permet de vraiment faire le trie sur les besoins du site internet

cependant nous n’avons pas toujours le choix et/ou l’envie de tout refaire, donc si vous utilisez wordpress (ou un autre) je vais vous donnez les astuces pour alléger votre site internet.

1. Thèmes légers

Avec wordpress il existe des thèmes qui sont écoconçus, un peu plus légers, il en existe des nombreux, telle que Recycle, Eco press et eco energy, je vous mets le lien dans la description si vous souhaitez retrouvez quelques exemples de thème.

 

2. Un design épuré

Avoir un design épuré, minimaliste sur notre site internet. Mettre des images ou des sliders s’il a vraiment une valeur ajoutée. Si c’est pour mettre un slider juste pour faire jolie, ça ne sert à rien et ça ralentit le site internet.

Quand je parle de design épuré je parle également ergonomie du site internet, dans le fargon on parle UX, l’expérience utilisateur.

Votre site internet doit être simple, et compréhensible au 1er coup d’œil pour vos internautes. Il doit être intuitif, sans floriture. Ce qui nous amène au point suivant qui est de se contenter de seulement l’essentielle.

 

3. Seulement l’essentiel

L’essentielle est juste l’essentiel pour un site internet, arrêtons  avec le trop et le too much, de mettre plus et encore plus, nous arrivons a une obégielle.

Quand on fait un site internet, réfléchissons qu’elle est son but, qu’elle est son objectif. Réfléchissons aux fonctionnalités, et ne jouons pas au lego ou au Sims, a rajouter des étages à notre maison qui n’auront aucune utilité parce que vous jouez seulement 1 personnage.

 

Par exemple les plug-ins  apportent de nouvelles fonctionnalités au cœur de WordPress. Bien qu’ils facilitent un grand nombre d’opérations techniques pour les débutants, il n’en reste pas moins que beaucoup d’entre eux sont mal optimisés – sans pour autant que le développeur en soit le responsable.

Je m’explique. Vous avez installé un module de formulaire de contact (Contact Form 7 pour ne citer que lui) sur une page de votre site. Ce plugin dispose d’une feuille de styles CSS et d’un fichier JavaScript indispensable pour son bon fonctionnement. Or, ces 2 fichiers vont générer 2 requêtes supplémentaires sur l’ensemble des pages visitées de votre site. Il serait judicieux de ne les charger que sur la page concernée – chose que le développeur ne peut pas prévoir nativement, vous l’aurez compris.

 

4. Fluidifier le processus

Le temps passé par l’utilisateur sur un site web est le facteur le plus déterminant pour calculer l’empreinte environnementale d’un site. Autrement dit, moins l’utilisateur passe de temps sur le site et plus on réduit les impacts environnementaux associés.

Il faut donc veiller à réduire au maximum le nombre d’écran, d’étapes, et d’interactions inutiles. Par exemple, si le processus en ligne commence par un e-mail et qu’il implique la fourniture de pièces justificatives par l’internaute, on demandera ces pièces justificatives dans l’e-mail avant que l’internaute se connecte. Il peut ainsi les préparer offline et compléter le processus en ligne en une seule session (plutôt que deux).

 

5. Des images au bon format  et compresser

Après avoir réfléchi à l’essentiel, réfléchissons aux images. Les images peuvent être un facteur qui alourdit énormément un site internet. Que faire ?

Les mettre au bon format, si vous devez mettre une petite image dans un article pas besoin de mettre une image de 2000px par 2000px, elle sera démesurée… une image sur le web doit être à la taille et en 72 dpi, ou vous pouvez la compresser.

SI c’est un site internet qui est nouveau, il faut se faire cette routine des que vous télécharger une image sur votre site internet et si vous avez un site un peu ancien, courage se sera un travail de long a l’haleine, mais qui voudra le coup !

Optimiser les images vectorielles

Les navigateurs modernes sont tous compatibles avec le format d’image vectorielle SVG (Scalable Vector Graphics). Basées sur un ensemble de vecteurs décrits en XML, les images SVG ont deux avantages indéniables. Elles peuvent être réduites et agrandies à l’infini sans dégradation de qualité. Et, elles sont la plupart du temps moins lourdes que des images bitmap.

Cependant, la plupart des images SVG contiennent de nombreuses métadonnées qui ont été nécessaires à leur création. C’est par exemple le cas des informations de couche (layer), des commentaires, etc. Ces informations sont indispensables pour éditer l’image, mais inutiles pour l’afficher. D’où l’idée de les supprimer pour réduire le poids des fichiers. De nombreux outils de minification et d’optimisation sont disponibles tels que Compressor.io, SVG Cleaner, SVGO, etc.

Le taux de compression varie fortement selon la complexité de l’image. Mais il est toujours élevé, car il s’agit de compresser du texte. En général, le poids d’une image SVG optimisée représente 25 % à 2% du poids de l’image initiale.

 

6. Compresser les CSS et java script

De la même manière que pour les images, nous pouvons compresser le CSS et le JS.

Les feuilles de styles CSS contiennent les différentes propriétés d’affichage (couleurs, polices, structure, etc.). Sans elle, le Web ne ressemblerait pas à grand-chose.

Les fichiers JavaScript (JS) ajoutent de l’interaction pour dynamiser le site : diaporama, boutons de partage sur les réseaux sociaux, etc.

Pour le CSS, je recommande généralement CleanCSS qui dispose de réglages intéressants dont notamment le choix du niveau de compression (lisible à illisible) et qui ne plante pas le site (sauf dans de rares cas où votre thème aura recours à des media queries).

Pour le JavaScript, là encore, de nombreux outils existent, mais prenez soin de vérifier après chaque compression que tout fonctionne. JSCompress.com est l’un de ces outils performants.

La compression des CSS et des JS aura pour effet de créer des fichiers quasi illisibles dans la mesure où ils ne seront composés que d’une seule ligne

 

 

7.  Mettre en cache et compresser via le .htaccess (côté client)

On peut utiliser la mise en cache des éléments par le navigateur pour prévenir l’envoi de requêtes inutiles à chaque fois qu’un visiteur retourne sur votre site. Logo, CSS et autres JS sont rarement amenés à changer sur un site : il est donc intéressant que le navigateur les stocke en cache afin de réduire le nombre de requêtes inutiles. Pourquoi demander à chaque fois la feuille de styles du site alors que celle-ci ne change que très rarement ?

Pour appliquer cette technique, il vous suffit de modifier le fichier .htaccess situées à la racine de votre projet Web, sur votre serveur FTP. Attention, à bien tester votre site une fois cette technique appliquée, et ce, dans plusieurs navigateurs au cas où cette méthode poserait souci.

 

8.   Utiliser la compression Gzip (côté serveur)

 

Compresser les éléments par le serveur avant de les envoyer au client (le navigateur Internet) est une des méthodes les plus efficaces en matière d’optimisation. Elle permet de réduire considérablement le poids d’une page et vous permet de gagner plusieurs secondes. Il faut voir avec son hébergeur voir si on a accès à cette option, une option rarement disponible sur les hébergeurs low cost.

 

Voilà quelque astuces plus ou moins compliquées a mettre en place pour alléger son site internet, comme nous a si bien dit Romuald lors de la dernière interview, faire un site internet éco conçu est un acte métier, c’est-à-dire que ça fait parti du cahier des charges d’un site internet, et c’est des demandes bien spécifiques dès l’origine du projet. Nous pouvons améliorer, mais un site utilisera toujours de l’énergie. Un site internet ne pourra pas être neutre en énergie, c’est impossible.

Par rapport au poids moyen exponentiel des pages d’un site. Nous notons quelques efforts sur le poids moyen des 10 sites les plus populaires au monde, il est en légère baisse depuis 2 ans.

Espérons que la tendance initiée par le Top 10 des sites internet mondiaux sera suivie par le reste du web dans les années à venir.