Éliminer les fonctionnalités non essentielles

Plusieurs études démontrent que 70% des fonctionnalités demandées par les utilisateurs ne sont pas essentielles et que 45% ne sont jamais utilisées. Alors c’est en réduisant la couverture (menu) et la profondeur fonctionnelle de l’application ou du site internet que l’on abaisse son coût de développement initial, sa dette technique et les impacts environnementaux associés. On diminue donc mécaniquement l’infrastructure nécessaire à son exécution. Plus l’application est maigre fonctionnellement, plus elle sera simple à utiliser. Il faut donc réduire le plus possible l’architecture Web en la centrant sur le besoin essentiel de l’utilisateur.

Rendre fluide le processus

Le temps passé par l’utilisateur sur un site web ou un service en ligne est le facteur le plus déterminant pour réduire ou augmenter l’empreinte environnementale de ce site. Autrement dit, moins l’utilisateur passe du temps sur le site internet, plus on réduit les impacts environnementaux associés.

Il faut donc réduire au minimum le nombre d’écrans d’étapes et d’interactions inutiles, sans pour autant créeras des écrans trop riches et complexes, qui seraient alors contre-productifs.

Favoriser un design simple et minimaliste

Exploiter les fonctionnalités d’HTML5 et de CSS3 pour concevoir le design du site. Il ne faut surtout pas imaginer un site web sans prendre en compte les contraintes techniques, puis essayer de le réaliser. C’est donc de limiter les images, limiter les vidéos, limiter la couleur, limiter tout élément visuel qui serait lourd pour le site web.

Respecter la navigation rapide dans l’historique

Les navigateurs possèdent une fonction de navigation rapide dans l’historique (bouton page précédente et page suivante). Grâce à cette fonction, il n’est pas nécessaire de redemander la page au serveur, puis de la recharger. On évite alors de consommer inutilement de la bande passante et de générer des requêtes HTTP supplémentaires.

Il faut donc éviter:
01. Les boutons de formulaire qui se désactivent lors de la soumission
02. Les menus qui ne fonctionnent plus après un clic

Limiter le nombre de requêtes HTTP

Le temps de chargement d’une page côté navigateur est directement corrélé au nombre de fichiers que le navigateur doit télécharger, et au poids de chaque fichier. Selon le type de serveur web que vous utilisez, plus le nombre de requêtes par page est important, moins vous pouvez servir de pages par serveur. Diminuer le nombre de requêtes par page est important pour réduire le nombre de serveurs HTTP nécessaire au fonctionnement du site, et donc les impacts environnementaux associés

Le gain potentiel de cette pratique équivaut à une grande réduction de la charge des serveurs, donc du nombre d’équipements nécessaires et de leur empreinte environnementale et économique.

Limiter le recours aux plug-ins

Il faut éviter d’utiliser des plug-ins, comme Flash Player, Machines Virtuelles, Java et Silverlight, car certains consomment beaucoup de ressources (mémoire vive). Il faut donc préférer les technologies standards comme HTML5.

Remplacer les boutons officiels
de partage des réseaux sociaux

Les principaux réseaux sociaux tels que Facebook, Instagram, Twitter, etc. Fournissent des plug-ins à installer sur une page web. Ces plug-ins sont extrêmement lourds. Mieux vaut leur préférer des liens directs, en HTML, vers les pages de partage.

Choisir le bon Hébergement

L’hébergeur Web est énergivore et peu écologique en 2021. Il faut dorénavant se retourner vers des hébergeurs qui ont une infrastructure web environnementale.  Les plus gros consommateurs d’énergie sont actuellement les centres de données des hébergeurs. Il s’agit un lieu dans lesquels sont stockés et transitent l’ensemble des données de l’internet, qui n’ont de cesse de se multiplier, dans le but de répondre aux besoins grandissants d’un monde devenu digital et de plus en plus connecté.

Les hébergeurs verts de sites Web tentent de résoudre ce problème, en investissant dans des systèmes de compensation des émissions de carbone, de sorte que pour chaque unité d’énergie qu’ils utilisent, ils paient pour produire la même quantité d’énergie (ou parfois plus) à partir d’énergies renouvelables et l’injectent dans leur réseau énergétique.

Voici quelques hébergeurs:
+ OVH
+ Green Geeks
+ Eco Host
+ WHC

Limiter le nombre de CSS

Il faut limiter le nombre de CSS pour ne pas multiplier les requêtes HTTP. Si plusieurs feuilles de styles sont utilisées sur toutes les pages du site, par exemple, il est de mise de les mettre dans un fichier unique.

Préférer les CSS aux images

Utiliser les propriétés de CSS3 à la place d’images. Le poids d’une feuille de styles CSS est nettement plus faible qu’une image. L’utilisation d’une feuille de style ne génère qu’une seule requête HTTP, contre un grand nombre si l’on emploie beaucoup d’images.

Grouper les fonctionnalités similaires
dans CSS

Lorsque plusieurs éléments des fonctionnalités ont des propriétés CSS communes, il est essentiel de regrouper les éléments dans la même feuille de style. Cette méthode permet de réduire le poids de la CSS.

Toujours fournir une CSS print

Outre le service apporter à l’utilisateur, cette feuille de style réduit le nombre de pages imprimées et donc directement l’empreinte écologique du site web. Opter pour une page CSS épurée.

Favoriser les polices standards

Référer les polices standards, car elles sont déjà présentes sur l’ordinateur de l’internaute, qui n’a donc pas besoin de les télécharger. On économise ainsi la bande passante, tout en accélérant l’affichage du site.

Il faut davantage privilégier des polices de caractères comme: Courrier New, Georgia, Arial, Impact, Helvetica, Tahoma, Times New Roman, Verdana, Segoe UI, etc. Consulter les polices standards: Famille_de_polices_pour_le_Web

Police par défaut, pas de logo

Toutes les ressources chargées, y compris les polices de caractères et les logos, constituent une demande supplémentaire adressée au serveur, nécessitant un espace de stockage et une consommation d'énergie. Par conséquent, notre nouveau site Web ne charge pas de police de caractères personnalisée et supprime la déclaration de famille de polices, ce qui signifie que les visiteurs verront la police par défaut de leur navigateur. Un seul poids (normal) d'une police est utilisé, ce qui montre que la hiérarchie du contenu peut être communiquée sans charger plusieurs polices et poids. Les visiteurs verront la police par défaut de leur navigateur, éliminant ainsi le besoin de charger une police personnalisée.

Les images

L'un des principaux défis est de réduire la taille globale du site Web. En particulier pour essayer de réduire la taille de chaque page à moins de 1 Mo. Choisir le bon format d’image est inévitable pour éviter d’augmenter les octets et donc économiser la bande passante. Toutefois, avec la multiplication des terminaux, des tailles d’écran et l’augmentation de leur résolution, une approche vectorielle doivent être privilégiés par rapport à des images matricielles (bitmap).

Ce qu’il faut savoir c’est qu’il faut remplacer les images bitmap (GIF, PNG, JPG, etc.) par des styles CSS, des pictogrammes, des glyphes ou encore des icônes fournies par un web font ou une police standard. L’utilisateur n’a donc pas à télécharger quoi que ce soit. Il est d’autant plus préférable d’utiliser des images vectorielles que matricielles au format SVG. Le format vectoriel est 5 à 10 fois moins lourd qu’un format bitmap.

Les images tramées

Le principal défi est de réduire la taille des pages sans rendre un site Web moins attractif. Les images occupant la majeure partie de la bande passante, il serait facile d'obtenir des pages de très petites tailles et une consommation d'énergie moindre en éliminant les images, en réduisant leur nombre ou en les rendant beaucoup plus petites.

Pour assurer une qualité et un faible poids aux images, il suffit de choisir d'appliquer une technique de compression d'image obsolète appelée «dithering». Le nombre de couleurs dans une image, combiné avec son format de fichier et sa résolution, contribue à la taille d'une image. Ainsi, au lieu d'utiliser des images haute résolution en couleur, il faut choisir de convertir toutes les images en noir et blanc, avec quatre niveaux de gris entre les deux. Ces images en noir et blanc sont ensuite colorées en fonction de la catégorie de contenu correspondante via les capacités natives de manipulation d'images du navigateur. Compressées via ce plug-in de tramage, les images présentées dans les articles ajoutent beaucoup moins de charges au contenu: par rapport à l'ancien site Web, les images sont environ dix fois moins gourmandes en ressources.

Optimiser les images vectorielles

Les images SVG ont deux avantages: premièrement, elles peuvent être réduites et agrandies à l’infini sans aucune perte de qualité; d’autre part, elles sont, la plupart du temps, moins lourdes que des images bitmap. Il y a un gain potentiel jusqu’à 75% de KO en moins.

Sources

Site Web et livre, Low Tech Magazine.
https://solar.lowtechmagazine.com/fr

Frederic Bordage, livre, 3e Édition.
Écoconception web, les 15 bonnes pratiques. Doper son site et réduire son empreinte écologique.

Documentation, Nicolas Nova et Gauthier Roussilhe.
Du low-tech numérique aux numériques situés.