← SITE WEB “BAS CARBONE”

SOMMAIRE

→ ÉTAT DES LIEUX
→ GRAPHISME : Alléger les sites
→ CODE & UX
→ HÉBERGEMENT
→ CONCLUSION

1. ÉTAT DES LIEUX

La consommation d’énergie et les émissions provenant d’Internet sont énormes.

2. GRAPHISME : ALLÉGER LES SITES

RÈGLES DE BASE

• Préférer des glyphes aux images (par exemple utiliser le tiret “_” pour les liserets, penser un logo à base de Glyphes...).
  
• Se limiter à une ou deux typographies et utiliser moins de style (Less is more !) et choisir des Fonts issues de bibliothèques web ; ou mieux ne pas définir de typographie et laisser la police par défault du navigateur.
  
• Recycler vos images /actifs au lieu d’en télécharger de nouvelles (donner une seconde vie à une image avec un filtre CSS par exemple : une en couleur, une en noir en blanc, une avec un flou, en superposant plusieurs...)
  
• Éviter la lecture automatique des vidéos. Laissez le choix à votre internaute de visualiser ou non votre vidéo, afin de ne pas démultiplier les chargements inutiles.
• Utilisez le lazy loading pour vos images et médias. Ce chargement différé des médias se fait uniquement en fonction des besoins réels de votre visiteur.
  
• Limiter les templates ou en choisir des simples (sur Wordpress, ce thème à été conçu pour être aussi léger que possible, seulement 6 ko)

COMPRESSION D’IMAGE

Formats de fichiers
Pour les photographies, images non vectorisées privilégier le PNG-8 dithered (~5-100kb),
pour les textes et diagrammes vectorisés privilégier le SVG (~10kb).

Image 1 :exporter pour le web en niveaux de gris avec Photoshop/Illustrator
Image 2 :exporter pour le web en sélectif si des couleurs doivent apparaître

Le format WebP, développé par Google en 2010, est un format d’images qui a pour objectif de remplacer, à terme, le JPEG considéré comme obsolète et peu performant.Le WebP se démocratise, car il permet des fichiers images de haute qualité avec uneréduction de leur taille jusqu’à 80 % par rapport au JPEG et jusqu’à 30 % par rapport au PNG) et il prend en charge les images animées (ex. gif) et la transparence (ex. png).

Malgré une dizaine d’année d’existence, le Webp reste peu utilisé car pendant longtemps, de nombreux navigateurs (Firefox, Edge, etc) ne le prenaient pas en charge. Encore aujourd’hui, il est tres compliqué d’afficher les fichiers Webp avec Safari .

Comment convertir vos images en Webp ? Personnellement j’utilise Webpconv qui permet une conversion en lot de fichiers. Sur Wordpress, avec le plugin gratuit WebP Express, vous pouvez servir des images Webp auto-générées aux navigateurs qui les supportent, tout en servant des JPEG et des PNG aux utilisateurs Safari.

La diffusion d’erreur est une ancienne technique de compression d’image. Le nombre de couleurs d’une image, combiné avec son format de fichier et sa résolution, détermine la taille de cette image. Plutôt que d’utiliser des images en couleurs HD, il s’agit de convertir toutes les images en noir et blanc, avec quatre niveaux de gris.
Ces images en noir et blanc sont ensuite colorées en fonction de la catégorie de leur contenu via le code CSS. Cette technique permet des images 10 fois plus légeres.

Image du site LowTechMagazine

Compresser en ligne
Si vous ne souhaitez pas passer par la technique de la diffusion d’erreur (dithering) et donc maintenir vos images dans leur esthétique première alors vous pouvez utiliser un service de compression comme reSmushit, ImageCompressor, ImageOptim  ou encore Compressor. La compression vous permet de réduire le poids de votre image de 90 %, tout en préservant la qualité de vos fichiers : la différence est imperceptible à l’œil.
La compression lossy est également une piste a creuser.

OPTIMSATION VIDÉOS

Encore plus gourmandes en data que les images, les vidéos posent un réel problème. Alourdissant la note, elles offrent généralement une qualité et une taille beaucoup trop élevées pour le web. En effet, comme pour les images, les vidéos basses déf sont largement suffisantes.

Sans parler de bannir les vidéos, il est possible de les optimiser.
Est-il bien nécessaire que votre vidéo soit en 1080p, compte tenu de la taille de la fenêtre et du contexte d’utilisation ? Le générique de 15 secondes est-il réellement indispensable ? Posez-vous ces quelques questions afin d’alléger et de raccourcir vos vidéos au maximum.

Gauthier Roussilhe a trouvé un outil pour réduire considérablement le poids de des vidéos sans perte de qualité apparente : Handbrake. C'est un outil de conversion vidéo miraculeux et assez facile à prendre en main si on a les bons paramètres. En suivant les paramètres de Benoit Labourdette, il a réduit de 75% le poids de ses vidéos hébergées. Il a également décidé que le format 720p (1280*720) était nécessaire à la bonne compréhension des vidéos. Maintenant il travaille avec des textes plus gros quand il fait de l'animation afin d'éviter toute problème de lecture.

3. CODE & UX

Le “green UX” n’en est encore qu’à ses balbutiements et ces quelques recommandations sont, bien entendu, imparfaites. Toutefois, le facteur environnemental ne peut plus être  ignoré et il est amené à prendre une place de plus en plus importante dans les méthodes de travail des web designers.

RÈGLES DE BASE

• Faire un site statique
  
• Améliorez la navigation de votre site /  Fluidifier le parcours utilisateur permet de faire les tâches plus vite et donc consommer moins
  

• Garder uniquement les fonctionnalitées essentielles pour les utilisateurs : une approche “mobile first”  
• Favoriser un design épuré avec un CSS simple et éviter les effets JavaScript 
• Mettre en cache tout ce qui peut l’être, et bien utiliser les en têtes Expires, Cache-Control, et les ETags pour que le cache soit le plus efficace possible.

• Ne pas redimensionner vos images par le navigateur (avec width, height).

• Utiliser le CSS pour les effets graphiques/images (dégradés, coins arrondis... ) plutôt que des images
• Respecter l’historique du navigateur, ne pas forcer de refresh avec les boutons précédent / suivant
• Décharger les grands médias vers des fournisseurs tiers qui sont respectueux de l’environnement.

Si vous voulez pousser la question, je vous renvois vers l’article de Alex Soyes qui dévelloppe cette question de son point de vue de dévellopeur et vers le résumé du livre 115 bonnes pratiques eco-conception web.

SITE STATIQUE

Un site Web statique est généré une fois et existe sous la forme d'un simple ensemble de documents sur le disque dur du serveur. Il est toujours là - pas seulement lorsque quelqu'un visite la page contrairement à un site dynamique qui génère la page à chaque visite. Ils nécessitent donc beaucoup moins de puissance de traitement et donc moins d'énergie. Un site low tech est donc forcément statique. De nombreuses solutions existent pour se faire : Hugo, Jekyll, Pelican, etc...

Je n’ai pas encore pousser la question, je vous renvoi vers ces 2 articles très complets : What a website can be et de nouveau Alex Soyes.

MOBIL FIRST

Commencer par concevoir le site pour des appareils mobiles, qui ont des petits écrans et sont plus lents que les ordinateurs de bureau.
Cela permet de se focaliser sur l’essentiel au niveau fonctionnalités, et aussi d’être efficient à plein de niveaux : taille des pages, animations, traitements javascript, lisibilité... Il faut commencer par coder pour le mobile, puis décliner en format tablette, puis desktop (ordinateur).

La régle de base est simple, ne pas avoir plus d’élèments visible sur l’ordinateur que sur le mobile. Avoir une approche mobile first consiste surtout à n’afficher que les informations nécessaires pour aller à l’essentiel.

4. HÉBERGEMENT ÉCOLOGIQUE

PROXIMITÉ

Choisir un hébergeur proche de vos visiteurs : le transport des données consomme de l’énergie. La proximité de l’hébergeur a donc un impact certain sur l’empreinte du site web. De plus, il faudra s’assurer que ses installations soient économes en énergie, se renseigner sur sa politique RSE et sa gestion des DEEE... Si vous coulez en savoir plus je vous conseil cet article pour identifier un hébergeur “vert”.

ÉNERGIES VERTES

Alimenter son site aux énergies renouvelables : C’est chose possible grâce au système de certificat d’électricité verte. Les hébergeurs de ce type ont pour particularité d’utiliser uniquement des énergies renouvelables (solaire, éoliens, géothermie, énergie hydroélectrique…) pour faire fonctionner leurs data centers, mais aussi de les refroidir (le plus possible) par des moyens naturels.  Le choix d’un hébergement web écologique  comme Infomaniak et bien d’autres est une bonne façon de limiter son impact environnemental.

S’AUTO-HÉBERGER

Il y a une façon intéressante de s'auto-héberger tout en réduisant son empreinte carbone : en récupérant du vieux matériels informatiques dirigés vers les casses, les réparer et les utiliser comme serveur. Lowtech.org documente abondamment leurs procédés de récupération et de réparation. Le site de Low-tech Magazine (une référence dans le web écologique) est auto-hébergée et alimentée à l'énergie solaire.

COMPENSATION CARBONE

Tu achètes des “crédits-carbones “ auprès d’entreprises dont le but est de faire diminuer le CO2…

Mesurer les émissions carbone de votre site web :

• Ecometer : Ce service en ligne base son analyse sur des critères reconnus d’efficacité écologique 

• Outils Green IT : Les outils du collectif Green IT sont reconnus pour leur pertinence 
• Website Carbon
  
• Ecograder

Premier prototype du serveur solaire qui exécute le nouveau site Web de Low-tech Magazine. Le contrôleur de charge solaire (à droite) alimente le serveur (à gauche) via un câble USB .

CONCLUSION

Le web bas carbone, offre de nombreux champs encore inexploités qui vont demander beaucoup d'imagination et d'innovation pour s'adapter aux contraintes énergétiques, écologiques et techniques. Tout est à faire et j'espère que de plus en plus de designers graphiques s'en saisiront pour proposer des nouvelles esthétiques et expériences.

Réduire l’empreinte écologique de son site permet d’en améliorer les performances, l’accessibilité, de réduire sa facture électrique, de réduire la fracture numérique… Un Web à faible teneur en carbone est donc une véritable solution gagnant-gagnant pour les propriétaires de sites Web, les internautes et l’environnement.

La conception écologique n’a pas un impact que pour la planète. Un site conçu de manière légère et intelligente va favoriser d’autre éléments :

• Equité sociale : un site simple et épuré, sera plus accessible sur des vieux appareils ou chez des personnes avec une connexion limitée.
• Accès aux personnes en situation de handicap : un code propre et adapté aux logiciel d’adaptation aux handicaps permettra au site d’être accessible à tous

• Performance : des temps de chargement plus rapides, favorisent l’expérience utilisateur donc la conversion (inscriptions, ventes…)

Avec du bon sens, de la volonté, il est possible de créer un web plus inclusif, moins polluant et proposant toujours une meilleure expérience utilisateur.