Web Design Sostenibile

Cos’è la carbon footprint di un sito web?#section1

Proprio come facciamo riferimento all’uso dell’energia di un’auto in termini di km al litro, possiamo pensare all’uso dell’energia di un sito web in termini di quantità di dati scaricati. Questo, a sua volta, ci dà un framework in cui individuare la relazione tra la dimensione di pagina e la carbon footprint. Sfortunatamente, trovare la carbon footprint di un sito è, nel migliore dei casi, un compito impreciso e difficile. Ecco il mio tentativo:

• Un paper del 2008 del Lawrence Berkeley National Laboratory suggerisce che ci vogliono 13kWh per trasmettere 1GB.
• Secondo i calcoli di EPA, l’impianto elettrico medio degli USA emette 1,2 libbre di diossido di carbonio equivalente (detto CO₂e) per kWh prodotto (altre nazioni hanno medie più alte o più basse a seconda della loro politica energetica).
• Se moltiplichiamo 13kWh per 1,2 libbre, otteniamo 15,6 libbre di CO₂e, solo per trasferire 1GB di dati.
• Se un milione di utenti scaricasse ciascuno una pagina tipica, che ora si aggira sugli 1.4MB, abbiamo un totale di 1,367GB di dati.
• A 15,6 libbre per gigabyte, abbiamo più di 10 tonnellate di CO₂e.
• I dati mobile, facendo affidamento sulle reti 3G/4G, inquinano cinque volte tanto: 77 libbre di CO₂ per gigabyte.
• Se un milione di utenti mobile sul 3G scaricasse una pagina da 1.4MB, avremmo 1,367GB per 77 libbre, per un totale di 52 tonnellate di CO₂.

Basandoci su queste stime, possiamo dedurre che un sito della dimensione di Tumblr, con 183 milioni di pageview al giorno, di cui circa il 10% è su mobile, ha il potenziale di essere responsabile per un’impressionante emissione giornaliera di 2600 tonnellate di CO₂.

Questo non prende in considerazione importanti fattori come la quantità di elettricità del data center che proviene da fonti rinnovabili o da combustibili fossili o dall’uso dell’elettricità dell’utilizzatore finale, ciascuna delle quali potrebbe influenzare significativamente il totale. Ma questi numeri ci danno un framework per vedere la relazione tra la dimensione di pagina e la carbon footprint e rendono chiaro che tagliare i gigabyte fa risparmiare CO₂.

Qual è il primo posto da sfoltire? Il design.

Ridurre la CO₂ riducendo la dimensione di pagina#section2

Con gli attuali 1.4MB, la pagina media di oggi è 15 volte più grande di quello che era 10 anni fa, principalmente per via delle immagini (881 kB) e degli script (224 kB). I siti fatti solo con il buon vecchio HTML erano di circa 54kB, ma quando è stata l’ultima volta che avete visto un sito solo in HTML? Questa media per pagina fa inoltre fare più di 100 richieste HTTP. Che carichino un piccolo oggetto o uno grande, queste aggiungono più ritardo e un maggior spreco energetico. Il sito medio è anche lento: i 2000 top retailer site di Alexa adesso impiegano in media più di sette secondi per caricarsi, molto di più di quello che gli utenti considerano accettabile.

Pianificare il budget per un sito web snello, medio e green#section3

Nessuno parte con l’intenzione di creare una pagina da 1.4MB, ma i clienti richiedono spesso delle immagini accattivanti, delle feature social complesse e molte decorazioni stilistiche. Tutto questo è quel che ci vuole per raggiungere tale dimensione. Il modo migliore per prevenire questo tipo di obesità è impostare un budget per la dimensione di pagina: cominciare con una dimensione di pagina come obiettivo e rimanere fedeli a questa.

In MadPow, abbiamo adottato l’approccio “page size budget” per aiutarci a perseguire una migliore performance nel caricamento della pagina, con il Santo Graal del caricamento di una pagina in due secondi o meno. Ovviamente, più eliminiamo peso dalla pagina più sarà minore la carbon footprint del sito. Per tenere traccia di questo valore, moltiplico la dimensione della pagina per le analitiche sulle visite utente per arrivare a un totale approssimativo per il traffico del sito, senza dimenticare di separare il traffico mobile che inquina di più e contare il caching.

Aderire al page budget significa considerare il peso dei dati ad ogni fase del design:

Content strategy: se state facendo l’aggiornamento di un sito per ridurne il peso delle pagine, un rapido fix potrebbe essere quello di scambiare il contenuto con peso maggiore con delle alternative più leggere, come immagini fisse al posto di un video o testo al posto delle immagini, purché vengano rispettati gli obiettivi sia degli utenti che dell’azienda. Meglio ancora, se usate un approccio “content first”, potete inserire le considerazioni sulla dimensione nella pianificazione del contenuto, per fare scelte di contenuti che siano appropriati per il pubblico e per il budget per i dati.

Interaction design: la fase di design riguardante la definizione dell’esperienza è il momento perfetto per intercettare le feature che richiedono più dati e che intaccano il page budget. L’onnipresente carosello è il primo responsabile: uno tipico ha dalle tre alle sei immagini di grandi dimensioni, più il JavaScript necessario per farlo muovere, che aggiunge tipicamente centinaia di kilobyte. Comunque, il valore del carosello è questionabile: se dovete fare uno studio tenendo in considerazione una metrica per ridurre o rimpiazzare, fate la Brad Frost Carousel Challenge. Altri candidati per la riconsiderazione includono i pulsanti per condividere, le mappe embedded, i video con auto-play, Flash, le pubblicità e i servizi di contenuto sindacato di terze parti, che hanno tutti un notevole overhead di dati.

Visual design: le immagini sono le responsabili maggiori della footprint per la maggior parte dei siti (in media il 60%) e sono mature per la riduzione dei dati. Tanto per cominciare, può andare bene ridurre il numero di immagini nel vostro caso? Molte immagini sul web vengono inoltre salvate nel formato sbagliato, hanno una dimensione errata o sono ottimizzate male. Servizi gratuiti come smush.it possono ottimizzare le vostre immagini in maniera migliore del vostro solito editor e possono anche fare una lavorazione a batch.

Accorpare tutte le piccole immagini del vostro sito usando CSS sprites o web icon font farà risparmiare dati e richieste HTTP: le icone puramente in CSS saranno l’opzione più leggera quando saranno supportati da tutti i browser. E dal momento che i dati mobile inquinano molto di più dei dati “wired”, assicuratevi che i siti responsive utilizzino una soluzione per immagini responsive che funziona. Una buona ottimizzazione potrebbe farvi risparmiare il 72% del peso delle immagini mobile.

Code design. L’ottimizzazione del front-end è in espansione: la riduzione degli script, la compressione dei download, l’impostazione di tempi di caching appropriati e il combinare file possono tutti aiutare a ridurre l’overhead dei dati e le richieste HTTP. Per un rapido assaggio, inserite il vostro sito su Google Page Speed, che identificherà quali tecniche potrebbero essere applicate per aiutare a velocizzarlo. Per un’esplorazione più approfondita, raccomando la lettura di “Web Performance 101” o del recente articolo su ALA di Lara Swanson.

Green hosting: ancora prima di cominciare a ridurre al minimo la carbon footprint del vostro sito attraverso il design e l’ottimizzazione, dovreste considerare di spostarvi su un hosting green. Molti di questi sono alimentati da energie rinnovabili, particolarmente in Islanda, dove hanno aperto dei data center che sfruttano la potenza economica dell’energia geotermica. Tuttavia, il green hosting potrebbe non essere per tutti (potrebbe essere più costoso e l’Islanda potrebbe essere lontana dai vostri clienti), ma stanno cominciando a spuntare degli hosting eco. Anche alcuni servizi cloud-based stanno diventando più ecologici: Google, Apple e Rackspace prendono parte dell’energia da fonti rinnovabili, cosa non vera, secondo Greenpeace, per Amazon Web Services.

Spostare il resto: anche dopo aver applicato un lean design, l’ottimizzazione e aver spostato il sito su un hosting green, il vostro sito avrà ancora una carbon footprint. Per calcolare anche questa, potete comprare un offset, che costa tipicamente 19$ a tonnellata, a seconda del progetto. L’offsetting non toglie in effetti la CO₂ dall’atmosfera ed è un misero sostituto per la riduzione delle emissioni. Tuttavia, molti programmi hanno dei benefit aggiuntivi, come il finanziamento di programmi di istruzione nel terzo mondo o la protezione degli habitat fragili.

Persuadere le persone ad ottimizzare#section4

Ottimizzare per ottenere minori emissioni è equivalente a ottimizzare per la performance generale, così anche le aziende non green hanno molte ragioni convincenti per mettere il proprio sito “a dieta”: pagine più rapide rendono gli utenti più felici, specialmente su mobile; convertono meglio e hanno anche un SEO migliore.<

Aggiungere i benefici climatici a quella lista rende importantissimo ridurre la dimensione di pagina e i dati, specialmente per le aziende che sono già attente ai cambiamenti climatici (come quelle che hanno firmato la Climate Declaration).

Internet come eroe del clima#section5

Nonostante la sua enorme carbon footprint, internet potrebbe addirittura contribuire a salvare il clima. La transizione delle vecchie industrie e dei vecchi servizi su internet può potenzialmente far risparmiare otto miliardi di tonnellate di CO₂ entro il 2020, molto più che la compensazione delle 1,4 miliardi di tonnellate previste per l’impronta di internet.

Ad esempio:

• Il teleconferencing ha già ridotto i viaggi di lavoro del 30%.
• L’home sharing (come AirBnB) è del 66% più efficiente che stare in hotel.
• I servizi di car sharing fanno ridurre il numero delle auto sulle strade, dal momento che ci sono circa 20 auto regolari per ogni macchina in car sharing, secondo ZipCar.
• Meshing.it, la directory della sharing economy, elenca ulteriori 8.000 startup, tutte concentrate sulla condivisione del possesso nelle comunità, riducendo così i consumi.

Man mano che proseguiamo verso un economia online, tuttavia, daremo presto il benvenuto a cinque miliardi di nuovi utenti su internet. Al crescere del peso di internet nell’inquinamento che produce i cambiamenti climatici, corrisponde la responsabilità di quelli che lo architettano. Ma creando “lean and clean”, possiamo ridurre il danno e rendere i clienti più felici e le aziende più ricche.

Forse siamo condizionati ed inquadriamo come sacrifici le scelte ambientaliste, ma non è così con il web. Possiamo avere dei siti web più puliti e più green rendendo comunque più felici gli utenti e migliorando la linea di base. Sebbene il problema possa sembrare grande, come vi direbbe un qualunque dietologo, qualsiasi piccolo cambiamento conta. Perché non cominciare?

Illustrazioni: {carlok}