L'écoconception, pour une sobriété numérique

Afin de réduire l’impact de votre site, il faut optimiser sa lisibilité : organiser et hiérarchiser ses contenus, afin d’offrir un parcours simplifié et fluidifier au maximum la navigation.
Il est essentiel de proposer un menu clair contenant moins d’onglets et d’alléger la structure en rationnalisant le nombre de pages. On limite le nombre de clics et de requêtes, et ainsi l’empreinte du site.

Avant de se lancer dans la réalisation, il est essentiel de bien définir les besoins de vos utilisateurs, comprendre leurs usages pour ne pas leur proposer de fonctionnalités inutiles.
L’interface doit être simple à comprendre, et surtout pratique : Posez-vous la question de l’intérêt d’une fonctionnalité, et si elle participe à un meilleur parcours utilisateur pour trouver plus facilement le contenu qu’il est venu rechercher sur votre site.

Vous l’avez compris, un site éco-responsable mise sur l’efficacité des visuels, et sur leur qualité plutôt que leur quantité. Pour un site écoconçu, le ratio texte/media est différent d’un site classique avec plus de place pour le texte. On va donc sélectionner des visuels de qualité professionnelle ou privilégier le travail du webdesigner sur la CSS et les ressources vectorielles. Aussi, avec un contenu rationnalisé, le choix des mots-clés est important afin d’obtenir des requêtes pertinentes.

Les recherches sur les téléphones mobiles dépassent désormais les requêtes sur ordinateur en France. Le « mobile-first » consiste à concevoir un site en mettant la priorité sur la version mobile puis en l’adaptant progressivement au format desktop. Cette démarche va donc plus loin que le responsive design, car on limite ici le contenu pour se focaliser sur l’essentiel, afin d’obtenir un affichage acceptable sur mobile. Une approche donc plus sobre, où les contenus et leur impact sont réduits, et totalement en phase avec l’éco-conception.

Les plugins permettant de faire de l’animation, telle un carrousel, peuvent être très gourmands en ressources. Souvent codées en Javascript, ces animations sont lourdes et doivent donc être utilisées uniquement si elles améliorent l’expérience utilisateur. Un carrousel automatique plein écran, par exemple, est à bannir. On va y préférer une animation CSS3, plus légère, et dont l’impact est minimal.
A éviter aussi, les widgets de toutes sortes (bot de chat, flux de réseaux sociaux, etc) qui dépendent de ressources externes et augmentent considérablement le temps de chargement.

L'utilisation d'un thème permet d’habiller votre site et son CMS en quelques clics. Nombreux sur le marché sont les thèmes premium "à tout faire" : ils intègrent une multitude de plugins permettant de les faire fonctionner, pour s’adapter à tout type de site, et sont par conséquent lourds. Les ressources incluses par défaut, souvent non utilisées, alourdissent les pages et donc leur chargement. En concevant du sur mesure, ou en utilisant un thème plus ciblé, vous n’injectez que ce qui est nécessaire aux besoins du site.

Exit les carrousels d’images HD « full screen », place aux visuels doux. Il y a plusieurs manières d’illustrer un propos, que ce soit par l’image, l’infographie ou le texte lui-même. Ainsi la mise en page d’un site écoconçu est certainement plus travaillée, et l’on va chercher à utiliser au maximum les ressources vectorielles disponibles, ou jouer sur les couleurs de la charte, le choix des typos.
La CSS sera donc plus étoffée, le format SVG et les polices d’icônes privilégiés, les images moyen format ou low-res (jpg travaillé en 2 couleurs par exemple).

Un texte, simplement mis en forme grâce au HTML/CSS, utilise beaucoup moins de bande passante qu’un texte illustré d’un média comme une vidéo, ou de photos. Fournir aux utilisateurs une alternative textuelle à ces contenus leur permet s'ils le souhaitent de lire plutôt que de visionner, et donc de consommer moins de ressources. Une action utilisateur peut proposer, via un script côté serveur, ce contenu alternatif. Et maintenir ce choix pendant toute la session de l’utilisateur.
Cette pratique est aussi bénéfique à l’accessibilité du site et son référencement.

Une étape primordiale avant la mise en ligne d’un site écoconçu est sa validation W3C, que l’on peut comparer à un contrôle qualité : Vérifier que le code HTML des pages est conforme aux standards du Web. Valider son site Web permet d’identifier les erreurs pénalisantes qui impactent les performances du site, le navigateur étant davantage sollicité pour corriger dynamiquement les éléments posant problèmes.

Il s’agit de compresser ou minifier les fichiers utilisés, afin d’en réduire leur taille : CSS, Javascript, images… Si l’on peut considérer cette étape comme du peaufinage, appliquer cette règle systématiquement à toutes les ressources du site permet un gain de performance non négligeable.

Côté développement, il y a aussi des bonnes pratiques à adopter : la construction de services ou API et un déploiement en serverless permet de décharger les besoins du serveur. Le code est alors déployé sur une plateforme dédiée à l’exécution de manière optimale, sur les ressources disponibles.
L’utilisation du cache permet également d’optimiser l’affichage en « stockant » les requêtes.

Concevoir un site écoresponsable c’est bien, l’héberger chez un prestataire de confiance et engagé dans une démarche responsable, c’est encore mieux. Vous pouvez privilégier un hébergeur qui utilisera majoritairement des centrales hydro-électriques pour alimenter ses centres par exemple.
En France, OVH s'inscrit dans la démarche européenne CISPE pour des datacenters climatiquement neutres.

Proposer un mode sombre de votre site permet de réduire l’espace blanc. C’est l’une des premières techniques popularisées pour économiser de l’énergie, mais qui a été oubliée avec l’avènement des écrans LCD, et leur rétroéclairage permanent, utilisant la même énergie quelle que soit la couleur réellement visible sur l’écran. Cependant, avec l’avènement des écrans OLED qui éclairent chaque pixel individuellement, l’utilisation de couleurs plus sombres est à nouveau une technique viable pour réduire l’énergie sur les appareils des utilisateurs finaux.