Sostenibilità digitale: perché il voto della tua home non racconta tutta la storia

In sintesi: i calcolatori di CO₂ assegnano alle home dei siti un voto severo, perché misurano la prima visita a freddo alla pagina più ricca che hai. Ma lo stesso sito, una pagina più in là, può passare da F ad A+. Lo abbiamo verificato su quattro progetti reali. La sostenibilità digitale non è rinunciare a un’immagine d’impatto: è sapere dove e come servirla. Questo articolo spiega cosa misurano davvero quei numeri e come progettiamo pagine che pesano poco senza sacrificare la comunicazione.

Sulla home di Olinda c’è una chiocciola gigante che attraversa la skyline di Milano. Un’immagine onirica, scelta con cura per un’impresa sociale che da trent’anni lavora con le persone fragili: comunica lentezza, casa, una città che rallenta. Per un’apertura, dice esattamente le cose giuste.

Poi prendi quella stessa home e la incolli in un calcolatore di emissioni. Il responso è impietoso: rating E, più sporca del 69% delle pagine web testate. Un voto che sembra contraddire tutto il lavoro fatto sull’ecosistema digitale che abbiamo costruito per Olinda, un sistema pensato per essere coerente, accessibile e sostenibile nel tempo. Com’è possibile? E soprattutto: quel voto sta misurando ciò che pensiamo stia misurando?

Cosa misura davvero un calcolatore di CO₂

Il riferimento più diffuso per stimare l’impatto ambientale di una pagina è il Website Carbon Calculator, che si basa sul Sustainable Web Design Model, ormai la metodologia aperta di settore. Il principio è semplice: le emissioni vengono stimate a partire dai byte trasferiti durante una visita, distribuiti su quattro segmenti, ovvero i data center che servono i file, le reti che li trasportano, il dispositivo che li riceve e le emissioni legate alla produzione dell’hardware.

Il dato che ne esce è un numero in grammi di CO₂ per visita, accompagnato da un voto da A+ a F. Come termine di paragone, la pagina media globale produce circa 0,36 g di CO₂ per visualizzazione. Sotto questa soglia sei meglio della media, sopra sei peggio.

Qui serve la prima dose di onestà, la stessa che mettiamo in cosa misurano davvero i Core Web Vitals: questi calcolatori danno una stima, non una misura assoluta. Lo dicono gli stessi sviluppatori degli strumenti. I risultati variano da un tool all’altro perché usano modelli e assunzioni diverse, e variano persino tra una misurazione e l’altra dello stesso identico indirizzo, perché alcuni input dipendono dal tempo di caricamento, che non è mai costante. Il numero è una proxy utile per ragionare, non una sentenza.

Lo stesso sito, da F ad A+: cosa dicono i numeri

Per capire quanto quella proxy vada interpretata, abbiamo testato quattro siti che conosciamo bene, confrontando ogni volta la home con una pagina interna. I risultati raccontano una storia precisa.

Il caso più netto è quello di UXDay: la home produce 0,95 g di CO₂ e prende F, peggio del 91% del web. La pagina del programma, sullo stesso dominio, sullo stesso hosting, costruita con lo stesso sistema, produce 0,04 g e prende A+, meglio del 93%. È una differenza di quasi ventiquattro volte, dentro lo stesso sito. Olinda passa da 0,36 g (E) sulla home a 0,20 g (C) sulla pagina della storia. VolumeBK va da 0,37 g (F) sulla home a 0,18 g (C) su una scheda prodotto.

E poi c’è Gimme5, che ribalta la regola e per questo è il caso più istruttivo: la home produce 0,24 g e prende D, ma una pagina interna ne produce 0,39 e scende a F. Qui le interne pesano più della home. La lezione è proprio questa: non esiste “il footprint del sito”. Esiste il footprint della singola pagina, e a deciderlo è quasi sempre cosa metti nel primo schermo, qualunque pagina sia.

Il rating della home è il caso peggiore

Messi in fila, questi numeri smontano l’idea che il voto di una home racconti la sostenibilità di un sito. La home è quasi sempre la pagina con il rating peggiore, e c’è una ragione strutturale. È la pagina che deve comunicare di più: accoglie, emoziona, dà il tono. Per farlo monta l’asset visivo più importante e più pesante above the fold, l’immagine grande o il video di apertura. Ed è anche la pagina che il calcolatore misura nelle condizioni più sfavorevoli, alla prima visita, con la cache vuota.

Ma quell’utente, dopo la home, naviga. Visita pagine più leggere, con la cache ormai popolata. Vede il primo schermo d’impatto una volta sola. Il rating E di una home, insomma, fotografa il caso peggiore e lo presenta come se fosse l’esperienza media. Non lo è.

C’è un secondo equivoco che vale la pena sciogliere, perché tocca da vicino chi sceglie a chi affidare un progetto: il peso dell’hosting verde. È un fattore reale, ma il suo peso nel calcolo è marginale. Tra i quattro siti che abbiamo testato, i tre che girano su energia rinnovabile (Olinda, VolumeBK, UXDay) prendono E e due F. L’unico su hosting tradizionale, Gimme5, prende il voto migliore. Lo strumento stesso stima che passare al green farebbe risparmiare a Gimme5 circa il 9% delle emissioni. Per il calcolatore è un dettaglio secondario rispetto al peso di un’immagine non ottimizzata; per noi resta comunque una scelta che facciamo volentieri, perché quel 9% è reale e si somma a tutto il resto. Ma è bene avere chiare le proporzioni: l’energia pulita conta, però è il peso che mandi in rete a fare la vera differenza.

Come progettiamo un primo schermo che pesa poco

Se il problema è il peso del primo schermo, la soluzione non è togliere l’immagine: è servirla bene. È un lavoro che facciamo da tempo e che ha un esempio limite nel progetto carbon-neutral di Around The Blue, il portale che racconta la sfida di Giovanni Soldini sulla salute dei mari. Lì la narrazione richiedeva moltissimi elementi grafici e video, cioè proprio gli asset che pesano di più. Abbiamo usato il formato SVG per tutta la grafica e per il set di icone, gestito il caricamento differito dei video con vanilla-lazyload, la libreria JavaScript di Andrea Verlicchi, e fatto in modo che i player Vimeo si attivassero solo al clic dell’utente, non al caricamento della pagina. Anche la palette scura ha una funzione: meno luce sullo schermo significa meno consumo del dispositivo.

Su Olinda la leva è stata diversa e tocca la sostenibilità anche in senso economico, un punto decisivo per un’organizzazione di volontariato. Abbiamo costruito l’ecosistema su un’unica installazione WordPress Multisite poggiata su Flying, la nostra infrastruttura: un solo impianto da mantenere invece di tanti siti separati, aggiornamenti e ottimizzazioni eseguiti una volta sola e riflessi su tutti i nodi, e una tematizzazione gestita via variabili CSS che evita di moltiplicare fogli di stile ridondanti. L’hosting è su Kinsta, partner che usa infrastruttura a energia rinnovabile.

Nel concreto di ogni nuovo progetto, le tecniche ricorrenti sono poche e collaudate: loading="lazy" su tutto ciò che sta sotto la piega, un preload mirato solo sull’asset che apre la pagina, formati di immagine moderni come AVIF e WebP al posto di JPEG e PNG pesanti, e dimensioni servite reali, non immagini enormi rimpicciolite via CSS. La documentazione di web.dev sul lazy loading è un buon punto di partenza per chi vuole approfondire il lato tecnico.

Un limite reale: non promettiamo A+ su tutte le pagine

La home di Olinda resta una E, e per noi va bene così. Quella chiocciola sulla città è una scelta di comunicazione che vale più del voto di un calcolatore, e lo stesso vale per il primo schermo di un brand creativo o di un’istituzione culturale. Inseguire l’A+ su ogni singola pagina vorrebbe dire sacrificare ciò che rende un sito capace di parlare alle persone, in cambio di una lettera su una scala che misura solo il caso peggiore.

Quello che offriamo non è quindi la promessa di un voto perfetto ovunque, ma il controllo: sapere quanto pesa ogni pagina, capire perché, e decidere con criterio dove intervenire e dove invece l’impatto è un costo accettabile e consapevole. È una distinzione che cambia il modo di leggere quei numeri, da verdetto a strumento.

Sostenibilità, performance e accessibilità sono lo stesso lavoro

C’è un motivo per cui torniamo spesso su questi temi insieme. Un primo schermo leggero si carica più in fretta, e quindi migliora i Core Web Vitals. Consuma meno dati, e quindi emette meno CO₂. È quasi sempre costruito in modo più pulito a livello di codice, e quindi tende a essere più accessibile. Non sono tre voci di costo separate da negoziare una alla volta: sono tre nomi per lo stesso lavoro tecnico fatto bene. L’abbiamo visto chiaramente nel lavoro di adeguamento del sito di Gimme5, dove ottimizzare per l’accessibilità ha significato anche ripulire e alleggerire la struttura delle pagine. Chi investe su uno di questi fronti, di fatto, sta già lavorando sugli altri due, come raccontiamo parlando di cosa controlliamo in un audit di accessibilità prima di consegnare un sito.

Da dove iniziare

Misura le pagine giuste, non solo la home. Prendi le tre o quattro pagine più visitate del tuo sito e testale singolarmente: è lì che si gioca l’esperienza reale dei tuoi utenti, non sulla sola pagina di apertura.

Guarda il primo schermo di ciascuna. Quasi sempre l’asset che pesa di più è l’immagine o il video above the fold. Identificarlo è metà del lavoro, perché ti dice esattamente dove agire.

Servi meglio invece di togliere. Prima di rinunciare a un’immagine d’impatto, prova a convertirla in un formato moderno, a servirla nelle dimensioni reali e a rimandare con il lazy loading tutto ciò che sta sotto la piega. Spesso il guadagno è enorme e l’immagine resta dov’era.

Leggi il rating con criterio. Confronta sempre la home con un paio di pagine interne prima di trarre conclusioni: un voto basso sulla sola home, da solo, non dice quasi nulla sulla sostenibilità complessiva del sito.

Se vuoi capire quanto pesano davvero le tue pagine

La sostenibilità digitale non è un sacrificio estetico né una moda da badge nel footer. È una competenza di progettazione: sapere dove si nasconde il peso, distinguere ciò che va ridotto da ciò che vale la pena tenere, e leggere i numeri per quello che sono. Se vuoi una fotografia onesta di come stanno le tue pagine e di dove conviene intervenire, ci siamo.