I siti Web di oggi sono dotati di tutta una serie di caratteristiche sempre più comuni, dalle animazioni sgargianti ai video con riproduzione automatica, tutti elementi dannosi per il pianeta. Il consumo di un sito web è un tema sempre più centrale nel panorama della sostenibilità.
Un sito ricco di colori, animazioni, immagini e video richiede tempi di caricamento, e quindi di energia, molto elevati, con conseguente impatto ambientale.
Secondo il calcolatore di carbonio online Website Carbon, riportati anche in un articolo su wired.co.uk, un sito Web medio produce 1,76 g di CO2 per ogni visualizzazione di pagina; quindi un sito con 100.000 pagine visualizzate al mese emette 2.112 kg di CO2 ogni anno. Più un sito web è complesso, più energia richiede per essere caricato e maggiore è il suo impatto sul clima. Applicando il tutto sull’ecosistema di Internet, è facile riconoscere il web come la più grande macchina dell’intero pianeta, quarta nazione che inquina di più al mondo in termini di emissioni di CO2. Per la precisione un miliardo e 850 milioni di tonnellate cubiche all’anno.
Subito dietro Cina, Stati Uniti e India.
L’uso di social network, videochiamate, chat e videogame online ha un impatto non marginale, un mondo che assorbe un’enorme quantità di energia. Solo lo streaming video arriverebbe a circa 300 milioni di tonnellate, più di quanto faccia la Spagna.
In Inghilterra hanno calcolato che se la popolazione evitasse di inviare mail non necessarie (dove magari c’è solo un “grazie”) equivarrebbe al togliere dalle strade 3.300 macchine diesel. Ma è ovvio che il grosso non arriva dalla posta elettronica, anche se bisogna moltiplicare per gli oltre quattro miliardi di persone che oggi usano Internet e ricordando che di media ogni utente riceve tremila messaggi fra sottoscrizioni email indesiderate. La parte maggiore è da attribuire ai computer, fissi e portatili, e gli schermi che prendono circa il 40 per cento dei consumi. E poi server e data center, l’infrastruttura del Web, che valgono un altro 30 per cento.
Per ridurre le emissioni può essere una best practice limitare il numero di immagini presenti su ciascuna pagina web. Le immagini infatti sono i maggiori contributori al peso della pagina, più foto vengono usate e più grandi sono i file, più dati devono essere trasferiti e più energia è necessaria.
Ad esempio optare per una grafica SVG invece di formati come JPEG, PNG e GIF può aiutare a ridurre le dimensioni dell’immagine e utilizzando uno strumento di compressione favorisce ancora di più la loro diminuzione.
Inoltre, sostituendo i caratteri personalizzati con i caratteri di sistema, che sono già preinstallati sulla maggior parte dei dispositivi, vengono ridotte ulteriormente le emissioni.
I siti web rispettosi del clima sono ancora molto in minoranza; oggi ci sono 1,83 miliardi di siti Web su Internet, la maggior parte dei quali non osserva i principi di progettazione carbon-lite. Tuttavia, l’interesse per la sostenibilità digitale sta lentamente crescendo. Ad oggi, oltre 1.360 persone e aziende, tra cui Google, hanno firmato il Manifesto del Web sostenibile dal 2019, impegnandosi a creare un Internet più sostenibile.
Quando si parla di efficienza energetica dei siti web, è facile presumere che si tratti di un argomento puramente tecnico. Tuttavia, l’efficienza può essere migliorata prima ancora di creare un sito web. Il design e i contenuti hanno un grande impatto sull’efficienza energetica e i seguenti elementi sono aree chiave su cui riflettere.
Per ridurre l’impatto sui caratteri Web personalizzati, i designer dovrebbero considerare le seguenti opzioni:
Tieni presente che questo non si applica solo al codice che scrivi, ma anche al codice che prendi in prestito. Se stai utilizzando framework e librerie esistenti, assicurati che siano anche perfezionati e personalizzati per fornire in modo efficiente la funzionalità di cui hai bisogno e che non stai colpendo un chiodo con una mazza. Nei casi in cui utilizzi un CMS come WordPress, evita i plug-in non necessari che aggiungono volume e scegli i plug-in che riducono al minimo il carico del server e non aggiungono peso non necessario al front-end. Il nostro tema iniziale Muesli è progettato per aiutarti a fare esattamente questo.
La funzionalità guidata da JS viene elaborata sul computer o sul telefono dell’utente e aumenta l’utilizzo della CPU, che a sua volta aumenta il consumo energetico del dispositivo. Senti quelle ventole di raffreddamento sul tuo laptop che ronzano? Questa è energia sprecata.
Cerca modi per ottenere interazioni, funzionalità e animazioni front-end utilizzando tecnologie più efficienti come CSS, o almeno utilizza JS in modo efficiente. Una menzione particolare dovrebbe essere data qui agli script di monitoraggio e pubblicità che raramente offrono alcun valore all’utente ma possono aggiungere un peso significativo ai file, causare un utilizzo significativo della CPU, rallentare i siti Web e invadere la loro privacy.
Carica le immagini alla scala corretta invece di fare affidamento sui CSS per ridimensionarle, in modo da evitare di caricare immagini più grandi della scala in cui verranno visualizzate.
Usa uno strumento come TinyPNG o ShortPixel per comprimere i file di immagine senza una visibile perdita di qualità. Abbiamo documentato i nostri strumenti di compressione delle immagini preferiti qui.
Usa il formato di file più efficiente per ogni immagine, come WebP invece di JPEG.
Quando vengono seguiti questi passaggi, è possibile ottenere una significativa riduzione delle dimensioni dei file di immagine, riducendo il consumo di energia e migliorando i tempi di caricamento senza svantaggi percepibili per i visitatori del sito web.
Attenersi ai moderni formati di file di font Web come WOFF e WOFF2, che utilizzano metodi di compressione più elevati rispetto ai formati di file TTF, OFT e SVG.
Sottoimposta i caratteri per includere solo i caratteri necessari sul sito Web.
Va inoltre notato che Google dà la priorità ai contenuti AMP nei risultati di ricerca mobili per argomenti relativi alle notizie in particolare, quindi può aiutare ad aumentare la visibilità dei tuoi contenuti. Lo svantaggio è che i tuoi contenuti potrebbero essere offerti su un dominio Google e alcune delle cose eliminate da AMP potrebbero essere cose che ritieni importanti. È uno strumento potente, da usare con attenzione.
Ciò può essere ottenuto scrivendo le pagine Web come file statici in HTML, CSS e JS o utilizzando un generatore di siti statici o un host Web statico specializzato per convertire il tuo sito Web basato su CMS in file statici.
È fondamentale eliminare lo spreco di energia nel settore web. Il consumo energetico dei siti Web può essere difficile o impossibile da misurare con precisione per noi (sebbene strumenti come Website Carbon e Safari Web Inspector possano essere d’aiuto), ma ci sono comunque molte cose che possiamo fare per eliminare gli sprechi e migliorare l’efficienza. La maggior parte di queste azioni non sono fondamentalmente difficili, richiedono semplicemente attenzione ai dettagli e un’attenta riflessione in ogni aspetto del design, della creazione di contenuti, dello sviluppo e dell’hosting.
Soprattutto, quasi tutto ciò che possiamo fare per aiutare i siti Web a essere più efficienti dal punto di vista energetico li renderà migliori anche in altri modi, che si tratti di una migliore SEO, di migliori prestazioni Web o di una migliore esperienza utente in altri modi. Un sito Web più efficiente è fondamentalmente un sito Web migliore.