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.
I consumi di un sito
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.
Come possiamo ridurre l’impatto ambientale di Internet?
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.
Cosa possiamo fare
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.
- SEO
La SEO potrebbe non avere nulla a che fare con l’efficienza del sito web, ma in pratica gli obiettivi della SEO sono intrinsecamente allineati con l’obiettivo di ridurre il consumo di energia. Quando ottimizziamo un sito Web per il posizionamento nei motori di ricerca, aiutiamo le persone a trovare le informazioni che desiderano in modo rapido e semplice. Quando la SEO ha successo, le persone trascorrono meno tempo a navigare sul Web alla ricerca di informazioni e visitano meno pagine che non soddisfano le loro esigenze. Ciò significa che viene consumata meno energia e l’energia consumata viene utilizzata per fornire valore reale all’utente. - Copywriting
Simile all’ottimizzazione dei motori di ricerca, la scrittura di testi ha un impatto sull’efficienza del sito Web perché influisce sulla quantità di tempo che le persone trascorrono a navigare sui siti Web. A volte vogliamo che le persone trascorrano molto tempo su un sito Web immergendosi nei nostri contenuti. Quello che non vogliamo è che le persone perdano tempo a guadare contenuti che offrono loro poco o nessun valore. Pertanto, una scrittura di testi chiara ed efficiente può aiutare a ridurre il tempo sprecato su Internet e, a sua volta, a ridurre lo spreco di energia.
- Esperienza utente (UX)
Uno degli elementi fondamentali di una buona esperienza utente è la riduzione dell’attrito nei percorsi degli utenti. Vogliamo che le persone siano in grado di trovare le cose che vogliono ed eseguire le azioni di cui hanno bisogno nel modo più snello possibile. Una buona esperienza utente rende l’utilizzo del Web più facile e divertente per tutti e ancora una volta riduce la quantità di energia sprecata per navigare verso pagine che non servono allo scopo corretto e fissare le pagine Web cercando di decifrare cosa dovrebbero fare dopo. - Riduci le immagini
Sulla maggior parte dei siti Web, le immagini sono i maggiori contributori al peso della pagina. Indipendentemente da eventuali ottimizzazioni tecniche, designer e creatori di contenuti dovrebbero riflettere attentamente sull’uso delle immagini.
- L’immagine aggiunge davvero valore all’utente?
- Comunica informazioni utili?
- Si potrebbe ottenere lo stesso impatto se l’immagine fosse più piccola?
- Possiamo ridurre le immagini che non sono visibili all’utente, come nei caroselli?
- Potremmo ottenere lo stesso effetto con una grafica vettoriale (o anche in stile CSS) invece di una foto?
- Porsi queste domande e ridurre al minimo le immagini senza compromettere l’esperienza dell’utente aiuterà a ridurre il consumo di energia.
- Riduci video
Sebbene meno comunemente utilizzato delle immagini, il video è sempre più popolare come formato di contenuto sul Web ed è di gran lunga la forma di contenuto più intensiva di dati e di elaborazione. Come per le immagini, chiediti se i video sono davvero necessari. In tal caso, verifica se puoi ridurre la quantità di video in streaming rimuovendo la riproduzione automatica dai video e mantenendo brevi i contenuti video. Un sito Web con riproduzione di video può essere uno o anche due ordini di grandezza più pesante di un sito Web senza video in termini di peso della pagina e crea un carico molto più elevato sulla CPU degli utenti, con conseguente consumo di energia notevolmente maggiore.
- Scegli i caratteri con attenzione
I caratteri Web possono migliorare l’appeal visivo dei siti Web, ma possono aggiungere un peso significativo ai file sui siti Web su cui vengono utilizzati. Un singolo file di font potrebbe arrivare fino a 250 kb e potrebbe essere solo per il peso standard. Se vuoi grassetto, aggiungi altri 250kb!
Per ridurre l’impatto sui caratteri Web personalizzati, i designer dovrebbero considerare le seguenti opzioni:
- Utilizzare i caratteri di sistema ove possibile. Non sono sempre così belli, ma i caratteri come Arial e Times New Roman possono essere utilizzati senza caricare alcun file di carattere poiché sono già sul dispositivo dell’utente.
- Usa meno variazioni di carattere. Potresti sentire la necessità di utilizzare caratteri web personalizzati, ma cerca di essere parsimonioso nel numero di caratteri tipografici che scegli e nel numero di pesi diversi che usi per ciascun carattere tipografico.
- Scrivi codice pulito
Questo probabilmente è ovvio, ma un codice ordinato e semplificato è una cosa fondamentalmente buona. Mantieni il codice pulito e semplice, evita la duplicazione e scrivi query efficienti. Il codice dietro le quinte dovrebbe essere una macchina snella e ben oliata.
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.
- Usa meno JavaScript
JS influisce sull’efficienza del sito Web in due modi: aggiungendo il peso del file alla pagina Web e aumentando la quantità di elaborazione richiesta dal dispositivo dell’utente. Il secondo di questi è qualcosa che si applica a JS molto più che ad altri tipi di file.
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.
- Ottimizza le immagini
Come accennato in precedenza, le immagini sono uno dei maggiori contributori alla quantità di dati trasferiti sulla maggior parte delle pagine web. Oltre alle decisioni prese da designer e creatori di contenuti sull’uso delle immagini, ci sono decisioni tecniche che influiscono in modo significativo sulla dimensione del file delle immagini visualizzate su una pagina. Questi includono:
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.
- Ottimizza i caratteri
Esistono strategie tecniche che possono essere utilizzate per ridurre al minimo la dimensione dei caratteri sui siti Web e abbiamo visto che anche con caratteri personalizzati, può comportare riduzioni delle dimensioni dei file fino al 97%. Prova queste tecniche per ridurre le dimensioni dei file dei caratteri:
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.
- Usa le pagine AMP
AMP è progettato per velocizzare il caricamento dei contenuti sui dispositivi mobili eliminando il codice non necessario e il peso dei file, offrendo una versione minimalista della pagina Web originale. In teoria, tecnologie come AMP in realtà non aiutano molto se il sito Web è efficiente all’inizio, ma nei casi in cui le pagine Web originali non sono snelle come dovrebbero, AMP può essere uno strumento utile per eliminare il veloce e fornire una versione più leggera ed efficiente dal punto di vista energetico per gli utenti mobili.
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.
- Costruisci pagine web statiche
I siti Web basati su CMS effettuano query sul database del sito Web e generano pagine in modo dinamico. In parole povere, significa che il server web deve lavorare pensando a quali informazioni inviare all’utente ogni volta che qualcuno tenta di caricare una pagina, e questo fa sì che il server utilizzi più energia. Una soluzione (elencata di seguito) è l’utilizzo di una tecnologia di memorizzazione nella cache del server, ma in alcuni casi potrebbe essere possibile semplicemente server pagine Web statiche senza alcun database.
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.
- Utilizza un data center vicino ai tuoi utenti
Gran parte dell’energia utilizzata da Internet viene utilizzata per trasmettere dati attraverso le reti di telecomunicazioni. Inutile dire che più l’informazione deve viaggiare, più energia consuma nel suo viaggio. Pertanto, la selezione di un data center vicino al pubblico di destinazione contribuirà a ridurre il consumo di energia. Ad esempio, potresti trovare un pacchetto di web hosting economico da una società di hosting con sede negli Stati Uniti, ma se i tuoi visitatori target sono nel Regno Unito o in Germania, l’energia verrà sprecata trasmettendo dati attraverso l’Atlantico. Inoltre, questa distanza aggiuntiva può causare un ritardo anche nei tempi di caricamento della pagina, quindi localizzare il tuo sito Web in un data center vicino al tuo pubblico principale sarà positivo per l’esperienza dell’utente e per il pianeta. - Usa una CDN
Va benissimo individuare il tuo data center vicino al tuo gruppo di pubblico principale, ma nei casi in cui il tuo pubblico è diffuso in tutto il mondo non è così facile. Le reti di distribuzione dei contenuti (CDN) forniscono un’ottima soluzione a questo, servendo risorse come file di immagine da una rete di data center in tutto il mondo. Ciò significa che nella maggior parte dei casi, i file più grandi verranno caricati dalla posizione CDN nella regione dell’utente, riducendo la distanza percorsa dai dati ogni volta che viene caricata una pagina. Ancora una volta, questo migliora l’efficienza energetica e migliora i tempi di caricamento della pagina.
Conclusioni
È 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.