L'attestation

Du rapport à l'attestation

Une mesure attestée ne repose jamais sur la seule parole de votre CI. Il faut qu'une mesure faite par Solyzon, sur ses propres machines, confirme vos chiffres, et c'est seulement cette mesure qui fait naître l'attestation.

L'attestation reste valable douze mois. Un domaine reçoit au plus dix vérifications de CI par jour, ce qu'une mise en production normale n'atteint jamais, et elles ne comptent dans aucun quota.

Sans CI, la vérification à la demande

Un site sans CI, ou hébergé ailleurs, se fait aussi attester à la demande, une fois par semaine et par domaine. Solyzon fait alors tout l'audit elle-même, découverte du site comprise, et comme il n'y a aucun rapport à comparer, c'est sa propre mesure qui est publiée telle quelle. Les pages mesurées comptent dans le quota mensuel de votre licence.

curl -X POST https://api.getgrammage.com/v1/certifications \
    -H "Authorization: Bearer $GRAMMAGE_LICENSE" \
    -H 'content-type: application/json' \
    -d '{"url": "https://exemple.fr/", "scope": "site", "category": "auto"}'

La réponse arrive tout de suite en 202, avec l'adresse du résultat dans l'en-tête Location, qu'on suit ensuite comme expliqué dans la documentation de l'API. Une demande qui échoue ne bloque pas la semaine, pour que vous puissiez corriger puis relancer.

Le badge

Le badge tient en deux lignes. La première donne les grammes de CO₂ par vue, et la seconde compare le poids de la page à celui des sites de sa catégorie, en mots et par l'aiguille de la jauge, qui monte quand le badge entre dans l'écran. Plus l'aiguille monte, plus la page est légère, et la jauge garde les couleurs du logo, sans vert, orange ni rouge, pour dessiner un fait mesuré plutôt qu'un jugement.

Le badge d'une page ne montre ses chiffres que sur la page mesurée, et celui du site n'existe qu'avec un résultat de site entier, dont les grammes sont une moyenne par page, pesée par gabarit, puisque Grammage ne connaît pas le trafic de chaque page. Il parle français, anglais, allemand, espagnol, italien, néerlandais et portugais, et un clic dessus mène toujours à la page de vérification du domaine.

Pourquoi il ne peut pas mentir

Le badge ne lit aucun chiffre dans votre page. Il demande à l'API l'attestation de son propre domaine, puis vérifie dans le navigateur qu'elle est signée par la clé de Solyzon, qu'elle porte bien sur ce domaine et sur cette page, et qu'elle n'a pas expiré. L'adresse de l'API et la clé publique sont inscrites dans le script lui-même, donc un site ne peut ni lui servir une attestation plus ancienne et plus flatteuse, ni recopier celle d'un autre. Au moindre échec, il l'écrit dans la console et affiche « N/A » à la place des chiffres, en gardant sa forme, ce qui vous permet aussi de le placer et de le styler avant toute vérification.

Le badge vieillit

La date du badge dit quand la page a été mesurée, et l'attestation expire au bout de douze mois, donc le badge vieillit par paliers. Le plus simple pour qu'il reste juste, c'est de laisser la CI le renouveler à chaque mise en production, ou de prendre l'option de remesure, qui le fait remesurer tous les trois mois.

Ce que le badge a le droit de dire

Le badge ne porte ni note, ni feuille, ni mot comme « écologique » ou « responsable », et c'est voulu. La directive européenne 2024/825 interdit en effet les allégations environnementales générales, et une affirmation chiffrée doit rester exacte et vérifiable, ce qu'une mesure datée, estimée et qui nomme sa méthode permet de tenir. C'est aussi pourquoi on ne dit jamais rien de tout un site à partir d'une seule page.

Poser le badge

Le badge est un seul module JavaScript, un élément <grammage-badge> écrit sans aucune dépendance, qu'on charge depuis l'API plutôt que de l'installer par npm. Il se met donc à jour tout seul, et il marche de la même façon dans tous les frameworks, où seule change la façon de charger le script. Il ne demande son attestation qu'au moment où il approche de l'écran, donc un badge posé en pied de page ne coûte rien au visiteur qui ne descend pas jusque-là.

• HTML
• WordPress
• Nuxt
• Vue
• Next.js
• Astro
• Svelte
• Angular

<script type="module" src="https://api.getgrammage.com/v1/badge.js"></script>
<grammage-badge site="exemple.fr"></grammage-badge>

<?php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script_module('grammage-badge', 'https://api.getgrammage.com/v1/badge.js');
});

<template>
    <grammage-badge site="exemple.fr" />
</template>

<script setup>
useHead({ script: [{ src: 'https://api.getgrammage.com/v1/badge.js', type: 'module' }] });
</script>

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="fr">
            <body>
                {children}
                <grammage-badge site="exemple.fr" />
            </body>
            <Script src="https://api.getgrammage.com/v1/badge.js" type="module" />
        </html>
    );
}

<script is:inline type="module" src="https://api.getgrammage.com/v1/badge.js"></script>
<grammage-badge site="exemple.fr"></grammage-badge>

Vue et Nuxt doivent apprendre que l'élément n'est pas un de leurs composants, dans la configuration du compilateur, et Angular déclare schemas: [CUSTOM_ELEMENTS_SCHEMA] dans le composant qui porte le badge. Svelte et React 19 acceptent l'élément tel quel.

export default defineNuxtConfig({
    vue: { compilerOptions: { isCustomElement: (tag) => tag === 'grammage-badge' } },
});

L'adapter à votre site

Le badge se règle aussi par des variables CSS posées sur l'élément, avec vos propres tokens, et elles l'emportent sur ses valeurs par défaut.

grammage-badge {
    --grammage-surface: var(--color-paper);
    --grammage-text: var(--color-ink);
}

CSP et confidentialité

Un site qui pose une Content-Security-Policy doit autoriser l'API dans deux directives, pour charger le module et pour lire l'attestation.

script-src 'self' https://api.getgrammage.com
connect-src 'self' https://api.getgrammage.com

Le badge ne pose aucun cookie, et l'API ne garde pas l'adresse IP des visiteurs, qu'elle compte seulement par minute et par statut. Cloudflare, qui protège l'API, voit en revanche passer chaque demande, et c'est à vous de le citer parmi vos sous-traitants si vous en tenez la liste. Vous pouvez reprendre cette phrase dans votre politique de confidentialité.

Le badge Grammage affiché sur ce site demande à api.getgrammage.com, le service de Solyzon qui a mesuré le site, le résultat de cette mesure, au moment où il apparaît à l'écran. Cette demande ne dépose aucun cookie, et l'API de Solyzon n'enregistre pas l'adresse de votre appareil. Elle passe par Cloudflare, qui protège ce service.