Site internet
Diminuer l’empreinte environnementale de son site web en 25 bonnes pratiques
Les impacts du web sur l’environnement ne sont plus à démontrer…quoi que. D’après le collectif GreenIT.fr, l’empreinte écologique annuelle mondiale du numérique représente 1 500 millions de tonnes de CO2 et 7,8 milliards de mètres cubes d’eau. Le numérique joue donc un rôle majeur dans l’émission des gaz à effet de serre coupables du réchauffement climatique, mais aussi dans l’épuisement des ressources naturelles.
Quand on parle de numérique, on entend tous les appareils électroniques (Smartphones, ordinateurs, tablettes et autres objets connectés), mais aussi toutes les interfaces web (site internet, applications) et les logiciels. Une grande partie des ressources énergétiques sont utilisées au moment de la fabrication des appareils, mais aussi pour alimenter les serveurs par exemple.
Enfin, environ 50% des énergies sont consommées par les utilisateurs au moment de l’utilisation. Alors comment faire en sorte de diminuer au maximum l’impact de votre site internet sur la planète ? De nombreuses pratiques sont désormais connues (ex: réduire la taille des images). Mais avec ce guide, nous souhaitons aller un peu plus loin pour vous faire découvrir 25 pratiques à fort impact immédiat sur l’efficience et l’impact environnemental de votre site internet.
Simplifier, tout simplement
Ça peut sembler trop facile, pourtant une grande partie du problème se trouve ici. Le référentiel développé par GreenIT fait d’ailleurs référence à plusieurs études ayant démontré que 70% des fonctionnalités demandées par les utilisateurs ne sont pas essentielles et que 45% ne sont tout simplement jamais utilisées !
Développer des sites plus simples, mais mieux pensés, est donc primordial. Ceci passe par plusieurs manœuvres qui nécessitent de bien déterminer les objectifs du site en amont. C’est souvent lors du choix du thème du CMS que les choses se compliquent inutilement, sans même vous en rendre compte. Lorsque ce dernier est installé, de nombreuses extensions s’ajoutent avec des fonctionnalités qui dépassent bien souvent vos besoins. Ceci augmente nécessairement le poids des pages, le nombre de requêtes serveur et complexifie l’administration de vos contenus. C’est pourquoi il est important d’exprimer clairement vos objectifs en amont du projet de conception du site afin qu’on vous oriente vers un choix de thème adapté à vos réels besoins.
Ainsi, les conditions suivantes doivent être respectées pour simplifier au maximum les interfaces :
- Retenir uniquement les fonctionnalités essentielles
- Supprimer les fonctionnalités non utilisées
- Quantifier précisément le besoin par fonctionnalité
- Choisir correctement son thème
- Limiter les extensions dans un CMS
Le UX design joue un rôle clé
Réduire le temps que l’utilisateur met pour faire l’action recherchée sera très efficace pour réduire l’impact écologique de votre site. Concrètement, il peut s’agir par exemple de permettre à un internaute de passer une commande sur un site e-commerce sans avoir à créer de compte. L’optimisation du parcours utilisateur est donc au centre de l’écoconception d’un site web.
De plus, privilégier une approche “mobile first” est vivement recommandé afin d’éviter de consommer des ressources comme de la bande passante ou de la mémoire vive inutilement. Lorsque ce n’est pas possible, créer une interface qui permet un chargement adaptatif (responsive) est une bonne alternative. Favoriser autant que possible un design de site épuré et adapté au web est important, tout en respectant évidemment l’univers de marque et ses composantes graphiques. Des alternatives créatives peuvent être trouvées en web design afin de respecter votre charte graphique tout en l’adaptant aux besoins du web.
Nous retiendrons les éléments principaux suivants concernant l’étape de conception :
- Concevoir le site prioritairement pour les mobiles lorsque c’est possible
- Faire des tests utilisateurs pour valider le parcours proposé
- Éviter les animations JavaScript/CSS
- Limiter les carrousels et privilégier les pages statiques
- Privilégier un web design épuré et le plus simple possible
- Éviter les pages sans fin où l’on scroll à l’infini et préférer la pagination
Optimiser ses contenus intelligemment
Le texte utilise bien moins de bande passante qu’un contenu vidéo ou audio. On ne viendra pas vous dire d’arrêter de créer des contenus multimédias si ces derniers sont pertinents. Par contre, offrir une alternative textuelle peut s’avérer gagnant sur 3 plans : si l’utilisateur décide de lire le texte plutôt que de regarder la vidéo, moins de données seront transférées; vous rendez votre contenu accessible aux malentendants; vous améliorez votre référencement naturel.
Aussi, intégrer des documents à l’intérieur des pages engendre un chargement à l’intérieur d’un contenu existant, même lorsque l’utilisateur ne s’y intéresse pas. Pour limiter ce gaspillage de bande passante, il est conseillé d’insérer des liens de téléchargement.
Limiter l’utilisation d’images matricielles est essentiel pour éviter de transporter des octets inutilement. De plus, une approche vectorielle est désormais à privilégier puisque les appareils ont des écrans de tailles et de résolutions différentes qui ne cessent d’augmenter. Concrètement, il faut au maximum remplacer les formats d’images matricielles (JPEG, PNG, GIF, WebP etc.) par des styles (CSS), des pictogrammes ou encore des icônes fournis par une webfont standard. Si aucun de ces formats ne vous permet d’obtenir l’effet désiré, vous pouvez opter pour une image vectorielle au format SVG. Il est parfois impossible de remplacer des images matricielles, surtout quand elles sont une composante indispensable à l’expression de votre marque. Il s’agit surtout de limiter leur quantité.
Retenons donc qu’il est idéal de :
- Fournir un texte comme alternative à une vidéo ou un contenu audio
- Favoriser des polices standard déjà présentes sur l’ordinateur des utilisateurs
- Offrir des liens de téléchargement pour les documents
- Limiter l’utilisation d’images matricielles
- Optimiser les images en réduisant leur poids
- Remplacer les boutons officiels de partage des réseaux sociaux par des liens direct en HTML
- Éviter la lecture et le chargement automatique des vidéos et des contenus audio
- Compresser les documents et optimiser les PDF pour le web
- Avoir une stratégie de fin de vie des contenus pour qu’ils ne soient pas stockés inutilement
Gérer les données différemment
- Stocker localement les données statiques
- Définir une politique d’expiration et de suppression des données
- Stocker les données dans le cloud
- Limiter l’installation d’outils d’analyse de données visiteurs
- Choisir un hébergeur le plus écoresponsable possible.
