Il Manifesto a Basso Impatto: I 10 Principi di Organic Basics per Creare Siti Web Più Verdi

Regole semplici con possibilità infinite

Per prima cosa abbiamo studiato come costruire effettivamente un sito web sostenibile e siamo stati sommersi da consigli e suggerimenti. Ben presto abbiamo capito che non potevamo fare tutto e che era necessario restringere le opzioni. 

Ispirati dal manifesto Dogme 95 e dai suoi Voti di castità, abbiamo scritto un manifesto con 10 regole per costruire un sito web a basso impatto. Come nei Voti di castità, queste regole stanno in bilico tra l'essere estremamente specifiche e l'essere aperte all'interpretazione. 

Questo permette a designer e sviluppatori di trovare le soluzioni che funzionano meglio per la loro configurazione tecnica, senza compromettere la sostenibilità. Le regole non specificano l'utilizzo di particolari tecnologie, quindi possono evolvere insieme allo sviluppo tecnologico.

Di seguito illustrerò le 10 regole, fornendo qualche spunto su come implementarle anche nel tuo sito. 

1. Non caricare immagini prima che siano richieste attivamente dall’utente

Le immagini costituiscono una parte significativa dell'utilizzo di dati di qualsiasi sito web, e questo è particolarmente vero per gli ecommerce. Dobbiamo mostrare visivamente i nostri prodotti, spesso da più angolazioni o su diversi modelli. 

Ciò che conta, qui, è caricare solo le immagini che gli utenti hanno effettivamente bisogno di vedere. Questo può significare caricare immagini solo mentre l’utente scorre la pagina, mentre clicca su una slideshow, o persino nasconderle fino a che non clicca su “mostra immagine”. 

Questa regola è un po’ delicata, perché sono comunque consentite le illustrazioni sotto forma di grafica vettoriale scalabile (SVG), ma la dimensione di un SVG è incredibilmente ridotta rispetto alla maggior parte delle immagini. Sul nostro sito abbiamo utilizzato questa soluzione mostrando illustrazioni nella griglia delle collezioni (vedi sotto) e mostrando le immagini nella pagina prodotto solo quando l’utente decide attivamente di visualizzare una slideshow.

2. Riduci al minimo il consumo energetico sul dispositivo dell’utente

Questa regola può essere difficile da misurare ma resta comunque importante. Il motivo principale per includerla è assicurarsi che l’attenzione non sia rivolta esclusivamente al trasferimento dei file, ma anche a ciò che questi file fanno una volta raggiunto il dispositivo dell’utente.

Attualmente ci concentriamo soprattutto su due aspetti: l’uso delle animazioni e la quantità di script che vengono eseguiti attivamente sul sito. Qualsiasi utilizzo di elementi 3D può anche avere un impatto significativo sulla batteria del dispositivo. 

Ecco alcune domande da porsi per aiutarsi a seguire questa regola:

• Questa animazione / 3D / script migliora davvero l’esperienza utente o è solo decorazione?
• Possiamo limitare la quantità di animazioni / 3D / script nel sito?
• Possiamo semplificare questa animazione / 3D / script in modo che faccia solo ciò che è davvero necessario?

Articoli correlati: Prendere decisioni più responsabili nella User Experience

3. Adattarsi in base alla quantità di energia rinnovabile disponibile per far funzionare il sito

Con il modo in cui funzionano attualmente le reti elettriche e Internet, nessun sito web può funzionare al 100% con energia rinnovabile. Neanche Google, che si sta concentrando sempre più sulle fonti rinnovabili per alimentare i suoi data center, riesce a raggiungere questo obiettivo. 
Quello che possiamo fare invece è rendere i nostri siti web adattabili alla quantità di energia rinnovabile presente nella rete elettrica. Molte aziende energetiche, come Barry, fanno già qualcosa di simile offrendo ai loro clienti un'app che mostra quando l'elettricità è meno carbon-intensive (vedi sotto).

Sul sito a basso impatto di Organic Basics, ci affidiamo all’API di carbonintensity.org.uk per ricevere i dati. L’API consente un accesso facile e gratuito all’intensità di carbonio di varie regioni del Regno Unito. Un’alternativa sarebbe la Electricity Map API, che è piuttosto costosa ma dispone di dati da molte più regioni in tutto il mondo. Il punto negativo di questa API è proprio il costo di accesso. 

Abbiamo dovuto scegliere il data center di Londra poiché il nostro sito è ospitato su Google Cloud e quella è l’unica opzione nel Regno Unito. Ironia della sorte, questo data center si trova in una delle regioni più carbon-intensive dell’offerta di hosting cloud di Google. 

A seconda dell’intensità di carbonio, cambiamo la qualità delle immagini visualizzate e limitiamo il numero di animazioni. Se l’elettricità è davvero molto carbon-intensive, addirittura spegniamo il sito del tutto.

In questi casi mostriamo una pagina essenziale che avvisa i nostri clienti che il sito non è accessibile. Segnala anche una stima dell’ora in cui potranno tornare ad accedere, basandosi sui dati di previsione dall’API carbonintensity.org.uk. Dall’apertura del sito, questo è rimasto non disponibile per circa 12,5 ore.

4. Informa l’utente dell’impatto del suo comportamento di navigazione

Quando faccio acquisti online, mi aspetto di poter vedere quanto costa il contenuto del mio carrello. Questo mi permette di capire se posso ancora spendere o se devo cercare degli sconti. Allo stesso modo, dovremmo informare i nostri clienti sull’impatto che il loro comportamento di navigazione ha sul clima.

Sul nostro sito calcoliamo continuamente le emissioni che un utente accumula mentre naviga. In questo modo, può familiarizzare con cosa sono le emissioni di carbonio e come si relazionano all'utilizzo di un sito web. Se possibile, dovresti anche tu monitorare queste emissioni, perché in ultima analisi è responsabilità del proprietario del sito ridurle. 

5. Non utilizzare i video

A Organic Basics adoriamo i video, ma possono davvero rovinare il budget di carbonio di un sito. Questa è la regola più restrittiva tra le 10, ma ha una ragione molto valida. 

Internet è diventato sempre più dominato dai video, e invece di seguire questa tendenza abbiamo deciso di andare controcorrente. Per contrastare davvero la crisi climatica, non dobbiamo solo ottimizzare e ridurre al minimo; abbiamo bisogno della decrescita. 

Con questa regola ti obblighiamo a pensare al di là del lettore video e a riflettere su come aggiungere movimento e dinamismo senza dover caricare MB su MB di video. In alternativa, valuta di usare animazioni CSS o SVG. Ah, e questo vale doppio per le GIF. Non. Usare. GIF.

6. Salva i dati localmente sul dispositivo dell’utente per minimizzare il trasferimento

Tutti i contenuti che mostri sul tuo sito possono potenzialmente essere salvati localmente sul dispositivo dell’utente. Non ha senso scaricare due volte la stessa cosa se difficilmente cambia. 

La maggior parte degli sviluppatori riconoscerà già l’importanza di questa regola. Ottimizzerà le prestazioni del tuo sito e, allo stesso tempo, ne ridurrà l’impatto ambientale.

Per raggiungere questo obiettivo puoi valutare di realizzare il tuo sito come una Progressive Web App e permettere l’accesso offline. 

7. Comprimi i dati più possibile

Quando i file raggiungono il dispositivo dell’utente, dovresti assicurarti che vi restino fino a quando non vengono aggiornati. Questo si chiama caching. Ma, prima ancora che arrivino, devi assicurarti che quei file siano il più piccoli possibile. 

Minimizza il CSS e il JavaScript e comprimi le immagini. Molti framework moderni, come Nuxt.js o Next.js, lo fanno automaticamente per diversi tipi di file. 

Si tratta davvero di una scelta ovvia e, come il caching, ha senso anche dal punto di vista delle prestazioni.

8. Carica solo gli script, framework e cookie di programmazione essenziali

Ogni volta che aggiungi una libreria o uno script esterno al tuo codice, aumenti la dimensione della pagina. Anche se la libreria pesa solo 1kb, questo si trasformerà rapidamente in 1MB se 1000 utenti caricano la pagina.

Questa regola serve a ricordarti di valutare ogni singolo script, framework e cookie che aggiungi. La parola "cruciale" è quella su cui dovresti concentrarti qui. Il tracciamento delle conversioni e l’analisi dei dati sono cruciali in tutti gli ecommerce, ma è davvero necessario in ogni pagina?

Queste considerazioni si sposano bene con una piccola attenzione alla privacy, dato che il GDPR e regolamenti simili richiedono il consenso prima del caricamento degli script. 

9. Limita la quantità di luce emessa dallo schermo

Dalla pubblicazione del manifesto, abbiamo ricevuto commenti che suggeriscono che questa regola in realtà non fa differenza, perché usare la modalità scura riduce il consumo energetico solo sugli schermi OLED. 

Be’, diciamo: ottimo per gli utenti con schermo OLED! Sul sito low-impact di Organic Basics utilizziamo comunque un po’ di bianco qua e là perché è parte importante della nostra esperienza di brand. Tuttavia, come mostra l’esempio qui sotto, introduciamo anche una tonalità gialla, così come una sfumatura di grigio, per limitare la quantità di luce emessa dallo schermo.

10. Ottimizza e limita l’uso di font personalizzati

Infine, arriviamo all’uso dei font personalizzati. I font non rappresentano molto nel quadro generale delle emissioni dei siti web, ma la situazione può facilmente sfuggire di mano. 

Per questo motivo, ci siamo limitati a un solo font personalizzato sul sito low-impact. Abbiamo persino rimosso alcuni caratteri dal set. Non c’è realmente bisogno del cirillico su una pagina in inglese.

Il prossimo passo

Se segui queste 10 regole, sei sicuramente sulla buona strada per trasformare il tuo sito ecommerce in una versione a basso impatto. Ma ancora più importante, hai compiuto il percorso di vedere il tuo sito dalla prospettiva della sostenibilità e come una parte importante del puzzle della sostenibilità. 

Nel considerare queste regole, è importante trovare ciò che funziona meglio per il tuo brand. Non tutte le regole sono ugualmente rigide e dovresti usare questo a tuo vantaggio. Il tuo sito a basso impatto non è uguale al mio, né dovrebbe esserlo. 

Un internet sostenibile, però, non si ferma a elettricità ed efficienza energetica, che sono il focus di queste 10 regole. Se allarghiamo la prospettiva, dobbiamo iniziare a considerare anche i materiali con cui sono fatti dispositivi, data center e reti.

Internet si basa su meme (divertentissimi) di gatti e blog, ma si costruisce anche con minerali rari molto reali, spesso estratti da persone in condizioni lavorative precarie a caro prezzo per l’ambiente. 

Negli ultimi anni, Fairphone ci ha regalato uno smartphone più sostenibile, ma la discussione sull’intera infrastruttura di internet non è ancora partita. In altre parole, serve un Fairphone per le infrastrutture server.

Lettura correlata: Sfida e motivazione del team: rendere il pianeta uno stakeholder del tuo sito

Altre risorse su tutto ciò che è sostenibile: The Sustainable Ecommerce Handbook