L’écoresponsabilité d’un site, c’est du boulot

J’ai l’air de fanfaronner avec les performances du site, mais essayant de creuser le sujet, je découvre que c’est complexe. Oui, l’écoresponsabilité d’un site c’est du boulot et suppose d’être proactif vu les pièges.

---

Des progrès, des questions et des impatiences

En septembre, le site était classé B à l’Écoindex avec une note de 80, la page pesait 0,104 Mo comptait 341 éléments et sollicitait 19 requêtes. Rien de déshonorant.
Aujourd’hui, le site est classé A, avec une note de 86, la page d’accueil pèse 0.069 Mo, compte 228 éléments (un de plus que ce matin) et seulement 11 requêtes.

Si je supprimais les photos, les audios… le site qui compte parmi les plus performants serait au top du top…

J’ai déjà raconté comment j’ai supprimé des plugins pour les remplacer par des bouts de code bien plus légers.

En cherchant un peu, en croisant les sites d’analyse, il m’est apparu que nombre de problèmes pourraient être résolus en amont, c’est à dire via le CMS en tant que tel (et c’est pareil pour la sécurité).

WordPress est un bel outil mais peut devenir une usine à gaz si on se laisse charmer par moulte fonctionnalités clinquantes ou effets aussi beaux qu’énergivores.

Les conseilleurs feraient bien de faire le ménage

Si Écoindex a le mérite proposer un test facile, il me semble que se présenter comme écoresponsable en incitant à suivre le site sur Linkedin ou Facebook invalide la crédibilité du message !

Quand un autre site propose 9 conseils pour concevoir un site écoresponsable et obtient F au test qu’il préconise, on peut se dire qu’il a oublié de s’appliquer ce qu’il prodigue !

Avatar et Impression

Dans ma quête du jour, j’ai découvert d’abord que l’avatar qui accompagnait ma signature dans les articles avait un coût et posait des problèmes en raison du format de l’image. WordPress propose par défaut d’utiliser l’avatar de son compte Gravatar. Si un compte Gravatar permet d’avoir son profil gratuit sur le Web, utiliser l’image de ce compte extérieur fait dépenser de la bande passante. Pour éviter ça, j’ai utilisé d’abord le plugin Simple Local Avatar qui permet d’utiliser une image « interne », stockée sur son site et non d’appeler une ressource extérieure. C’est mieux mais il y a vite des soucis de format. Et puis je me suis dit : mais franchement, les lectrices et lecteurs ont-ils besoin de voir ma tête à chaque article publié ? Je me suis donc trouvé une bonne excuse pour supprimer ça… du coût l’icône Gravatar est revenue par défaut jusqu’à ce que j’intervienne une deuxième fois. Si WordPress était sérieux, ça ne devrait pas être par défaut ou bien un petit message comme sur les petits gâteaux, devrait préciser non pas le nutriscore mais l’écoscore !

Plus problématique, j’ai découvert que si des thèmes le proposent parfois, par défaut, on ne propose pas de faire une impression légère ou écologique d’une page. Oui, d’accord, imprimer ce n’est pas une bonne idée. Mais si en plus vous gaspillez de la couleur en imprimant les fonds colorés !

J’ai compris qu’il manquait à mon site ce qu’on appelle le  » Print CSS ». C’est une feuille de style spécifique qui s’applique uniquement lors de l’impression d’une page web (ou lors de l’aperçu avant impression). Elle permet de contrôler l’apparence du document imprimé et d’éviter d’imprimer des éléments dont on n’a pas besoin. La lisibilité est meilleure, on peut enregistrer sur son ordinateur un document léger et propre et économiser de l’encre si par malheur on voulait imprimer. Pour tester sur la page vous pouvez faire Ctrl+P.

J’ai cherché un peu et j’ai trouvé dans mon cas un bout de code que j’ai inséré dans mon extension WP Code (au niveau des en-têtes). Je le laisse pour celles et ceux que ça amuserait…

<style media="print">
/* ========================================
   PRINT CSS - GREEN IT
   Impact écologique : ~2Ko
   ======================================== */

/* Message de sensibilisation */
body::before {
  content: "🌱 Cet article est disponible en ligne sur [votre-site.fr] - Pensez à l'environnement avant d'imprimer";
  display: block;
  padding: 15px;
  background: #f9f9f9 !important;
  border: 2px solid #000;
  text-align: center;
  font-size: 11pt;
  margin-bottom: 20px;
  font-weight: bold;
}

/* Masquer les éléments inutiles */
nav,
header,
footer,
.sidebar,
.widget,
.comments,
.comment-form,
aside,
.navigation,
.menu,
.social-share,
.related-posts,
button,
input[type="submit"],
.ads,
.advertisement,
#wpadminbar {
  display: none !important;
}

/* Optimisation pour l'impression */
body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11pt;
  line-height: 1.6;
  color: #000 !important;
  background: #fff !important;
  margin: 0;
  padding: 20px;
}

/* Supprimer TOUS les backgrounds (économie d'encre) */
* {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Contenu principal */
article,
main,
.entry-content {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  color: #000 !important;
  page-break-after: avoid;
  page-break-inside: avoid;
}

h1 { font-size: 18pt; margin-bottom: 10pt; }
h2 { font-size: 14pt; margin-top: 12pt; }
h3 { font-size: 12pt; }

/* Paragraphes */
p {
  orphans: 3;
  widows: 3;
}

/* Éviter les sauts de page intempestifs */
article,
blockquote,
pre,
img,
table,
figure {
  page-break-inside: avoid;
}

/* Images */
img {
  max-width: 100% !important;
  height: auto !important;
  page-break-inside: avoid;
  /* Si vous voulez vraiment économiser l'encre, décommentez : */
  /* display: none !important; */
}

/* Liens : afficher les URLs */
a[href]:after {
  content: " (" attr(href) ")";
  font-size: 9pt;
  color: #666 !important;
  word-wrap: break-word;
}

/* Sauf pour les liens internes */
a[href^="#"]:after,
a[href^="javascript:"]:after {
  content: "";
}

/* Listes */
ul, ol {
  margin-left: 15pt;
}

/* Code (si vous en avez) */
pre, code {
  border: 1pt solid #000 !important;
  padding: 5pt;
  font-size: 9pt;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Tableaux */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 10pt;
}

th, td {
  border: 1pt solid #000;
  padding: 5pt;
  text-align: left;
}

/* Marges de page */
@page {
  margin: 2cm;
  size: A4;
}

/* En-tête et pied de page du navigateur */
@page {
  @top-center {
    content: "Green IT";
  }
}
</style>

Pourquoi ces mesures ne sont pas prises par défaut ?

Certes c’est la philosophie du libre et chacune, chacun doit se responsabiliser. Mais il est tout de même dommage qu’un volontarisme plus marqué n’impose pas ces choix par défaut quitte à ce que la personne qui le souhaite rompe sciemment avec le choix d’être écoresponsable…

Quitter WordPress ?

Je le ferai peut-être un de ces quatre· mais alors ce sera avec prudence. D’abord ça ne pourrait être que sur un autre projet vu le nombre de pages, de médias etc. et puis, il faut dire qu’un examen attentif et un cahier des charges un peu précis doivent être posés… et que je regarderais de près le CMS choisi.