Être responsable à l’ère du numérique grâce à l’éco-conception de son site internet

Éco-conception web : définition

L’éco-conception web, c’est l’art de penser et de développer des sites internet en cherchant à réduire au maximum leur impact écologique. Ce processus commence dès les premières étapes de la création de votre site, en intégrant les principes de minimalisme et d’efficacité énergétique.

L’éco-conception de votre site web présente plusieurs avantages. 

L’éco-conception web améliore les performances de votre site. En effet, un site éco-conçu optimise l’utilisation de ressources. Les temps de chargement de vos pages sont réduits et la navigation plus fluide. Vous offrez ainsi une meilleure expérience utilisateur à vos internautes. À terme, cela peut avoir un impact positif sur la fidélisation de votre clientèle et sur l’image de votre marque.

L’éco-conception web joue également un rôle clé dans la visibilité de votre site internet. Les moteurs de recherche intègrent des critères d’éco-conception dans leurs algorithmes de référencement et valorisent de plus en plus les sites respectueux de l’environnement. Un site web développé sur la base d’un usage numérique responsable bénéficie d’un meilleur positionnement dans les résultats de recherche et est donc mieux exposé.

Enfin, elle s’inscrit dans votre démarche de Responsabilité sociétale d’entreprise (RSE). L’adopter, c’est démontrer que vous contribuez activement à réduire votre empreinte carbone. En adoptant une activité numérique responsable, vous vous engagez dans une démarche numérique responsable et répondez aux attentes grandissantes de vos clients, prospects et partenaires en matière de durabilité.

C’est le cas du Groupe RATP dont le site institutionnel a été entièrement éco-conçu. 

« Avec la refonte du site, nous voulions mettre en avant les engagements du Groupe en matière de RSE et de développement durable. Inscrire notre site dans cette démarche écoresponsable en réduisant son empreinte environnementale était une évidence. L’éco-conception était le chemin logique pour faire correspondre cet objectif à nos engagements. »

Margaux Nattier-Vasseur, responsable du site éco-conçu du Groupe RATP

Empreinte carbone d’une entreprise, de quoi parle-t-on ?

C’est la somme des émissions de gaz à effet de serre directes et indirectes générées par votre activité, de la production de vos produits ou services à la gestion de votre entreprise.

Pour la calculer, deux périmètres doivent être pris en compte : 

• Le périmètre « organisationnel » : toutes les émissions liées à votre installation (vos locaux, votre activité numérique, etc.).
• Le périmètre « opérationnel » qui comprend trois scopes différents :
  – Le scope 1 mesure les émissions directes de gaz à effet de serre. Par exemple, si vous avez une entreprise de fabrication de chaussures, ce scope comprend toutes les émissions liées à la fabrication de vos produits (matières premières et leur acheminement, transformation, etc.).
  – Le scope 2 mesure les émissions indirectes liées à la production d’énergie sous forme d’électricité ou de chaleur.
  – Le scope 3 mesure toutes les autres émissions indirectes, de la gestion des déchets au sein de votre entreprise, mais aussi l’utilisation finale de vos produits par vos clients.

Pour réaliser votre bilan d’émission de gaz à effet de serre (GES), l’ADEME met à votre disposition des ressources pratiques.

Créez un site web éco-conçu : les bonnes pratiques

Dans une démarche d’éco-conception web, « faire mieux avec moins » est le mot d’ordre. L’objectif est de concentrer l’effort sur l’essentiel et d’éliminer le superflu, et ce dans tous les aspects de votre site : hébergement, design, fonctionnalités, fichiers, plugins, etc.

Pour l’éco-conception de son site institutionnel, le Groupe RATP a procédé en cinq grandes étapes.

« Nous avons d’abord conçu un cahier des charges fondé sur la logique de l’éco-conception, avec un fort accent sur l’accessibilité numérique. Puis nous avons fait évoluer la charte graphique du Groupe pour la faire correspondre aux spécificités de l’éco-conception. Parallèlement, nous avons mené un travail sur l’arborescence des contenus de notre site pour ne garder que l’essentiel. Nous avons réalisé ce même travail de tri sur le code, que nous avons simplifié et allégé.
Enfin, après la mise en ligne, nous avons coordonné toutes les équipes internes pour les acculturer aux enjeux de l’éco-conception (limiter les contenus publiés, alléger les ressources, etc.) »

Margaux Nattier-Vasseur, responsable du site éco-conçu du Groupe RATP

Choisissez un hébergement vert

Une démarche numérique responsable débute bien avant la réflexion sur le design ou le contenu : elle commence avec la sélection d’un hébergeur engagé dans la réduction de son impact écologique. 

Opter pour un hébergeur vert, c’est choisir une entreprise qui alimente ses serveurs via des énergies renouvelables, comme l’éolien ou le solaire, et/ou qui compense ses émissions de CO2 par des projets écologiques, et cherche à réduire sa consommation d’eau. Privilégiez toujours un hébergeur local pour réduire les distances de transmission des données, vous atténuerez ainsi l’empreinte carbone liée au réseau de distribution.

Des hébergeurs comme Greenshift, O2switch et PlanetHoster proposent des solutions d’hébergement responsables, qui allient performance et respect de l’environnement. Ces hébergeurs s’engagent à utiliser de l’énergie verte et à optimiser l’efficacité énergétique de leurs data centers.

Optez pour des fonctionnalités économes

En choisissant des langages de programmation et des technologies économes en ressources, vous réduisez significativement la quantité d’énergie nécessaire au fonctionnement de votre site. Chaque ligne de code a son importance : plus le code est léger et efficace, moins le serveur et le dispositif de l’utilisateur final auront à travailler pour charger et afficher les pages, ce qui diminue la consommation d’énergie.

Préférez l’utilisation de polices de caractères standard largement répandues. En effet, si vous intégrez des polices de caractères peu communes qui nécessitent d’être téléchargées par le navigateur de l’utilisateur, vous augmentez le temps de chargement de vos pages et, par conséquent, la consommation d’énergie.

Globalement, sur chacune de vos pages, demandez-vous si tous les éléments sont nécessaires. Par exemple, un carrousel décoratif de 50 images peut sembler attrayant, mais s’il n’apporte pas de valeur ajoutée concrète à l’utilisateur, son impact environnemental est-il vraiment justifié ? En vous posant la question de l’utilité réelle de chaque fonctionnalité, vidéo, image ou script, vous éliminez le superflu et ne conservez que l’essentiel. Votre site sera plus léger et respectueux de l’environnement.

Le Groupe RATP a ainsi dû renoncer à certaines fonctionnalités pour développer un site éco-conçu.

« Nous avons revu toutes les fonctionnalités habituelles d’un site pour limiter la consommation énergétique du serveur. Il a fallu limiter les appels aux flux de données, alléger les données inscrites en base et limiter l’injection de flux externes. 
Côté design, nous avons choisi de conserver les éléments graphiques basiques et de limiter l’utilisation des images et des vidéos.
Enfin, nous avons revu l’archivage de nos informations. Il a fallu imposer des règles de conservation plus strictes. Par exemple, les articles de presse ne peuvent pas être conservés plus de six mois sur le site. »

Margaux Nattier-Vasseur, responsable du site éco-conçu du Groupe RATP

Découvrez tous nos conseils pour rendre votre site éco-responsable !

Adoptez un design épuré

Toujours dans cette optique d’éliminer le superflu, l’adoption d’un design épuré est clé. Une interface simple et sobre facilite l’expérience utilisateur, et minimise son impact sur l’environnement. 

Là encore, moins il y a d’éléments à charger (images lourdes, animations complexes, scripts excessifs), moins la consommation d’énergie est importante, tant pour les serveurs que pour les appareils des utilisateurs. Un design épuré se traduit par une navigation intuitive, où chaque fonctionnalité, chaque bouton et chaque image servent un objectif précis.

Pensez à rendre votre site web « responsive », c’est-à-dire qui s’adapte automatiquement à la taille de l’écran sur lequel il est affiché, que ce soit un ordinateur de bureau, une tablette ou un smartphone. Vous évitez ainsi de créer et de maintenir plusieurs versions de votre site pour différents appareils, et réduisez les ressources nécessaires. Une démarche d’autant plus intéressante qu’elle peut être favorable à votre référencement naturel, car les moteurs de recherche valorisent les sites qui offrent une bonne expérience utilisateur sur mobile.

Comment créer la version mobile de votre site web ?

Compressez vos fichiers et limitez les ressources lourdes

En choisissant des formats de fichiers adaptés au web, vous réduisez la taille des données à charger, et diminuez la consommation d’énergie nécessaire pour accéder à votre site. Un poids idéal pour une image sur le web se situe généralement en dessous de 100 Ko, bien que cette limite puisse varier en fonction du contexte et de la qualité de votre visuel.

Voici quelques astuces pour réduire le poids de vos visuels : 

• Privilégiez le format JPEG pour les images, car il offre un bon compromis entre qualité et poids du fichier, en particulier pour les photos ;
• Pour les graphiques ou les logos, des formats comme le WebP sont une alternative plus légère que le PNG et maintiennent une qualité d’image élevée ;
• Pensez à utiliser des icônes à la place des images pour alléger vos pages web. Les icônes, souvent vectorielles, pèsent nettement moins lourd que les images et se chargent plus rapidement.

Les vidéos doivent être utilisées avec parcimonie, car elles sont particulièrement lourdes et leur présence peut significativement augmenter le temps de chargement d’une page. 

Pensez d’ailleurs à désactiver leur lecture automatique. Vous permettez ainsi aux visiteurs intéressés de choisir de visionner la vidéo, sans imposer inutilement le chargement d’une ressource conséquente aux autres. Une approche qui respecte le choix de l’utilisateur tout en minimisant l’impact environnemental associé au transfert de données volumineuses.

Utilisez les règles de cache

L’utilisation des règles de cache permet d’optimiser la performance de votre site et de réduire son impact. 

Le principe repose sur la mise en mémoire cache des ressources qui se répètent à travers les différentes pages d’un site, telles que les feuilles de style CSS, les scripts JavaScript, et les images. Ces éléments sont stockés dans le navigateur de l’internaute lors de sa première visite sur le site. Dès la deuxième visite, le navigateur de l’utilisateur récupère ces ressources directement depuis son propre stockage, au lieu de les télécharger à nouveau depuis le serveur. 

Vous diminuez ainsi considérablement le nombre de requêtes envoyées au serveur, et donc la charge sur les infrastructures d’hébergement et la consommation d’énergie associée à la transmission des données. Une méthode avantageuse, car elle permet d’accélérer le temps de chargement de vos pages côté utilisateur, et donc d’améliorer son expérience de navigation.

Pour mettre en place la mise en cache, vous pouvez créer le code vous-même ou bien installer un plugin ou une fonctionnalité de mise en cache souvent proposés par votre hébergeur.

Faites la chasse aux plugins inutiles

L’utilisation excessive de plugins peut devenir un fardeau pour la performance de votre site web, notamment pour ceux construits avec des systèmes de gestion de contenu comme WordPress. Chaque plugin ajouté introduit des lignes supplémentaires dans le code source du site et peut ralentir, parfois de façon très significative, le temps de chargement de vos pages. Gardez bien en tête que plus le temps de chargement est long, plus la consommation d’énergie nécessaire pour faire fonctionner le site est importante, tant du côté serveur que du côté internaute.

Les possibilités de personnalisation avancée que proposent les plugins peuvent être attrayantes, mais avant de les installer, demandez-vous si elles sont réellement nécessaires pour votre site web. Optimiser le code ou utiliser des solutions plus légères peut parfois suffire.

Avec l’éco-conception de son site, le Groupe RATP a fait rimer écoresponsabilité avec efficacité.

« Depuis la mise en ligne, nous avons changé la manière de travailler sur nos contenus. Nous essayons de faire du qualitatif plutôt que du quantitatif. Avec l’éco-conception, nos pages se chargent aussi plus rapidement ce qui offre une meilleure expérience à nos utilisateurs. Et ça fonctionne : notre trafic a doublé ! »

Margaux Nattier-Vasseur, responsable du site éco-conçu du Groupe RATP

Plus qu’une tendance, l’éco-conception web est essentielle pour un usage du numérique responsable. À vous de jouer !