Mesurer votre site

Deux outils, deux mesures

L'application regarde les requêtes qui partent d'un poste vers des services d'IA, et en estime l'énergie puis le CO₂e. Le kit regarde les octets qu'une page fait passer sur le réseau, et en estime la même chose. Rien de commun dans ce qui est observé ; la même règle sur ce qui est affirmé.

Les deux sont des estimateurs, pas des compteurs. Ni l'un ni l'autre ne relève une consommation électrique réelle : ils appliquent des facteurs publiés à des quantités observées, et disent lesquels. Le kit suit le Sustainable Web Design Model ; l'application a sa propre méthode, décrite sur ce site.

Ce que la bibliothèque observe

Elle lit ce que le navigateur sait déjà : la liste des ressources chargées et leur poids réel sur le réseau. Elle n'écrit ni cookie ni stockage, et ne pose aucun identifiant — le compte vit en mémoire et disparaît avec l'onglet.

Ce qu'elle ignore, elle le dit plutôt que de l'arrondir. Une ressource servie par un autre domaine qui ne déclare pas sa taille est comptée comme inconnue, jamais comme zéro, et le domaine est nommé à côté du chiffre. Un total assorti de trois inconnues vaut mieux qu'un total rond qui les a effacées.

Rien ne part vers un serveur tant qu'on ne lui en a pas donné l'adresse. C'est une décision distincte de l'installation, et elle a ses propres conséquences : agréger les visites, c'est se mettre à collecter une donnée de plus.

L'installer : un badge, sans serveur

Le chemin le plus court mesure la page et affiche le résultat. Il ne demande ni compte, ni clé, ni adresse à appeler.

npm install carbone-cost

import { observePage } from "carbone-cost/browser";
import { formatForDisplay, trackPageview } from "carbone-cost";

observePage({
  initialRoute: location.pathname,
  onMeasure(mesure) {
    const evenement = trackPageview(mesure);
    const badge = formatForDisplay(evenement.result);
    document.querySelector("#carbone").textContent =
      badge.gramsPerViewRounded + " g CO2e";
  }
});

gramsPerViewRounded est le chiffre à afficher ; category le range en trois paliers, pour qui préfère un mot à un nombre. Un seul collecteur peut tourner à la fois : en démarrer un second lève une erreur, plutôt que de tout compter deux fois en silence.

Sans étape de construction : une balise

Un site sans empaqueteur — un thème WordPress, une page écrite à la main — charge le même code en une balise. Le fichier pèse 6,7 ko minifiés et expose un objet global.

<script src="https://cdn.jsdelivr.net/npm/@clemsrec/script-tag@0.2.10/dist/carbon-site-kit.min.js"></script>
<script>
  var page = window.CarbonSiteKit.trackPageview({ bytesTransferred: 1200000 });
  console.log(page.result.gramsCO2e);
</script>

Le numéro de version est dans l'adresse, volontairement. Une adresse de CDN sans numéro met à jour, chez tous vos visiteurs et sans prévenir, un script que personne n'a relu.

Deux limites à connaître : cette version ne mesure pas la page — le collecteur n'existe qu'en module, il faut donc lui fournir les octets — et elle n'envoie rien tant que init n'a pas reçu d'adresse.

Next.js

L'adaptateur fournit la route qui reçoit les mesures, pour qui veut les agréger côté serveur.

// app/api/carbon/route.ts
import { createNextCarbon } from "@clemsrec/next";

const carbone = createNextCarbon();

export async function POST(requete) {
  return carbone.collectHandler(requete);
}

Ce qu'il faut savoir avant de croire le chiffre

Une ressource servie par le cache est comptée comme le navigateur la déclare : Chromium annonce environ 300 octets là où d'autres moteurs annoncent zéro. L'écart est affiché à part plutôt que corrigé — soustraire une constante inventée deviendrait un mensonge le jour où Chromium la change.

Un retour en arrière restauré depuis le cache de navigation ne coûte rien : aucune ressource n'est rechargée. C'est exact, et ça ressemble à une panne.

Une page préchargée est facturée à celle qui l'a déclenchée. Les frameworks vont chercher la suite au survol du lien, avant que l'adresse ne change : arriver quelque part peut donc afficher presque zéro pendant que la page précédente en porte le poids. C'est la comptabilité honnête, et elle surprend.

Les paquets sont en modules ES uniquement : un require() échoue. Ils sont en 0.x, et leur interface peut encore bouger d'une version mineure à l'autre.