Site web éco responsable : premiers pas

Temps de lecture : 9 minutes

Pour évaluer la performance et l’empreinte environnementale de son site web, le collectif Green.It a mis au point un Eco index. Il affecte un score à vos pages suivant plusieurs paramètres.
En soumettant mon site, quelle déconfiture : il est classé D avec une home page de 2M0 et + de 63 requêtes. J’ai décidé d’appliquer les principes de sobriété numérique pour un site web éco responsable.
Dans cet article, je vous explique pas à pas comment réduire l’empreinte numérique de votre site en appliquant les principes de sobriété numérique, exemple à l’appui.
Vous découvrirez comment j’ai fait pour arriver à un classement B de l’éco-Index et réduire notablement le poids de la page d’accueil et des requêtes du site.

1 – Comprendre l’Eco index

L’Eco Index s’appuie sur 3 paramètres : le nombre d’éléments du DOM, la bande passante et le nombre de requêtes.

• Le nombre d’éléments du DOM représente la complexité de la page. Plus il y a d’éléments – contenu, titres, paragraphes, liste à puces- plus le navigateur utilise de ressources pour afficher la page.
• La bande passante représente le poids de la page, dû à l’html, au css, au javascrit et à l’intégralité des médias – visuels, images, picto, typo, vidéos, etc.
• Le nombre de requêtes représente les échanges entre le serveur et le navigateur. Au lancement d’une page, le navigateur sollicite le serveur pour afficher la feuille de style, l’image, la typo, etc.

Notons que la note A correspond à un site sans images, avec du texte au kilomètre sans intertitres. Elle demande donc plus que des concessions, des sacrifices.
Il est plus difficile de passer de C à B que de D à C.

2 – Quelques notions pour un site web éco resopnsable

Qu’il s’agisse de sobriété numérique ou sobriété éditoriale, les 2 partagent l’objectif de viser à l’essentiel

• supprimer la production de gras numérique et de logorrhée de contenus
• nous interroger sur la valeur ajoutée des animations ou des informations
• évaluer l’utilité des informations pour l’internaute

Passons à l’acte et appliquons ces principes en pratique !

3 –Audit technique du site www.cyclop-editorial.fr : une voie d’amélioration importante

En février 2020, un premier rapport GT Metric révèle un score … pas fameux

• La page d’accueil est plutôt lourde : plus de 2Mo et 63 requêtes.
• Lenteur et efficacité technique évaluées par Google à Lent
• Classé D en EcoIndex
• Les images ont un poids globalement élevé

Un premier travail sur le site a permis d’optimiser certains aspects évidents : code HTML, animations les plus inutiles à enlever. Ce qui m’a permis de baisser le nombre de requêtes à 56, comme le montre ce rapport Ecoindex de référence.

 

4 – Analyse fonctionnelle du site cyclop-editorial.fr

L’analyse fonctionnelle révèle un résultat tout aussi médiocre, car si l’on part du postulat suivant

« Je suis un chargé de communication et je recherche, sur Chambéry, un accompagnement éditorial pour la refonte du site Internet de ma société. » Mon objectif est de prendre un rendez-vous.

Éprouvons ce postulat au regard des cas de figure suivants :

• une recherche Google sur : « refonte éditoriale site Internet chambéry »,
• une recherche via la home de mon site,
• une recherche via la page rédaction web,
• une recherche via la page contact.

Le site et la home sont complexes.

Voici le résultat

• Recherche GOOGLE : Difficile >> De nombreux mots clés font remonter la page références du site
• Sur la home : Difficile >> Je n’ai rien trouvé sur la refonte de site Internet orientée éditorial. La page d’accueil est chargée et les carrousels peu adaptés.
• Sur la page rédaction Web : Modéré >> J’ai eu du mal à sélectionner la bonne page.
• Sur la page contact : Facile

Le site est donc à revoir du point de vue technique et ergonomique

5 – Site web éco responsable : passons à l’acte

Pour répondre aux principes d‘écoconception : supprimer le gras numérique et viser à l’essentiel, j’ai réinterrogé les objectifs de mon site et les besoins utilisateur.  Que vient-on faire sur mon site ?

1 – réflexion sur le parcours utilisateurs

Voici quelques intentions de recherche par rapport à mon activité :

• Je souhaite faire rédiger des contenus
• Je souhaite être épaulé en rédaction de contenus
• Je souhaite me former
• Je souhaite être rassuré sur cette prestataire

De là, j’ai ainsi défini les étapes qu’ils vont devoir valider pour atteindre leur objectif : via moteur de recherche, via réseaux sociaux ? et sur quelle page sont-ils susceptibles d’arriver sur mon site.

2 – nouvelle arborescence et nouveau zoning

J’ai ainsi été redistribué l’information :

• je souhaite être autonome en rédaction : formation
• je souhaite être épaulé en rédaction de contenus : production de contenus externalisée
• je mène la refonte de mon site internet : refonte de site internet

La partie accompagnement figure dorénavant dans la partie formation puisque cela répond au besoin de ‘Je souhaite me former’.

Le blog ne figure plus comme entrée du menu. En effet, ce n’est pas par la page d’accueil que l’on y accède, mais davantage par opportunité : réseaux sociaux, newsletter, etc.

Dans les faits, il est très rare que les internautes aillent sur un site pour lire les infos… Ils consultent des flux et c’est l’info qui vient à eux.

Ainsi, la rubrique Ressources reprend le blog, mais également sur des outils à télécharger.

Les études de cas qui figuraient dans le footer se retrouvent maintenant avec un onglet dédié.

3 – côté technique, éliminer les fonctionnalités non essentielles

Côté animations

En regardant de manière objective, les animations de mon site pour présenter les références clients, les cas clients ou les carrousels de la page d’accueil :  elles n’ont aucune valeur ajoutée.
Les chiffres me le rappellent : moins d’1% des secondes images des carrousels sont cliquées et les animations alourdissent énormément la navigation au regard des requêtes générées.

Elles ont donc été purement supprimées ou remplacées par des tableaux avec liste de logos, ou pour la home par une redistribution de l’information.

J’ai également supprimé la carte Google Maps de la page contact. (pour des alternatives, consulter l’article sur l’éco-conception de sites web)

Côté typo

Ai-je besoin d’autant de typo ? Non, bien sûr !

Par exemple, sur mon site, la police Avenir est chargée avec toutes ses déclinaisons même celles qui ne sont pas utilisées : Roman, Book : alourdissement max.
Elles ont donc été supprimées, ainsi que la police  Fontawsome que je n’utilisais pas en fait, mais qui était chargée par principe dans le CMS

Au niveau technique

Le CMS de mon site est sous WordPress. Si ce n’est pas le CMS le plus léger, néanmoins il est possible de l’optimiser en appliquant les principes de l’éco conception :

• limiter la complexité des pages (nombre d’éléments HTML),
• optimiser leur poids
• et réduire le nombre de requêtes nécessaires.

Voici quelques points qui ont été mis en place

• Le nombre de requêtes des pages a été limité, il concerne principalement les animations à réduire.
• Les fonctions des librairies Javascript et frameworks CSS : Jquery, Fontawsome , Emoji… ont été scrutées pour supprimer celles qui n’étaient pas utilisées
• Les textes ont été adaptés visuellement au web : la largeur de la colonne de contenu et la gestion du blanc ont été optimisées avec 750 px de large
• Les images ont toutes été optimisées
• La version mobile a été améliorée, car les lignes étaient étroites et le menu proposait peu de place pour les doigts

Toutes ces modifications ont été pondérées au regard du gain en performance qu’elles permettent.

Pour les vidéos, avec leur poids insoutenable

Dès lors qu’un internaute se rend sur une page web avec une vidéo encodée -iFrame ou embed Youtube-, il charge toute l’artillerie du player YouTube (cookies, css, js, etc.) alors qu’il ne souhaite peut-être pas encore voir la vidéo.

L’alternative est d’insérer une image optimisée.
Au clic sur l’image, la vidéo est soit ouverte dans un autre onglet chargée dynamiquement en popin ou à la place de l’image.

Ainsi, l’internaute ne charge qu’une image et le player YouTube n’est chargé qu’à la demande de l’internaute s’il souhaite lire la vidéo.

4 – Quelles mesures pour un site web éco responsable ?

S’attacher aux détails, ça paye ! Voici les chiffres :

• A en performance (auparavant B),
• un poids total de page de 265 kb au lieu de 2Mo précédemment (les images dans la feuille de style ne sont pas prises en compte dans ce calcul)
• et le nombre de requêtes divisé par 2 : 31 contre 63 auparavant)

Côté Éco index, nous voilà arrivés à B

Et côté contenu

Dans cet exercice, je m’attache à la page d’accueil et à sa structuration. Notons que j’opère une évolution continue de mes contenus pour appliquer les principes de sobriété éditoriale : structuration, suppression, nettoyage et recyclage !
Pour approfondir le sujet, vous pouvez consulter ces articles

• Sobriété éditoriale
• Refonte éditoriale de site internet

Contexte

Avec Sébastien Rufer, nous associons nos efforts sur la réduction de l’empreinte numérique de la communication. Alignement oblige, il était évident de prendre nos sites en sujet d’étude afin de tester et d’éprouver nos méthodes de travail. C’est dans ce cadre que nous avons donc mené la réduction de l’empreinte environnementale du site de Cyclop Éditorial.

Sébastien Rufer a donc travaillé sur la partie sobriété numérique : analyse fonctionnelle, audit technique, préconisations techniques, zoning.
Sébastien et moi-même sommes tous les 2 membres du collectif responsable Green-It.

Armand Lecoutour a réalisé la nouvelle maquette avec le respect des contraintes liées aux principes d’éco conception. Parlons même de sobriété graphique avec un graphisme d’habillage minimaliste, une simplification de la structure de pages et une attention à ne pas diversifier les pictos, les illustrations, les photos. Chacun des éléments mis en avant doit être utile à la compréhension.

Emmanuel Jacques a développé et intégré les évolutions techniques, en prenant en compte les contraintes d’éco conception.

Un travail avait déjà été réalisé sur l’hébergement en remplaçant OVH par Infomaniak.

Les analytiques du site sont effectués par Matomo.