Les principes de l’écoconception de site web

Pour réduire nos émissions de Gaz à Effet de Serre (GES) de 50% d’ici 2050 au niveau mondial, la France devra diviser ses émissions nationales par 4. Et si on appliquait cette division aux GES des sites web, qu’en dites-vous ? En effet, plus un site internet est visité, plus il consomme d’électricité pour fonctionner, plus son impact carbone est élevé. Si les mises à jour de sites sont des réflexes de bon nombre d’entreprises, peu pratiquent la sobriété numérique. Pourtant, avec les connaissances que nous avons sur les consommations énergétiques de nos machines, serveurs, réseaux et le drame de leur fin de vie, il devient urgent d’apprendre à réduire l’empreinte du numérique à tous les niveaux.

Reconnaitre que son site web est une passoire énergétique

Balayer devant sa porte avant toute chose : mon site web a été fait il y a 5 ans, il tourne sur un wordpress qui  active différents modules. On me dit « ta plateforme tourne pourquoi changer - puisque que personne ne le remarquera ? ». Non les gars, car je laisse grossir une dette technique qui crée des bugs et maintient une consommation électrique en 24/7 superflue. Bref, le refaire différemment me permettra d’être alignée avec mes valeurs. Alors pour éco-concevoir, j’ai revisité les bonnes pratiques de l’éco-conception de site web initié par le collectif greenit et je les partage avec vous en tant que chef de projet marketing.

Ecoconcevoir par où commencer ?

• Identifiez les rubriques les plus utiles aux personnes qui viennent sur votre site. Nous les Marketeurs, avons tendance à nous sentir comblés dès que le traffic gonfle. Attention le trafic de visiteurs uniques ou le nombre de formulaires remplis ne sont pas les seuls KPI à étudier, il s’agira de savoir combien de kWh (kilo Watt heure) consomme le site par page et par usage.
• Que font les internautes de ce qu’ils lisent ? Ils remplissent le formulaire, téléchargent où achètent ? A-t-on vraiment besoin que la vidéo en HD se lance en homepage ? A-t-on besoin de rafraîchir cette information en temps réel ou de maintenir ce carroussel d’images ? Si la consommation électrique montre que ces parties ne servent pas plus l’usage des visiteurs, alors vous aurez toutes les raisons de les supprimer pour alléger le poids du site. Ayez aussi le courage de supprimer les pages non visitées et les articles trop anciens. Oui le courage…

La méthode d’écoconception web de Green IT en 3 étapes

Etape 1. Définir le périmètre d’une action de l’utilisateur

Cette action de « consulter la home page » par exemple, peut être appelée Unité Fonctionnelle (terme utilisé en éco-conception pour savoir exactement ce que l’on mesure). Pour un site comme leboncoin, l’Unité Fonctionnelle peut être « consulter une annonce » ou « publier une annonce ».

Etape 2. Lister les pages les plus visitées

Pour « réserver un logement », le visiteur est arrivé sur la home d’Airbnb, puis a cliqué sur « créer un compte » puis « consulter une annonce ». Ensuite, il effectue ses recherches « par ville » et « consulte les offres page après page », avant de se décider à « réserver un logement » ou d’en « placer 3 en favori ». Le parcours de l’utilisateur est clair sur Google Analytics, prenez le temps de l’étudier, le calcul carbone sera d’autant plus facile à analyser.

Avec l’outil GreenIT-Analysis, le plugin GreenIT  calcule l’empreinte carbone du site dans le détail. L’outil donne plusieurs KPI dont : l’émission de gaz à effet de serre, l’équivalent de la consommation en eau et liste des recommandations pour optimiser chaque page. On peut pousser la recherche jusqu’à diviser par 4 les GES afin d’alléger le site au maximum. Il appartient à l’équipe web de brainstormer pour identifier les optimisations prioritaires et au marketing digital responsable de pousser plus loin la cohérence RSE au-delà de l’expérience client.

Pour nous guider le collectif greenit propose de suivre leurs bonnes pratiques dont voici le résumé :

• Côté utilisateur : favorisez les polices standards (arial, calibri), préférez la saisie assistée à l’autocomplétion, gardez en tête l’approche mobile first donc fonctionnel et simple.
• Côté contenu : compressez les documents et convertissez-les en .png, préférez les designs vectoriels aux photos, supprimez la lecture automatique des vidéos dont la résolution peut parfois descendre à 430 pixels, limitez l’usage du flash.
• Côté référencement : le SEO fait baisser le volume de recherches quand les mots clés et expressions de longue traine sont bien travaillés. Un outil comme Semrush est intéressant mais n’intègre par l’empreinte carbone. Les bonnes pratiques favorisent surtout l’éthique : white hat versus black hat. Les experts vont se mettre au SEO responsable, interrogez-les.
• Côté serveur : favorisez les pages statiques, limitez le nombre de domaines servant les ressources, réduisez le nombre de requêtes http, stockez les données statistiques localement, ne gardez que les plugins essentiels.
• Côté hébergement, sélectionnez un hébergeur vert. Les hébergeurs soucieux de leur impact compensent leurs émissions en achetant des Certificats d’Énergies Renouvelables (REC en anglais) auprès de fournisseurs d’énergie alternatifs ou en redistribuant la chaleur de leurs data centers aux bâtiments voisins ou aux piscines publiques, achètent des machines certifiées et prouvent leur démarche RSE. Infomaniak et Interxion font partie des bons élèves mais cherchez aussi ceux qui sont proches de chez vous.

Etape 3. Vérifier que les correctifs réduisent l’impact électrique

En effet, après avoir procédé à la réduction du poids des images, l’optimisation des pages et des CSS, il est intéressant de challenger les résultats. Le plugin GreenIT propose 3 KPIs par page : son poids en Kwh, le nombre de requêtes http, le nombre d’éléments. L’écoindex classe l’empreinte de A à G sur une échelle de couleurs allant du vert (score A) au rouge (score G) à la manière du scoring alimentaire, ce qui aide à la décision. Pour soutenir le travail des développeurs, voici des outils complémentaires : Ecograder et mobile-efficiency-index (Greenspector). Si le sujet vous intéresse, des formations en numérique responsable destinées aux développeurs et chef de projets web sont disponibles via les membres de Greenit.fr., l’alliance AGIT et l’Institut du Numérique responsable contactez-les de ma part 😉