Cahier des charges pour l’eco conception d’un site web

février 3, 2023
Cahier des charges pour l’eco conception d’un site web
post

Si vous souhaitez vous faire accompagner, n’hésitez pas à contacter notre agence d’éco conception web de Bordeaux.

Besoin d’aide pour définir votre cahier des charges ?

Nous abordons les questions sur l’eco conception site web en termes de consommation d’énergie, d’émissions de carbone et de consommation d’eau.

1. Estimer l’impact environnemental de son produit

Aujourd’hui est indispensable de prendre au sérieux la notion d’écoconception web lors de la création d’un site internet et de son cahier des charges. Il faut l’adopter comme une solution nécessaire afin d’obtenir un site web plus léger et plus efficace qui assure une meilleure expérience utilisateur. Pour cela, il est possible de suivre les bonnes pratiques d’écoconception de Green IT, qui se trouve également sur EcoDesign.dev. Cet un outil de mesure vous aide à améliorer de votre impact numérique et vous donne beaucoup de recommandations pour optimiser celui-ci.

Les outils de mesure

Pour compléter l’analyse faite sur EcoDesign.dev, il existe plusieurs outils pour mesurer l’impact environnemental d’un produit web :

Google PageSpeed

Cet outil permet de vérifier la performance de chargement d’une page web, mais aussi à réduire votre taux de rebond, car c’est un facteur important de l’impact environnemental d’un site internet. Les données collectées sont accompagnées de conseils sur les moyens à mettre en œuvre pour améliorer la page. Ces deux facteurs sont déterminants pour le référencement naturel de votre site. 

Fruggr

Cet outil mesure l’empreinte carbone de votre site web en calculant la consommation d’énergie pour charger les pages. C’est un outil qui a pour but de faciliter la transition numérique et énergétique grâce à un logiciel nommé DeepGreenTech. L’impact positif de ces KPi est d’augmenter la satisfaction client, le taux de transformation et le CA en toute sérénité. 

Websitecarboncalculator

Cet outil permet également de mesurer l’empreinte carbone d’un site web en se basant sur les données de consommation d’énergie et de trafic réseau. Website Carbon vous livre en quelques seconde la quantité de Co2 que représente la visite d’une page de votre site web et vous propose diverses actions pour améliorer le score.

LCA (Life Cycle Assessment) 

LCA vous permet de mesurer tous les impacts environnementaux sur tout le cycle de vie d’un produit. Pour un site internet, le calcul prend en compte les étapes suivantes : le cahier des charges, les Maquettes, le Développement, la Mise en ligne et la Maintenance.

2. Adapter la complexité au besoin du site internet

Identifier le besoin du client ou le cahier des charges pour connaitre les fonctionnalités obligatoires et superficielles du site. Il est indispensable de connaître ses cibles, leurs usages, leurs besoins et leurs comportements. 

Créer des personas pour identifier et comprendre les besoins de votre audience

Un persona est un profil type de vos clients. 

Cette méthode de segmentation et de ciblage exige d’adopter à la fois :

  • Une approche quantitative, qui répond aux critères sociodémographiques comme son sexe, son âge, sa profession, sa catégorie socioprofessionnelle, son domicile etc.
  • Une approche qualitative, qui répond aux critères psychographiques comme son style de vie, ses valeurs, ses motivations, son comportement etc.

Le but de cette démarche est de se mettre à la place de vos clients. Grâce à vos personas, vous allez connaître beaucoup mieux vos clients : leurs habitudes, leurs comportements et leurs centres d’intérêts. Cela va vous aider à créer une image précise du client que vous voulez attirer. Ainsi, vous serez capable de leur proposer un design ou du contenu qui leur correspond.

Pour plus détails sur la construction d’un persona, retrouvez notre article dédié.

Connaitre les ressources de l’entreprise pour le site

Il faut connaître les ressources clés d’une entreprise pour pouvoir mener à bien, la réussite d’un cahier des charges dans l’éco-conception de site web.  Cela va passer par la planification, la disponibilité et l’optimisation des ressources. Il est impératif de déterminer précisément toutes les ressources nécessaires à l’accomplissement de votre projet. On retrouve 4 types de ressources clés à identifier : les ressources matérielles, les ressources immatérielles, les ressources humaines et les ressources financières. Ces ressources peuvent appartenir ou non à l’entreprise.

Ressources matérielles

Ce sont les ressources physiques de l’entreprise, par exemple, les machines, les logiciels, le matériel informatiques et outillages, le stockage pour le serveur, etc.

Ressources immatérielles 

C’est le savoir-faire, cela fait référence à la matière intellectuelle présente dans l’entreprise. Il peut s’agir, par exemple, des techniques de design, des secrets de fabrication, des brevets, des bases de données clients, etc. 

Ressources humaines 

C’est l’ensemble du personnel au sens large, cela comprend chef d’entreprise, salariés, partenaires, bénévoles… C’est-à-dire tous les humains nécessaires pour produire et vendre les biens ou les services qui composent votre offre. Ce critère prend alors en compte le management, la motivation, le savoir-faire, les compétences, le savoir-être, etc.

Ressources financières

Ce sont tous les fonds nécessaires à l’entreprise pour démarrer et gérer son activité dans un rythme correct et développer de nouveaux projets. Il s’agit du capital social sous toutes ses formes (apports des associés, crowdfunding…), des prêts bancaires, des garanties, les salaires, les aides etc.

C’est un avantage concurrentiel qu’il ne faut pas négliger mais c’est aussi très important de faire cette analyse pour savoir ce dont chacun va avoir besoin et ce que chacun va apporter.

Le site responsif, un must aujourd’hui dans son cahier des charges pour un site internet éco-conçu

Les enjeux d’un bon webdesign responsif sont de capter l’attention et convertir les visiteurs à une pensée, un produit et un service.

Un site responsif doit proposer un design qui s’adapte au support sur lequel l’utilisateur va consulter votre site web (ordinateur, mobile ou tablette). Selon le support, l’attente n’est pas la même. Lorsque l’on consulte un site sur ordinateur, on cherche à avoir la version la plus complète et détaillée possible afin de profiter de grands écrans. 

En revanche, sur tablette ou mobile, on souhaite trouver rapidement une information, sur un visuel réduit et avec une vitesse de chargement performante pour ne pas perdre le visiteur. Il s’agit donc d’alléger au maximum le site et de mettre en évidence certaines informations pratiques. En effet, selon une enquête de Hootsuite et We Are Social, le trafic Internet mobile représentait en 2022 59,7 % du trafic Internet total.

3. Connaitre les impacts environnementaux des composants d’interface

Les composants UI sont les éléments visuels qui composent l’interface graphique de votre site web. Ils permettent d’avoir de l’interactivité sur l’interface utilisateur, grâce à des points de contact durant la navigation comme les boutons, app bar, éléments de menu, messages d’erreur, checkbox, images, vidéos, documents, animations… Chaque élément doit être réfléchi dans le cahier des charges avant d’être utilisé, car cela aura un impact sur le poids de vos pages, sa rapidité et sa consommation énergétique.

Voici quelques conseils pour optimiser les éléments les plus utilisés : 

Images

Si vos fichiers image sont trop volumineux, vos utilisateurs vont devoir attendre longtemps que le navigateur les télécharge et les rend visibles. Par conséquent, optimiser les images sur WordPress pour réduire leur taille de fichier est une stratégie clé. Généralement, il est recommandé de viser une taille de fichier de maximum 150 Ko lorsqu’il s’agit d’images.

Pour cela, assurez-vous de sélectionner le meilleur type de fichier avant de commencer à modifier votre image. Les types de fichiers les plus courants sont :

  • PNG, qui produit des images de haute qualité, mais augmente également la taille du fichier.
  • JPEG, vous pouvez équilibrer la qualité et la taille du fichier en ajustant le niveau de qualité.
  • GIF qui ne prend en charge que 256 couleurs et fournit une compression sans perte.

Vidéos

Sur votre site web, vous devez bien réfléchir sur l’utilisation des vidéos. En effet, ce sont des médias lourds qui peuvent vous desservir. Mettez une vidéo que si elle vous paraît indispensable. Essayez de la faire la plus courte possible, la longueur idéale dépend de son usage, mais il est recommandé de réaliser des vidéos de moins de 1 min 30. La taille 720p offre déjà une excellente qualité d’image, largement suffisante pour la plupart des usages.

Documents texte

Il existe plusieurs formats pour la mise en ligne de vos documents texte. Cependant, le format idéal pour une utilisation sur le web est le format PDF à condition qu’il soit bien optimisé. L’utilisation du format PDF vous permet également un meilleur référencement naturel, car le contenu des fichiers PDF est indexable. Retrouvez ici notre article dédié à l’optimisation des PDF.

4. Serveurs écoresponsables 

Le choix de l’hébergeur est essentiel dans l’éco conception de site web et dans son cahier des charges. Assurez-vous de choisir un hébergeur qui respecte les normes ISO 14001 ou 50001 et qui soit dans un centre de données alimenté par des énergies renouvelables. En effet, l’hébergement web consomme énormément d’énergie : Les centres de données contiennent des milliers d’ordinateurs superpuissants fonctionnant en permanence et qu’il faut les refroidir pour leur assurer un fonctionnement normal. Les data centers consomment 200 terawatt/heure (TWh) soit davantage qu’un pays comme l’Iran, selon le Web Neutral Project.

Pour contrer ça, il est important, aujourd’hui, de se tourner vers des hébergeurs web dits écologiques ou verts. Voici une liste d’entreprises que nous vous conseillons :

Infomaniak

Infomaniak est un hébergeur qu’il faut consulter si vous êtes à la recherche d’une entreprise écoresponsable. Ses datacenters sont tous localisés en Suisse et sont certifiés Tier 3, ce qui vous garantit un taux de disponibilité proche de 99,99% sur une année.

o2switch 

o2switch est une société française créée en 2008, c’est également un hébergeur entièrement écologique, c’est-à-dire que toute son énergie est produite à partir d’énergies renouvelables.

PlanetHoster 

PlanetHoster, basé au Canada, fait partie des premiers dans le domaine de l’hébergement vert. Pour cela, il possède des infrastructures, un DataCenter et un système de refroidissement alimenté à l’énergie verte produite par des barrages hydroélectriques.

5. Utilisation de technologies écologiques

Lors de la création d’un cahier des charges pour un site internet éco-conçu, il est important de maîtriser les différentes technologies existantes et de les utiliser dans une démarche d’écoconception.

Nous allons voir les différents types de langages utilisés : Le HTML est un langage de balisage qui permet d’introduire et de structurer du contenu textuel ou visuel au sein d’une page web. 

Le CSS est un langage qui permet de mettre en forme la structure visuelle des documents HTML d’une page web. 

Le JavaScript est un langage de programmation qui permet l’animation des éléments présents sur une page web.

Sur le plan technique, il existe des optimisations à mettre en place afin d’améliorer techniquement l’eco conception de votre site web et de le rendre plus rapide :

1. Compresser le code HTML pour le rendre plus léger

Lorsqu’un utilisateur vient sur votre site, le navigateur envoie une demande au serveur pour afficher une page spécifique, puis le serveur renvoie le contenu de la page à l’utilisateur. Afin de transférer ces données, il est nécessaire de les compresser. Le schéma de compression le plus populaire pour cette partie est GZIP. C’est un format de fichier qui utilise un algorithme de compression de données sans perte. Il vous permet de réduire la taille des pages HTML, des feuilles de style et des scripts de votre site. Retrouvez notre article dédié pour mettre en place la compression GZIP

Activez la compression WordPress Gzip via un plug in (Retrouvez les étapes complètes dans notre article dédié ici)

Il existe beaucoup d’extensions sur WordPress pour répondre à de nombreuses fonctionnalités comme l’activation de la compression GZIP. Pensez à vérifier que vous n’avez pas déjà une extension de gestion de cache, qui possède souvent la compression GZIP. Après vérification, si vous ne possédez pas la compression GZIP,  vous pouvez installer l’une des trois extensions suivantes : 

2. Minifier et regrouper des ressources pour réduire la part des fichiers de design (CSS) ou fonctionnels (JavaScript)

La minification est un concept de réduction de la taille de votre page Web, ce qui se traduit par une accélération de votre site Web. Il fait référence au processus de suppression des ressources inutiles sans affecter la façon dont les ressources sont traitées par le navigateur. Google recommande de réduire les fichiers CSS et JavaScript pour assurer une vitesse de chargement de page plus rapide. Pour cela, testez la vitesse de votre site avec Google PageSpeed Insights et noter le score. Cela vous aidera à comparer le score après le processus de minification. Retrouvez notre article dédié pour minifier vos ressources.

Voici quelques plugs in populaires afin de minifier votre code.

6. Accessibilité de votre site 

Afin d’améliorer l’accès à votre site web, aux personnes handicapé, Web Accessibility Initiative (WAI) du W3C à développer des solution techniques, des règles et des ressources d’accompagnement. Il faut bien le définir en amont dans son cahier des charges pour être dans l’eco conception de site web.

L’accessibilité des contenus Web (WCAG)

Les documents des WCAG permettent de comprendre comment rendre les contenus web plus accessibles aux personnes handicapées. Le contenu Web se traduit par l’information d’une page web qui comprend : des informations générales telles que le texte, les images et les sons ainsi que du code et le balisage qui définit la structure.

Mesurer le niveau d’accessibilité web de votre site

Votre site est correctement accessible à partir du moment où il remplit les critères Level A et Level AA des WCAG 2.0. Pour savoir si vous remplissez ces critères, vous pouvez utiliser des outils d’analyse de l’accessibilité web : ils permettent d’en évaluer des dizaines en quelques minutes. Voici un exemple de Plug In Google que vous pouvez utiliser : Accessibilité Developer Tools

Pour plus de détails sur l’accessibilité web, retrouvez notre article dédié ici.

Pour aller plus loin :

Rechercher un article
Les plus consultés