Web design ecosostenibile: come rendere green un sito web

Scopri le pratiche migliori per ridurre l’impatto ambientale del tuo sito web, dalla scelta del green hosting al design minimalista.

Lo sai che esiste un calcolatore online che stima indicativamente le emissioni di CO2 di una singola pagina web? L’abbiamo provato per capire come si posiziona l’homepage di waywebagency.com

A giudicare dal risultato, direi piuttosto bene: si attesta su un valore “A” e viene considerato più pulito rispetto al 90% delle pagine web a livello globale, con una emissione di CO2 di 0,11g a clic.

Puoi fare il test anche tu per capire se il tuo sito ha un design ecosostenibile: ti basterà incollare l’URL del tuo sito su websitecarbon.com per capire la percentuale di CO2 emessa ogni qual volta la pagina indicata viene visitata.

Tieni conto che, ovviamente, non saranno le pagine del tuo sito a emettere anidride carbonica nell’atmosfera, ma ogni singola ricerca contribuirà al consumo energetico di server, data center, infrastrutture di rete e dello stesso dispositivo utilizzato per la ricerca. Queste fonti producono energia elettrica che genera CO2 e contribuiscono quindi alle emissioni globali di gas serra.

Quanto consuma un sito web?

Pensa a siti come YouTube, Google, Twitter. I grandi colossi del web hanno una portata ben diversa rispetto al sito vetrina o ecommerce del tuo brand.
Con milioni di accessi ogni giorno, singole pagine web si trasformano in mostri energivori che costituiscono un bel problema in un momento storico in cui il tema sostenibilità si fa sempre più presente e pressante. 

Non ti meraviglierà sapere che queste pagine – dal citato YouTube ad Amazon, passando anche per PornHub – non danno il buon esempio: le loro homepage, ricche di elementi visivi e link interni, portano a un consumo energetico davvero rilevante e superiore alla media globale.

All’interno di questo scenario il tuo sito web, che avrà visite giornaliere con parecchi zeri in meno, ti sembrerà quasi incolpevole.

Ma così come è bene evitare di gettare la sigaretta per terra pensando “massì, lo fanno tuttə”, è giusto contribuire singolarmente a un futuro più sostenibile e impegnarsi nel proprio piccolo a fare la differenza per un mondo più pulito, anche quello digitale.In questo post ti voglio illustrare le principali misure e soluzioni da adottare per puntare a un design ecosostenibile di un sito web e ridurre il suo impatto ambientale. Sarà una carrellata tra green hosting, scelte di design più pulite e consapevoli e ottimizzazione dei contenuti.

Il green hosting

Partiamo dal green hosting. Ti ho già illustrato cosa si intende per hosting e che cos’è un provider nel carosello Instagram Web hosting: questo sconosciuto. 

Il green hosting punta a ridurre l’impatto ambientale associato all’operatività dei data center. Adottando diverse tecnologie e pratiche per raggiungere l’obiettivo dell’ecosostenibilità delle sue operazioni, il green hosting può rivelarsi una scelta leggermente più costosa, ma sarà certamente compensata dai benefici ambientali e dall’impatto positivo sull’immagine del brand.

Quali sono queste misure?

• Sfruttamento delle rinnovabili: il green hosting utilizza fonti di energia rinnovabile come quella solare, eolica, o idroelettrica, per alimentare i data center.
• Compensazione delle emissioni di CO2: alcuni provider di green hosting, come ad esempio A2 Hosting e GreenGeeks, investono in progetti di compensazione delle emissioni di carbonio per bilanciare l’impatto ambientale delle loro operazioni di hosting.
• Efficienza energetica: questo tipo di hosting punta all’implementazione di hardware e software che migliorano l’efficienza energetica e riducono il consumo di energia.
• Riciclo e gestione dei rifiuti: i rifiuti elettronici di materiali utilizzati nei data center sono molti più di quelli che ci immaginiamo; il green hosting adotta pratiche di gestione sostenibile e di riciclo di tutti i materiali consumati.

Negli ultimi anni, per alcuni nostri clienti, ci siamo affidati a Siteground e a Vhosting; quest’ultimo, per farti un esempio concreto di impegno finalizzato a compensare le emissioni di CO2, collabora con Treedom con più di 100 alberi piantati in 10 diversi paesi del mondo.

La compressione delle immagini

Se hai scelto il green hosting, hai già fatto il primo passo per minimizzare l’impatto ambientale della tua presenza online.

Ma una volta che unə web designer si mette al lavoro per realizzare al meglio ogni singola pagina del tuo sito, potrà fare delle scelte strutturali più o meno eco-friendly.

La prima è facilmente intuibile e riguarda tutte le immagini, fotografie, grafici e banner inseriti nel sito. Tutti questi elementi visivi dovranno essere compressi e ridimensionati, per fare in modo che il loro “peso” abbia un impatto minimo in termini di consumo energetico.

Le immagini non ottimizzate, infatti, possono rallentare significativamente il tempo di caricamento delle pagine, aumentando così il consumo di energia.
Utilizzando strumenti di compressione come TinyPNG o ImageOptim, è possibile comprimere i file immagine senza compromettere la qualità visiva.
Inoltre, l’uso di formati di immagine più efficienti, come WebP, può ulteriormente ridurre la dimensione dei file e migliorare le prestazioni del sito.

Il lazy loading

Cos’è questo “caricamento pigro”? È una tecnica che permette di caricare le immagini e altri contenuti multimediali solo quando sono effettivamente visibili nella finestra del browser che l’utente ha davanti. 

Immagina di aprire la pagina di un prodotto di Amazon che vuoi acquistare: il lazy loading fa sì che tutte le foto, i video, le recensioni degli utenti e tutti elementi che non trovi immediatamente all’apertura del sito, si carichino soltanto nel momento del bisogno, man mano che scorri la pagina.

La tecnica di lazy loading utilizza script JavaScript per rilevare quando un elemento sta per entrare nella viewport dell’utente, ovvero nella porzione visibile della finestra del browser,  avviando così il caricamento effettivo di quel contenuto. 

I vantaggi del lazy loading non sono solamente legati all’efficienza energetica e al design ecosostenibile: il caricamento più rapido di una pagina web migliora l’esperienza utente, rendendola più fluida e meno frustrante. 

Pensa poi a quando ti agganci a una rete pubblica con una banda limitata, oppure a quando sei in montagna e vuoi fare una ricerca online senza consumare troppi dati: il lazy loading ti consentirà di completare la tua ricerca in tempi più che ragionevoli.

La dark mode

La dark mode, o modalità scura, è un’opzione di visualizzazione che utilizza colori scuri per lo sfondo e colori chiari per il testo e gli elementi grafici.

Oltre a offrire un’esperienza visiva diversa e ridurre l’affaticamento visivo per alcuni utenti, la dark mode può anche contribuire a limitare il consumo energetico, specialmente su dispositivi con schermi OLED o AMOLED. Questi schermi consumano meno energia per visualizzare i pixel scuri rispetto a quelli chiari.

Il sito della testata giornalistica Open, per esempio, è stato interamente sviluppato in dark mode. Ma sono tantissime le pagine che negli ultimi anni hanno adottato la modalità scura o consentono una doppia visualizzazione. Puoi per esempio scegliere la modalità scura per controllare le email ricevute sul tuo account Gmail; da alcuni mesi, poi, è possibile “forzare” la dark mode dal browser Google Chrome, in modo tale da visualizzare tutti le pagine cercate risparmiando la batteria.

La modalità scura diventa così un’opzione di web design ecosostenibile e user-friendly per i visitatori, ancora meglio se implementata a monte dallo stesso web developer che ha realizzato il sito.

Il design minimalista

Anche le scelte puramente estetiche possono incidere sulla sostenibilità di un sito web. 

Un design minimalista implica l’utilizzo di pochi elementi essenziali, eliminando tutto ciò che non è strettamente necessario. Risultato? La riduzione del carico di lavoro per i server e il minore consumo di energia per il rendering delle pagine. 

Al contrario, se riempi una pagina di foto, bottoni, banner, sezioni aggiuntive integrate attraverso widget o pop-up, il consumo sarà sensibilmente maggiore.

I gusti sono gusti, questo è vero. Io e Alessandro amiamo particolarmente pagine pulite con grandi spazi vuoti e pochi elementi visivi  (il nuovo sito di WAY ne è la dimostrazione), ma capiamo benissimo chi invece preferisce pagine ricche e colorate, con contenuti animati e interattivi di grande impatto che inesorabilmente richiedono molti script.

Quel che è certo, però, è che layout semplici, palette colori neutre e un uso limitato di immagini e video, oltre ad andare nella direzione di un design ecosostenibile, contribuiscono a rendere l’esperienza utente più semplice, lineare e diretta.Un sito dal design minimalista non è per forza un sito “noioso”. Ti faccio l’esempio di Kickpush, product design studio che per la home del sito ha scelto un unico colore di sfondo, brillante e comunicativo, e ha inserito elementi visivi disposti tra ampi spazi vuoti all’interno di una struttura davvero semplice. Con un’ottimizzazione lazy loading, il sito di Kickpush ha un consumo davvero ridotto di CO2.

Ottica UX e mobile first

Qualsiasi sito web deve essere realizzato a misura di utente: il viaggio che quest’ultimo compie attraverso diversi clic deve essere snello e chiaro. Ti ho raccontato il customer journey nel post Dai contenuti al carrello: la magia di un funnel efficace.

Garantire una navigazione intuitiva riduce il consumo energetico di ogni singola ricerca. Se l’utente trova facilmente ciò che cerca, non ha il bisogno di ricaricare continuamente nuove pagine o fare ulteriori richieste al server, riducendo così l’energia utilizzata. Allo stesso tempo è plausibile che rimanga più a lungo sul sito, riducendo il tasso di rimbalzo (bounce rate) e aumentando la probabilità di conversione, il tutto con un minor consumo energetico.
Un sito web dal design ecosostenibile, ormai, è un sito web pensato e progettato prima per i dispositivi mobili. Se ci pensi, più del 50% del traffico web globale proviene da smartphone: è bene quindi ragionare in un secondo momento sulla versione desktop.

Adottare questo approccio mobile first è assolutamente vantaggioso in termini di consumo: i dispositivi mobili hanno generalmente una capacità di elaborazione inferiore rispetto ai desktop, quindi il design mobile tende a utilizzare meno risorse (come immagini e script pesanti) e riduce il carico sui server.

Un design pensato prima per mobile è, in definitiva, un design ecosostenibile: più leggero e meno ingombrante. La velocità di navigazione sarà migliore, l’esperienza utente appagante e l’impatto sull’ambiente positivo.

Ottimizzazione e monitoraggio

Ottimizzazione e monitoraggio sono aspetti fondamentali per mantenere un sito web ecosostenibile, garantendo che le risorse siano utilizzate in modo efficiente e che l’impatto ambientale sia ridotto al minimo. 

Come migliorare le performance di un sito e monitorare la sua efficacia? Ecco qualche soluzione eco-friendly.

• Plugin di caching e minificazione: WP Super Cache o Autoptimize sono plugin WordPress che aiutano a ridurre il peso delle pagine web attraverso la minificazione di HTML, CSS e JavaScript, riducendo così la quantità di dati che devono essere caricati e la potenza di calcolo necessaria.
• Content Delivery Networks (CDN): le CDN distribuiscono il carico di traffico su più server dislocati in diverse parti del mondo, riducendo il consumo di energia concentrato su un unico server e accelerando la consegna dei contenuti agli utenti.
• Monitoraggio della velocità del sito: Strumenti come Google PageSpeed Insights o GTmetrix possono essere utilizzati per monitorare costantemente la velocità di un sito web. Questi strumenti forniscono feedback su come migliorare ulteriormente le prestazioni e ridurre i tempi di caricamento, che a loro volta riducono il consumo di energia.

Ovviamente, quando parliamo di monitoraggio, dobbiamo anche includere tutti gli interventi di manutenzione regolare, come l’aggiornamento di software e plugin, la pulizia del database e la verifica dei certificati SSL.
Un sito web sempre aggiornato è più sicuro (a tal proposito ti consiglio di leggere il post La sicurezza dei siti web) e le sue prestazioni migliorate possono ridurre ulteriormente l’impatto ambientale.

Educazione e consapevolezza sul design ecosostenibile

Spero di averti dato qualche informazione utile, lato tecnico, per ridurre l’impatto ambientale di un sito web. Come avrai capito, tutte le fasi di realizzazione di un sito possono comportare scelte più o meno sostenibili: dall’hosting che scegli al day-1 alla quantità di immagini, font, colori, plugin da installare.

A prescindere da qualsiasi scelta fatta, è fondamentale sensibilizzare gli utenti sull’importanza della sostenibilità nel web design. Informare i visitatori del sito sulle pratiche ecosostenibili adottate può aumentare la consapevolezza e incoraggiare altre aziende a seguire l’esempio.

Il tema dell’ecosostenibilità in ambito web può essere approfondito nelle pagine di un sito o in un post del blog come questo; può essere poi promosso attraverso i canali social, con infografiche e caroselli su Instagram utili per condividere le pratiche green adottate e i loro benefici.

Mantenere alta l’attenzione a riguardo è davvero importante per evitare di sottovalutare un problema presente e crescente. Come riporta Il Sole 24 Ore in questo articolo, il sempre più diffuso utilizzo dell’AI potrebbe portare a un raddoppio di consumo dei terawattora in pochi anni, dai 460 Twh calcolati nel 2022 ai 1.000 Twh stimati per il 2026, equivalenti al fabbisogno energetico di un paese come la Germania.

Il consumo di energia derivato dall’intelligenza artificiale e dalle criptovalute merita un approfondimento a parte, ma questi dati dovrebbero essere sufficienti a ricordarci che, per adottare un atteggiamento responsabile sul tema ambiente e sostenibilità, non basta fare la raccolta differenziata: anche il mondo digitale merita un occhio di riguardo, forse ancora più attento.