No. 202

Titolo originale: Sustainable Web Design

Pubblicato in: Application Development, Stato del Web

Scritto da James Christie

Un numero crescente di industrie sta cercando di ridurre o almeno limitare la propria carbon footprint e il proprio uso dell'energia. Sono stati creati degli standard per le emissioni per i settori automotive, per l'edilizia e addirittura per le telecomunicazioni. Ciò nonostante la carbon footprint di internet è fuori controllo: un'impressionante quantità annua di emissioni di CO2 pari a 830 milioni di tonnellate, un numero maggiore di quello dell'intera industria dell'aviazione. Si stima che questa quantità raddoppierà entro il 2020.

È ora che i web designer si uniscano alla causa.

Proprio ora, almeno 332 milioni di tonnellate di CO2 - il 40% dell'impronta totale di internet - ricade almeno in parte sotto la responsabilità delle persone che creano il web. Non doveva essere così grande, ma con i caroselli di immagini a rotazione, le immagini ad alta risoluzione e molto altro, abbiamo creato dei siti che richiedono un quantitativo di energia sempre maggiore per anni, creando dei mostruosi siti HUMVEE che avrebbero potuto essere sostituiti benissimo da ibridi slanciati o, meglio ancora, da biciclette.

La buona notizia è che abbiamo svariati metodi per sistemare i siti web obesi e attaccare contemporaneamente la carbon footprint del nostro settore, metodi che vanno d'accordo con le buone pratiche di business: il design mobile-ready richiede un approccio attento e attento al design della pagina e metriche per il ROI del web sempre più sofisticate stanno già guidando le aziende a scegliere di realizzare siti più veloci e più leggeri.

Prima di addentrarci nella sostanza, diamo prima un'occhiata alla footprint stimata di un sito web.

Cos'è la carbon footprint di un sito web?

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 CO2e) 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 CO2e, 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 CO2e.
  • I dati mobile, facendo affidamento sulle reti 3G/4G, inquinano cinque volte tanto: 77 libbre di CO2 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 CO2.

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 CO2.

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 CO2.

Qual è il primo posto da sfoltire? Il design.

Ridurre la CO2 riducendo la dimensione di pagina

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

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 CO2 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

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

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 CO2 entro il 2020, molto più che la compensazione delle 1,4 miliardi di tonnellate previste per l'impronta di internet.

Ad esempio:

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: Carlo Brigatti

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

James Christie

James Christie è senior experience designer in MadPow. Scrive e parla regolarmente di sostenibilità del web e lo si può contattare tramite il suo sito personale e Twitter.

Questo sito per poter funzionare utilizza i cookie. Per saperne di più visita la pagina relativa all' INFORMATIVA