Déclaration d’écoconception
Tout service numérique génère de la pollution numérique. En vue de réduire son impact environnemental, ce site a été éco-conçu.
Stratégie mise en œuvre et objectifs en matière de réduction ou de limitation des impacts environnementaux.
Le principal enjeu est de faire en sorte que ce site fonctionne sur tous types de terminaux, dans le cadre d’une utilisation via tout type de qualité de connexion et pour les utilisateurices de ce service numérique.
Le premier objectif était d’obtenir un site léger et rapide.
Le second objectif de ce site était l’accessibilité.
Nous avons donc notamment agit :
- en travaillant sur l’UX (expérience utilisateurice) : la navigation est efficace, le site ne retenant pas inutilement les visiteurs et visiteuses, réduisant donc ainsi le temps passé à trouver une information ;
- sur la réduction du nombre de requêtes serveurs maximum astreinte par écran. Pour la page d’accueil, ancien site : 21 requêtes – site actuel : 14 requêtes ;
- sur la réduction du poids des ressources maximum astreint par écran. Pour la page d’accueil, ancien site : 398 ko – site actuel : 178 ko ;
- en proposant un site consultable sur mobile. Le site s’adapte à toutes les tailles d’écran ;
- le développement d’un thème WordPress sur-mesure ;
- l’utilisation systématique de l’éditeur WordPress Gutenberg pour la gestion de l’ensemble des contenus.
Configuration minimale requise pour accéder au site
Le site internet de l’agence Roquette utilise des technologies standard. Tous les navigateurs de bureau ou mobiles actifs sont supportés.
Ce site web est destiné à être consulté dans n’importe quelle situation. Il est toutefois utilisable à un niveau minimal de connexion. Pour cela, à la date de la mise en ligne, le prestataire a fourni un site web ne dépassant pas :
- 600 ko de poids total par page
- 50 requêtes serveur par page
Pour maintenir une bonne capacité de consultation, le gestionnaire du site a été informé qu’il est indispensable de publier du contenu optimisé.
Le prestataire qui a conçu le site, l’agence Roquette, recommande la publication d’images ne dépassant pas :
- 300 ko
- 1080 pixels
Diagnostic Performances
- Score WebKarbon (page d’accueil) : B
Méthode d’évaluation
L’indicateur proposé par WebKarbon évalue certaines performances techniques du site web. Ces performances techniques sont liées à la consommation de ressources de ce dernier. Un site plus performant en termes de poids et de vitesse consomme ainsi moins de ressources (eau, électricité) puisqu’il sollicite raisonnablement les serveurs.
Le niveau atteint est représenté par une évaluation relative de A à G (A étant le meilleur score) associée à un score absolu de 0 à 100 (100 est le meilleur score).
Comprendre les calculs de WebKarbon.
À des fins de synthèse, deux types de données sont représentées :
- score moyen d’un échantillon de 5 typologies de pages
- score pour 5 parcours utilisateurices type du site web
L’analyse indiquée a été effectuée le 9 septembre 2024, elle est susceptible d’évoluer.
Évaluation de l’impact de 5 pages types
Page 1 – Accueil
Score : B
Nb requêtes : 14
Poids de la page : 178 ko
Complexité de la page : 481 éléments du DOM
Page 2 – Page présentation
Score : B
Nb requêtes : 15
Poids de la page : 174 ko
Complexité de la page : 422 éléments du DOM
Page 3 – Page type service
Score : B
Nb requêtes : 14
Poids de la page : 161 ko
Complexité de la page : 559 éléments du DOM
Page 4 – Page type article
Score : B
Nb requêtes : 14
Poids de la page : 157 ko
Complexité de la page : 410 éléments du DOM
Page 5 – Page glossaire
Score : B
Nb requêtes : 14
Poids de la page : 159 ko
Complexité de la page : 477 éléments du DOM
Évaluation de l’impact pour 5 parcours utilisateurs sur le site
Parcours 1
- Situation : Une chargée de projet d’agence de communication souhaite connaître les possibilités en termes de partenariat sur un projet d’écoconception puis contacter l’agence
- Parcours cible : accueil > page agence de communication > page “création de sites” > formulaire de contact > confirmation
Score moyen : B
Nb de requêtes total : 83
Poids de la page moyen : 175 ko
Moyenne de la complexité de la page : 388 éléments du DOM
Parcours 2
- Situation : Une entreprise possédant un site WordPress souhaite en savoir plus sur nos prestations de maintenance. Elle s’intéresse plus particulièrement à l’aspect support.
- Parcours cible : accueil > page maintenance > page conseils et accompagnement
Score moyen : B
Nb de requêtes total : 40
Poids de la page moyen : 162 ko
Moyenne de la complexité de la page : 400 éléments du DOM
Parcours 3
- Situation : une personne intéressée par le thème de l’écoconception souhaite découvrir les articles dédiés sur notre site.
- Parcours cible : accueil > page blog et ressources > article dédié
Score moyen : A
Nb de requêtes total : 42
Poids de la page moyen : 162 ko
Moyenne de la complexité de la page : 400 éléments du DOM
Parcours 4
- Situation : un prospect potentiel souhaite se renseigner sur nos références.
- Parcours cible : accueil > page nos références > page d’étude de cas https://www.roquette.bzh/reference/reseau-tyneo/
Score moyen : B
Nb de requêtes total : 45
Poids de la page moyen : 210 ko
Moyenne de la complexité de la page : 373 éléments du DOM
Parcours 5
- Situation : Une entreprise du Finistère souhaite opter pour la création d’une usine à sites pour son siège et ses succursales. Pour son projet, elle désire privilégier les agences locales et en sélectionne certaines, dont Roquette. Il lui faut découvrir ce que nous proposons dans sa situation.
- Parcours cible : accueil > page usines à sites > page contact > page de confirmation
Score moyen : B
Nb de requêtes total : 72
Poids de la page moyen : 179 ko
Moyenne de la complexité de la page : 357 éléments du DOM
Diagnostic RGESN
Un auto-diagnostic sera très prochainement mené à partir du RGESN (Référentiel Général d’écoconception de Services numériques) sur l’échantillon suivant :
https://www.roquette.bzh/
https://www.roquette.bzh/qui-sommes-nous/
https://www.roquette.bzh/creation-de-sites-web-sur-cms-wordpress/
https://www.roquette.bzh/sobriete-editoriale-lecoconception-de-contenu-pour-votre-site-internet/
https://www.roquette.bzh/contact/
L’écoconception
Nous vous proposons de découvrir les préconisations du collectif GreenIT pour l’écoconception web.
L’écoconception s’appuie sur une méthodologie et un ensemble de bonnes pratiques pour réduire l’impact de ce site web sur son environnement. Concrètement, il va s’agir de limiter les ressources techniques nécessaires à l’affichage d’une page ou à l’exécution d’une fonctionnalité, tout en étant au plus proche du besoin de l’utilisateur.
Quelques bonnes pratiques en matière d’ergonomie et de design
- Limiter le nombre de fonctionnalités dès la conception
- Supprimer les fonctionnalités non utilisées
- Limiter le nombre de carrousels
- Choisir des typographies au poids réduit
- Favoriser les designs simples et épurés
- Adopter quand cela est possible une approche « mobile-first »
- Préférer la pagination au défilement infini
- Éviter la lecture et le chargement automatique des vidéos et des sons
- Optimiser les parcours utilisateurs
- …
Quelques bonnes pratiques en matière de gestion des contenus
- Préférer les images aux vidéos
- Limiter le nombre d’images sur chaque page
- Optimiser la taille des images au format cible
- Compresser les images
- Compresser les pdfs
- Limiter l’utilisation des GIFs animés
- Préférer les glyphs aux images
- …
Quelques bonnes pratiques en matière de développement
- Proposer un traitement asynchrone lorsque c’est possible
- N’utilisez que les portions indispensables des bibliothèques JS et CSS
- Mettre en cache les données calculées souvent utilisées
- Limiter le nombre d’appels aux API HTTP
- Réduire le volume de données stockées au strict nécessaire
- Utiliser la version la plus récente du langage
- Fournir une alternative textuelle aux contenus multimédias
- Découper les CSS
- Ne pas faire de modification du DOM lorsqu’on le traverse
- Utiliser le chargement paresseux (lazy load)
- Valider les pages auprès du W3C
- Ajouter des entêtes Expires ou Cache-Control
- Compresser les fichiers texte : CSS, JS, HTML et SVG
- Mettre en place un sitemap efficient
- …
Quelques bonnes pratiques en matière d’hébergement
- Choisir un hébergeur écoresponsable
- Installer le minimum requis sur le serveur
- S’appuyer sur les services managés
- Optimiser l’efficacité énergétique des serveurs
- Réduire au nécessaire les logs des serveurs
- Apache Vhost : désactiver le AllowOverride
- Utiliser des serveurs virtualisés
- Utiliser un serveur asynchrone
- Stocker les données dans le cloud
- …