Dans cet article, je vous propose de découvrir 10 astuces pour rendre votre site web plus vert. Vous verrez également qu’après avoir mis en place ces actions, les performances de votre site seront améliorées.

Évidemment, cette liste est très loin d’être exhaustive, il y a énormément d’autres actions possibles pour économiser les ressources utilisées dont je vous reparlerais sûrement dans un prochain article.

L’objectif n’est pas d’expliquer en détail chaque astuce, mais plutôt de montrer comment ces actions influent sur la consommation de ressources et performance et permettent de rendre votre site plus ‘vert’.

 

Délimiter le plus précisément possible le besoin

La première action à mettre en place, et c’est évident, est de limiter les fonctionnalités du projet.

Un rapport du Standish Group, organisation spécialisée dans la performance en matière de gestion de projet informatique, indique que 50% des fonctionnalités d’un projet ne servent presque jamais. Or, ces fonctionnalités ont un impact direct sur le matériel qui héberge l’application, sur son usure, sur sa consommation énergétique et donc sur l’environnement.

Pour éviter cela, l’idée est de bien valider avec le commanditaire, l’intégration ou non de telle ou telle fonctionnalité dans le périmètre du projet. Il peut être intéressant d’organiser la gestion de son projet par itérations (type AGILE) plutôt qu’en Cascade (cycle en V) par exemple.

 

Sélectionner un hébergeur écologiquement engagé

Sélectionner un hébergeur vert peut être plus compliqué que cela n’y parait. Attention à ce que le ‘écologiquement engagé’ n’apparaisse pas seulement dans le discours marketing mais bel et bien par la mise en place d’actions concrètes.

Les points importants sur lesquels s’informer sont les suivants :

  • Provenance de l’énergie utilisée pour alimenter les machines (il n’existe pas encore, à ma connaissance, de labels en France, mais on peut trouver OK Power en Allemagne, Naturemade Star en Suisse ou Green-e aux USA)
  • Politique d’achat du matériel informatique (plusieurs labels existent concernant la consommation énergétique tels que Energy Star ou 80 plus)
  • Gestion des Déchets d’Équipements Électriques et Électroniques (DEEE) de l’hébergeur
  • Compensation carbone de l’hébergeur en finançant des éco-projets.

Certains hébergeurs disposent d’une charte écologique contenant ces informations. N’hésitez pas à les contacter pour disposer de plus d’informations sur ces éléments.

 

Éviter autant que possible les repaint et reflow

On rentre dans le technique. Les repaint et reflow sont des opérations coûteuses pour le navigateur. En plus d’être gourmandes en ressources, elles peuvent, si utilisées sans modération, réduire les performances de votre page.

En effet, les repaint (ou redraw) correspondent aux modifications effectuées au niveau de la visibilité d’un élément (opacity, background-color etc.) et non au layout. Les reflow sont des modifications structurelles, qui touchent non pas seulement l’élément concerné, mais également ses enfants, parents et siblings. J’en utilise moi même quelques unes sur ce site (les :hover sur les liens, le sticky menu avec une transition…), mais le tout est de bien les doser.

Le navigateur Opera conseille de masquer un élément via la propriété display, d’effectuer les modifications puis de modifier de nouveau le display de l’élément afin de limiter le nombre de reflows effectuées.

var posElem = document.getElementById('animation');
posElem.style.display = 'none';
posElem.appendChild(newNodes);
posElem.style.width = '10em';
// Other changes…
posElem.style.display = 'block';
Exemple issu de dev.opera.com

À utiliser avec modération donc !

 

Utiliser AJAX

L’utilisation d’AJAX (Asynchronous Javascript And XML) dans le cadre de l’éco-conception de son site Web va permettre d’éviter de recharger l’intégralité de la page et les différents éléments parfois lourds, tels que les images, scripts, styles etc.

Quand on sait que la taille moyenne d’une page Web en 2016 est de 2,3 Mo selon un article de Tim Frick, l’utilisation d’AJAX pour certaines fonctionnalités (envoi de formulaire, mise à jour panier…) permet d’économiser beaucoup de transferts de données.

 

Utiliser les Sprites CSS pour vos images

Les fameuses Sprites CSS. Qu’est ce que c’est ?

Globalement, c’est le fait de fusionner plusieurs images en une seule, et d’utiliser le CSS pour spécifier quelle « partie » de cette image doit être utilisée pour tel ou tel élément HTML en jouant avec la propriété background-position.

Pour ma part, j’utilise la technique des sprites avec des fichiers SVG lorsque c’est possible, notamment pour les icônes ou logos.

Cette technique va donc vous permettre d’économiser en nombres de requêtes HTTP ainsi qu’en taille de fichier à télécharger pour le navigateur du visiteur et donc rendre son site web plus vert.

Il existe certains générateurs de sprites en ligne tel que csssprites par exemple.

 

Utilisez le cache à tous les niveaux

L’objectif du cache est de diminuer le nombre de requêtes effectuées en ne téléchargeant pas systématiquement certains éléments qui auraient étés mis en cache.

Le fonctionnement global du cache est le suivant:

  • Si le fichier demandé n’est pas en cache, alors on crée le fichier en cache.
  • Si le fichier demandé est en cache alors
    • Si le fichier demandé n’est pas à jour, alors on met à jour le fichier en cache.
  • Si le fichier demandé est en cache alors
    • si le fichier demandé est à jour, alors on lit le fichier en cache (et on économise une requête HTTP)

Il existe différents niveaux de cache que l’on peut exploiter :

  • Cache navigateur
  • Cache applicatif
  • Cache MySQL
  • Reverse proxy
  • Cache de ressources statiques

Si votre site est sous WordPress, je vous recommande l’extension W3 Total Cache qui propose de nombreuses options d’utilisation du cache pour une utilisation avancée.

 

Minifiez, compressez et combinez vos fichiers JS et CSS

La minification des fichiers JS et CSS consiste à supprimer les caractères inutiles du code, tels que les espaces, indentation, commentaires etc. tout en garantissant son bon fonctionnement. C’est une étape très simple et très rapide, qui va permettre d’alléger les fichiers de scripts et styles téléchargés par le navigateur lors du chargement de la page.

Il existe plusieurs algorithmes de minification, les plus populaires sont JSMin (uniquement pour le JavaScript) et YUI Compressor (JavaScript et CSS).

La compression est une action différente mais complémentaire de la minification. La compression utilise un algorithme pour compresser les fichiers au niveau du serveur web (Deflate ou Gzip), les fichiers transitent ensuite sur le réseau puis le navigateur les décompresse. L’objectif ici est également de réduire le poids des fichiers transportés sur le réseau.

Enfin, la combination, encore une action complémentaire. Pour comprendre la combination, il faut d’abord comprendre que chaque élément, chaque script JavaScript, chaque feuille de style, chaque police utilisé pour la réalisation de sa page web correspond à une requête et réponse HTTP.

Concrètement, la combination va fusionner les fichiers JS et CSS entre eux afin de ‘mutualiser’ les requêtes/réponses HTTP et en diminuer le nombre. Attention tout de même, la combination possède quelques inconvénients auxquels il faut penser avant de la mettre en place.

 

Ne pas utiliser de requêtes SQL dans une boucle

Cela parait évident, pourtant ce n’est pas toujours le cas.

Le traitement d’une requête SQL est assez lourd, et l’objectif ici est de réduire le nombre de requêtes, donc de transports de données sur le réseau.

Par exemple, au lieu d’effectuer un INSERT dans une boucle qui effectue une insertion pour chaque entrée du tableau, mieux vaut insérer l’ensemble du tableau en une fois.

 

Évitez d’utiliser Flash pour vos animations

Flash est la technologie d’Adobe qui permet de créer des applications « riches » (jeux en ligne etc.)

Aujourd’hui, nous savons qu’utiliser Flash implique, hormis certaines problématiques de sécurité, une consommation CPU, mémoire vive et bande passante importante. Qui dit hausse de l’usage des ressources matérielles dit hausse de la consommation énergétique (et usure du matériel), au point qu’Apple avait décidé il y a plusieurs années de ne pas installer cette technologie sur ses terminaux mobiles (iPhone, iPad).

Globalement, tout ce qui peut être réalisé avec Flash peut également être fait avec HTML5/JavaScript (avec notamment certaines bibliothèques comme jQuery)

 

Limitez le nombre de plugins utilisés dans son CMS

On dit souvent que ce n’est pas le nombre de plugins qui compte mais la qualité du code pour le créer, et c’est plutôt vrai.

Cependant, plus on ajoute de plugins pour assurer certaines fonctionnalités (rejoint le point N°1 de cet article) plus on augmente la probabilité d’installer des plugins plus ou moins bien développés.  Par ailleurs, on charge également son site en nombre de ressources à télécharger et en taille de page, correspondant à la somme de la taille de chaque ressource.

Il n’est pas rare de tomber sur certains sites WordPress faisant appel à 80-100 ressources et dont la taille de la home page dépasse les 4 Mo.

Ma recommandation ici est donc de chercher à remplacer les plugins ‘trop flexibles’ et ‘trop gourmands’ via des plugins plus simples, qui assurent avec efficience la fonctionnalité recherchée. Ou pourquoi pas, développer ses propres plugins en ayant ces problématiques d’efficience en tête pour rendre son site web plus vert.

 

 

Pour aller plus loin :

Exceeding value – Standish Group

Green Web Hosting : How green is green ? – Green Planet

La compensation carbone – Info Compensation Carbone

Repaint& Reflow – Opera

Les sprites CSS – Alsacreation

La minification CSS, tout ce que vous vouliez savoir – DareBoost