Les bonnes pratiques d’éco-conception de site WordPress

par | 15 Mai 2020 | eco-conception

Comment limiter l’empreinte écologique d’un site WordPress? Cela commence dès les premières étapes de sa création : aller à l’essentiel, choisir les bons outils et fonctionnalités, et suivre des méthodes de conception pour rendre votre site plus léger et accessible à tout utilisateur.  

Vous allez découvrir ici les conseils et recommandations d’éco-conception adaptées à un site wordpress. Ces méthodes sont largement inspirées des bonnes pratiques édictées par le Collectif Green IT, relayées par l’ADEME. Elles sont à mettre en place pour limiter la consommation énergétique d’un site wordpress, au stade de la création ou d’une optimisation.

Les bonnes pratiques  d’une éco-conception : pour un site léger

Il faut penser frugal, aller à l’essentiel dans les fonctionnalités et le contenu afin d’alléger le poids et le volume des données requises par le site.  La bonne compréhension du projet de départ (vocation du site internet, parcours utlisateur de la cible) est indispensable afin de définir précisément les fonctionnalités nécessaires pour le site.

Les fonctionnalités : qui peut le plus… consomme plus

  • Principe 1 : déterminer les fonctionnalités indispensables.

Cela évite l’installation de plugin et de fonctions superflus, qui alourdissent et ralentissent inutilement le site dès son chargement. Par exemple : la lecture automatique des vidéos embarquées sur un site est-elle nécessaire? En alternative, on peut inciter l’utilisateur à lire la vidéo en cliquant. Stopper l’automatisation de la lecture évite le chargement systématique d’une quantité de données à chaque navigation sur la page.

De même, les plugins foisonnent et séduisent par la diversité des avantages et des facilités qu’ils proposent. Mais ils sont tout aussi gourmands en mémoire et en ressources : mieux vaut les utiliser avec parcimonie. L’analyse du parcours utilisateur est révélatrice des fonctionnalités inutiles ou inopportunes : certaines sont peu ou mal utilisées, génèrent des erreurs. Elle permet de faire des choix, de retirer des fonctionnalités ou de les améliorer.

  • Principe 2 : configurer les plugins et les fonctions pour réduire leur poids

Par exemple : On peut éviter l’envoi de mails pour confirmer un mot de passe ou l’inscription à la newsletter, et opter pour une infobulle ou une pop-up. Sachant que chaque mail consomme en moyenne 19g de Co2…

 

Le contenu : textes, images et vidéos

  • Principe 3 : optimiser la définition des visuels

Le poids moyen d’une image optimisée pour le web pèse autour de 100Ko, sans que sa qualité soit affectée. De manière générale, on peut compresser jusqu’à 80% une image classique, sans perdre en qualité visuelle. Sachant que la part de l’image représente 90% du web, la marge de manoeuvre est énorme !

  • Principe 4 : Héberger les vidéos chez un site tiers.

Dailymotion, Youtube ou Vimeo pour les plus connus permettent d’héberger les videos et  d’alléger le site web en poids et en temps de chargement.

  • Principe 5 : rendre les textes parfaitement lisibles à l’écran

Grâce à une taille de police suffisamment grande, un contraste de couleurs optimisé, et un choix de typographie adaptée au web, on peut faciliter la lecture sur écran et limiter au maximum l’impression des pages.

 

Le code et son écriture

  • Principe 6 : optimiser les codes sources.

Grâce à une inspection du code et à des plugins très performants sur WordPress (Autoptimize notamment), on peut désormais éliminer les éléments superflus, scinder et ou encore regrouper les fichiers CSS.

  • Principe 7 : Utiliser un système de mise en mémoire cache

Lors d’une première visite d’un site, le navigateur reçoit tous les fichiers nécessaires à l’affichage de la page. Ces derniers seront utilisés à nouveau à chaque consultation de cette même page ou d’une autre page du site. On peut donc demander au navigateur une « mise en cache » de tous les fichiers qui resteront inchangés entre deux consultations du site.

L’éco-conception d’un point de vue social

Choisir un hébergeur éco-responsable

L’hébergeur “green” : choisir un hébergeur selon des critères de performances environnementales, de proximité, d’utilisation d’énergies renouvelables :  c’est possible ! Un hébergeur possède ou loue un datacenter pour stocker les données de millions de sites web et services numériques. Alors pourquoi ne pas abriter son site sous un hébergement écolo? Des hébergeurs comme le suisse Infomaniak par exemple, ou le lillois Nexylan, font valoir des normes environnementales et des politiques de RSE (responsabilité sociale des entreprises)  très encourageantes.

Autre piste : O2switch est une autre solution d’hébergement 100% française qui dispose de ses propres datacenters à Clermont Ferrand. Le matériel est optimisé et recyclé, la climatisation des datacenters est remplacée tant que faire se peut par de la ventilation naturelle et du free-cooling (usage de l’air extérieur pour refroidir les salles).

 

Parfaire l’accessibilité du site web : l’expérience pour tous les utilisateurs

Un site web éco-responsable respecte des conditions d’accessibilité pour tous. Pour cela, des recommandations ont été édictées par le W3C notamment, qui déterminent des méthodes pour rendre un site web accessible.

  • optimiser le responsive design.

La mise en forme et le contenu des pages web doit etre optimisée en fonction du support (écran d’ordinateur, tablette, smartphone…).

  • adapter la navigation pour les personnes en situation de handicap.

Un site doit être accessible par tous, déficients visuels et malentendants inclus. Cela passe par le renseignement des balises ALT des images. Il s’agit là d’une alternative sous forme de texte  qui permet de décrire et d’informer l’utilisateur sur le contenu de l’image. Cet attribut fonctionne notamment avec les assistants de lecture vocale : on peut donc proposer une description précise et claire, évoquant le contenu du visuel (sans romancer,  jusqu’à 100 caractères sont tolérés).

 

 Mesurer l’impact environnemental d’un site web

Le web au service du web : deux logiciels en ligne et gratuits permettent de mesurer l’empreinte écologique d’un site web, et identifient les paramètres positifs et négatifs de son impact environnemental.

Ecoindex pour mesurer

Ecoindex fait office de balance : l’outil révéle le niveau de gourmandise en gaz à effet de serre d’un site internet. L’Ecoindex quantifie les émissions de GES et la consommation d’eau nécessaires pour afficher une page web, à travers trois paramètres :

  • le poids de la page en Ko
  • le nombre d’éléments techniques qui la composent
  • le nombre de requêtes serveur engendrées à chaque affichage de la page.

Ecometer pour remédier

Ecometer est le diététicien du web : après analyse des données fournies par Ecoindex, il passe en revue une quinzaine de bonnes pratiques écologiques à appliquer sur une page web, et souligne ainsi les marges de manoeuvre pour optimiser l’impact environnemental du site.

Il s’appuie sur le référentiel du Collectif Green IT et les 115 bonnes pratiques d’éco-conception du web qui le composent.

Découvrez les Services Web de proximité de Soon Digital