Che cos'è il web design sostenibile e come ottenerlo

“Voglio davvero un'auto elettrica, ma semplicemente non posso permettermela” disse un mio amico con rimorso qualche mese fa. Stavamo discutendo del cambiamento climatico e dei cambiamenti che entrambi abbiamo apportato alle nostre abitudini.

ridacchiai.

"Lo sai che consumano anche energia, e se non carichi la tua auto elettrica attraverso una presa che utilizza energia rinnovabile, stai comunque inquinando parecchio, vero?"

Ha detto che lo sapeva, ma sentiva ancora che lui e la sua VW di 20 anni erano uno schiaffo in faccia a tutti i suoi sforzi per condurre una vita più sostenibile ed ecologica.



"Che ne dici di questo - posso dirti come ridurre le tue emissioni di carbonio attraverso il tuo mondo digitale" ho suggerito. Mi rivolse uno sguardo perplesso. Gli ho poi detto che secondo alcune statistiche, l'utente medio di Internet genera all'incirca la stessa quantità di CO2 che farebbe percorrendo 1000 km con un'auto normale e ci sono varie attività che contribuiscono.

Ha combattuto questa idea per quasi dieci minuti finché non ho estratto i dati sul mio telefono. Onestamente, non l'ho biasimato poiché ricordo di aver avuto la stessa reazione il giorno in cui mi sono reso conto che ogni pagina web che visito ha un costo nascosto: quello dell'energia utilizzata per mantenerlo attivo.

Lo sporco segreto di Internet, per così dire.

Secondo Website Carbon Calculator, un sito web medio produce circa 0,5 grammi di CO2 per pagina visualizzata, quindi per un sito web con 100.000 visualizzazioni mensili, si tratta di 500 kg all'anno. Tieni presente che è per sito web!

Per riferimento, un'auto media emette 1200 kg di CO2 per 1000 km, quindi puoi vedere come Internet ha un effetto molto palpabile sul cambiamento climatico e sul riscaldamento globale a causa della sua immensa impronta di carbonio.

Quindi la domanda è: cosa puoi fare come proprietario di un sito web per ridurre l'impatto del tuo sito sul nostro ambiente?

Web design sostenibile, ovviamente.

A Kualo, siamo così intrinsecamente intrecciati con il concetto di sostenibilità che abbiamo pensato che sarebbe stato naturale esplorare questo argomento. In questo articolo impareremo:

• Cos'è il web design sostenibile?
• Perché abbiamo bisogno di un web design sostenibile?
• Quali sono i vantaggi del web design sostenibile?
• Best practice per il web design sostenibile

Vogliamo fornirti i progetti esatti che ti aiuteranno a ridurre al minimo l'impronta di carbonio del tuo sito Web, quindi senza ulteriori indugi, tuffiamoci!

Cos'è il web design sostenibile?

“Il web design sostenibile è un approccio alla progettazione di servizi web che mettono al primo posto le persone e il pianeta. Fornisce prodotti e servizi digitali che rispettano i principi del Sustainable Web Manifesto: pulito, efficiente, aperto, onesto, rigenerativo e resiliente”.



Questo è ciò che si legge sul Sustainable Web Design Manifesto, con il sito che spiega in breve cosa dovrebbe racchiudere questo credo. Andiamo velocemente sui 6 punti:

1. Pulito: i servizi utilizzati dal tuo sito web dovrebbero essere alimentati da fonti di energia rinnovabile, il che significa che il tuo web hosting dovrebbe essere alimentato a energia verde.
2. Efficiente: i servizi che fornisci dovrebbero essere completamente ottimizzati per utilizzare la minor quantità possibile di energia (e materiali)
3. Aperto: i servizi che fornisci dovrebbero essere accessibili a tutti e dovrebbero consentire agli utenti di avere il pieno controllo dei propri dati
4. Onesto: il tuo sito web non fornirà contenuti fuorvianti e/o tenterà di fuorviare gli utenti attraverso il web design
5. Rigenerativo: i tuoi servizi parteciperanno a un'economia orientata a sostenere le comunità e l'ambiente
6. Resiliente: i tuoi servizi saranno forniti quando e dove sono più necessari

Se consideri tutti i punti sopra esposti, potresti vedere che ciò che questo manifesto richiede non è solo un web design sostenibile, ma è davvero il fondamento per pratiche commerciali sostenibili ed economia sostenibile. Per avere un futuro migliore, abbiamo bisogno di aziende che forniscano servizi e prodotti significativi e utili che abbiano un impatto negativo minimo sull'ambiente e sulle persone.

In altre parole, se stai cercando un web design sostenibile, dovresti:

• Utilizzare la minor quantità possibile di risorse
• Sviluppa e segui un piano di contenuti ben ponderato che assicuri che ogni pagina che progetti abbia uno scopo
• Utilizza una build ottimizzata del sito web
• Evita di indurre in alcun modo in errore i tuoi utenti affinché eseguano azioni che potrebbero non voler eseguire

Perché è importante il web design sostenibile?

Quindi, Internet ha numerosi vantaggi per la società, ma ha un enorme costo ambientale. L'utente web medio consuma contenuti online per 5-6 ore al giorno sul proprio computer o dispositivo mobile. Poiché continuiamo a utilizzare la tecnologia più spesso che mai, questo aumenterà solo negli anni futuri fino a quando miliardi di persone navigheranno su siti Web di tutto il mondo con 8 diversi tipi di dispositivi!

Ora, tornando a ciò che ho detto all'inizio di questo articolo (e alla nostra infografica sull'impatto ambientale di Internet), sappiamo che questo è fondamentalmente un buco nero di energia in continua crescita. D'altra parte, sappiamo anche che Internet è fondamentale per molte persone e non è che possano sostituirlo con la sua versione più efficiente dal punto di vista energetico, come faresti con un'auto o un laptop.

Ma sai cosa possiamo scambiare?

Il design del nostro sito web, ovviamente.

Se il punto principale è che le dimensioni del tuo sito web e il modo in cui è costruito hanno un impatto diretto sulla quantità di CO2 che genererà, allora questo è ciò che dobbiamo affrontare come proprietari di siti web.

Vantaggi del web design sostenibile

Ora, in generale, se stai leggendo questo, hai già un buon motivo per volere un sito web sostenibile, e quel motivo è legato alla tutela dell'ambiente. Fondamentalmente, vuoi essere un eroe per il pianeta e ti ammiro per questo.

Ma c'è un ulteriore vantaggio nel cambiare i nostri modi quando si tratta di web design?

Direi assolutamente di sì.



Come marketer, sono abituato a considerare tutti gli aspetti dei miei sforzi digitali e il modo in cui incidono sui miei progetti.Posso dirti subito che anche a livello personale, è molto meglio implementare un sito web che segua un web design e qui ci sono alcuni dei motivi per cui:

• Spenderai meno : dalle tue spese di designer alla produzione di contenuti, ogni cosa in più ti costerà denaro. Progetti più complessi ti costeranno denaro, più copywriting e contenuti ti costeranno denaro e così via. Essere minimalisti e avere solo ciò di cui hai effettivamente bisogno è un ottimo modo per tagliare le spese
• I tuoi clienti saranno più soddisfatti: mentre una volta i siti web erano una novità, le persone si divertivano con campane e fischietti, ora tutti ne sono sopraffatti, mentre passano tutto il giorno a navigare. Ciò significa che per l'utente medio, più chiaro è il tuo sito web, più è probabile che trovino ciò che vogliono invece di premere il pulsante X e andare da qualcuno che non sta perdendo tempo.
• I tuoi sforzi SEO saranno più efficaci : la velocità è una cosa da alcuni anni quando si tratta di posizionamento su Google, ma con il passare degli anni vediamo che questo diventa sempre più critico quando si tratta di SEO. Google ODIA i siti Web lenti e darà assolutamente la priorità a siti più leggeri e veloci. A proposito, questo vale anche per l'esperienza del cliente, come tutti sappiamo.

Come rendere sostenibile il tuo sito web

1. Inizia pianificando il percorso dell'utente

Se non hai familiarità con il concetto, il percorso dell'utente si riferisce semplicemente alla sequenza di azioni che un utente intraprende quando visita il tuo sito per raggiungere un obiettivo particolare: una registrazione, un acquisto, ecc.

Per ovvi motivi, gli utenti preferiscono viaggi più brevi, in quanto non perdono tempo. A parte l'esperienza del cliente, tuttavia, visiteranno anche meno pagine per trovare ciò di cui hanno bisogno, riducendo così le emissioni di carbonio della loro visita.





(credito immagine: https://www.appcues.com/blog/user-journey-map)

È una buona idea familiarizzare meglio con il concetto di viaggio dell'utente e poi, una volta che puoi progettare liberamente le tue mappe di viaggio dell'utente, adattare il tuo web design ad esse.

Una buona esperienza utente (UX) che eviti i punti di attrito si tradurrà inevitabilmente sia in un minor consumo di energia che in clienti più felici.

2. Scegli un provider di hosting ecologico

So che questo suona un po' egoistico dato che, alla fine, siamo una società di hosting, ma la realtà è che chi alimenta il tuo sito web ogni singolo giorno sarà assolutamente importante se vuoi ridurre la tua impronta di carbonio. I data center consumano, purtroppo, gran parte dell'energia che va ad alimentare Internet. È essenziale passare rapidamente a fonti rinnovabili al 100%.



La scelta di un fornitore che offre hosting sostenibile alimentato da energia rinnovabile è un must. È anche una buona idea esaminare la loro politica ambientale complessiva e verificare se il tuo provider di hosting ha adottato ulteriori misure per compensare le proprie emissioni di CO2 e/o se è coinvolto in altre pratiche di sostenibilità.

3. Memorizza tutto nella cache!

Se stai utilizzando un'applicazione basata su PHP come fanno molti siti Web (WordPress, Magento, Drupal ecc.), la memorizzazione nella cache è un must per la sostenibilità.

Se un sito non ha la cache, stai facendo lavorare di più il server. Ogni volta che qualcuno accede a una pagina del tuo sito web, il contenuto della pagina deve essere costruito al volo elaborando il codice PHP, effettuando query al database e trasformandolo nel contenuto HTML che visualizza il tuo sito web.

Questo utilizza più CPU, memoria e disco del server, consumando energia durante il processo. Il server dovrebbe farlo per ogni visitatore e ogni pagina, quindi più visitatori e pagine hai, più energia consumi.



Con la memorizzazione nella cache, la maggior parte di questo intenso carico di lavoro viene svolto solo la prima volta che un visitatore richiede una pagina. L'HTML risultante viene quindi archiviato in una cache in modo che ogni successivo caricamento della pagina non debba eseguire tutto quel lavoro pesante.

Inoltre, le tue pagine si caricano più velocemente. Questa non è solo una vittoria per te e per i tuoi visitatori, ma significa anche che i tuoi visitatori trascorrono meno tempo in attesa del caricamento della pagina, consumando meno energia nel processo.

Esistono molti modi per memorizzare nella cache i siti Web, in Kualo preferiamo LiteSpeed ​​Cache per la memorizzazione nella cache delle pagine e abbiamo anche Redis e Memcached per memorizzare nella cache le query del database. Siti web super veloci e migliore sostenibilità: cosa c'è da non amare?

4. Se stai scrivendo codice, assicurati che sia un codice pulito

La maggior parte degli utenti utilizzerà una sorta di CMS, ma se scrivi del codice, assicurati che sia facile da capire, facile da modificare ed eviti duplicazioni e operazioni non necessarie

5. Evita plug-in e componenti aggiuntivi inutili

Questo è rilevante per la regola di cui sopra, ma per le persone che effettivamente utilizzano un CMS come WordPress, Magento, Craft, Laravel e così via. A volte potremmo essere troppo entusiasti di tutte le possibilità che il mercato dei plug-in ci offre e annegare il nostro sito Web in plug-in non necessari

Questo è spesso il caso di plug-in orientati al marketing o duplicati di cui ci siamo dimenticati. Valuta quello che hai e poi quello di cui hai bisogno e dai il via a qualsiasi altra cosa.

6. Evitare o utilizzare caratteri minimamente personalizzati

Questo può sorprendere, ma i caratteri personalizzati possono assolutamente aumentare le dimensioni del file del tuo sito web].



(il carattere personalizzato creato per Duolingo dall'agenzia Johnson Banks)

Il tuo tipico file di font personalizzato può facilmente superare i 200kb includendo un singolo peso. Se si utilizzano vari pesi e caratteri tipografici, questo inevitabilmente si sommerà, con un impatto sia sulla velocità che sul consumo energetico.

Si consiglia pertanto di utilizzare caratteri personalizzati solo se si ritiene che siano davvero importanti per il proprio marchio e per scopi pratici.

7. Usa saggiamente i file multimediali (e ottimizzali)

Va da sé che tutte le immagini sul tuo sito web dovrebbero essere ottimizzate in termini di dimensioni. Lo sappiamo dalle best practice relative alla velocità del sito web (e, successivamente, SEO). A volte vediamo clienti che chiedono perché il loro sito è lento, solo per scoprire che la home page include 4 MB di immagini perché hanno caricato originali molto grandi! Quelle stesse immagini potrebbero essere servite senza alcuna riduzione della qualità ottimizzandole.

https://youtu.be/eY-VyLd2t-Q

LiteSpeed ​​Cache per WordPress include l'ottimizzazione automatica delle immagini, quindi non devi preoccuparti di farlo da solo. Inoltre, può convertire le immagini in formati di file moderni come WebP, che sono circa il 25% più piccoli rispetto alle immagini PNG o JPG.

Oltre all'ottimizzazione, ciò che dobbiamo anche considerare è se il loro uso sia giustificabile e mirato.

Ad esempio, alcune foto del prodotto potrebbero essere inutili (es. angoli molto simili). In altri casi, le immagini utilizzate nella pagina, come le immagini stock casuali, possono essere facilmente sostituite con alternative come la grafica SVG o lo stesso effetto può essere ottenuto tramite gli stili CSS.

8. Lazy load below the fold contenuto

Ognuna delle tue pagine web può contenere molti contenuti "below the fold", vale a dire contenuti che non sono visibili a meno che il visitatore non scorra la pagina.

Se questo include molte immagini o video in particolare, che possono essere di grandi dimensioni, tutti quei dati devono viaggiare attraverso Internet anche se potrebbero non essere mai visti.



Caricamento lento significa che richiedi questo contenuto solo mentre l'utente scorre la pagina verso il basso. Quelle sezioni appariranno appena prima che il contenuto venga visualizzato, quindi dal punto di vista dei visitatori, è come se fosse sempre stato lì - non c'è alcuna differenza percepibile.

Non solo eviti di trasmettere dati non necessari, ma migliorerai anche il tuo punteggio di PageSpeed ​​rendendo il tuo sito web meno pesante.

Alcune applicazioni sono dotate di caricamento lento integrato o possono essere integrate con un plug-in. Per WordPress, LiteSpeed ​​Cache include una funzione di caricamento lento che è in grado di caricare qualsiasi cosa da immagini, video, contenuti incorporati o persino interi blocchi HTML se la tua pagina è molto lunga.

9. Limitare l'uso di video e animazioni

Non è necessario che il tuo sito web assomigli a una pagina di Word ed eviti video e animazioni come la peste, ma come con le immagini, usali invece in modo parsimonioso.

Le animazioni in genere non hanno uno scopo tattico, quindi usale il meno possibile. Con i video, va fortemente a quale scopo serviranno, quindi se pensi che siano utili ai tuoi utenti, usali davvero, assicurati solo che siano anche il più ottimizzati possibile.

10. Minimizza HTML, CSS e Javascript sul tuo sito

Ancora una volta, potresti già farlo per motivi di velocità, ma se non lo sei, esaminiamo rapidamente il motivo alla base di questo.

Spesso il tuo codice HTML, CSS e Javascript conterrà dati aggiuntivi, come spazi, interruzioni di riga o commenti. Questi spazi o commenti sono utili solo per consentire a uno sviluppatore di leggere e comprendere facilmente il codice, ma non fanno alcuna differenza nel modo in cui il browser interpreta il codice.

Ridurre al minimo il codice elimina tutto questo peso inutile, riducendo le dimensioni dei file che devono essere trasferiti su Internet e velocizzando il caricamento del sito.

Per WordPress LiteSpeed ​​Cache gestisce questo aspetto per te, ma anche la maggior parte delle altre applicazioni avrà una funzionalità simile disponibile tramite un plug-in.

11. Rimuovi CSS e Javascript non necessari

Mentre la minificazione elimina i dati non necessari, non analizza se parte di quel codice viene effettivamente utilizzato dal tuo sito.

Potresti aver utilizzato un tema o un generatore di pagine che include un sacco di layout, stili o funzionalità diversi che non usi mai da nessuna parte sul tuo sito.

Tutto il codice rimarrà nei tuoi file CSS e JS, aumentando la quantità di dati che devono essere trasferiti su Internet e rallentando il caricamento del tuo sito senza una buona ragione.



Può essere difficile capire esattamente quale codice rimuovere manualmente, ma per WordPress, LiteSpeed ​​Cache ti consente di rimuovere automaticamente i CSS inutilizzati. Questo elimina i CSS inutilizzati e genera un file CSS univoco per ogni pagina. Questo può essere utile se hai solo poche pagine, ma se il tuo sito ha molte pagine, potrebbe essere più efficiente utilizzare un singolo file CSS.

Javascript può essere più complesso da eliminare, sebbene LiteSpeed ​​possa almeno ritardarne il caricamento fino a quando non viene rilevata l'attività dell'utente. Questo può essere appropriato, a condizione che non sia necessario per i contenuti above the fold.

In definitiva, il miglior consiglio è evitare di utilizzare page builder o plug-in gonfiati ove possibile e utilizzare codice pulito che sai essere effettivamente richiesto.

12. Assicurati che il tuo sito web funzioni correttamente su diversi dispositivi

Testare il tuo sito su numerose dimensioni dello schermo, browser, dispositivi e velocità di larghezza di banda può richiedere molto tempo, ma è strettamente legato a un web design sostenibile. Ha a che fare con il punto n.1, il che significa che la visualizzazione errata di contenuti e design porterà a una scarsa UX e molta confusione tra gli utenti.

Trascorreranno molto più tempo cercando di trovare ciò che stanno cercando, con conseguente maggiore consumo di energia.

Per evitare ciò, assicurati che il tuo design si adatti bene al maggior numero possibile di queste variabili per fornire un'esperienza ottimale agli utenti.

13. Usa un CDN per servire i tuoi contenuti

Quindi cos'è un CDN? Una rete per la distribuzione di contenuti (CDN) è una rete di server in diverse località geografiche. Il modo in cui aiuteranno i tuoi contenuti a caricarsi più velocemente è servendo da una posizione vicino ai tuoi utenti. In altre parole, questo è legato sia alla velocità che all'esperienza dell'utente.

Ancora più importante, però, dal punto di vista della sostenibilità, questo aiuta a ridurre le emissioni di CO2 poiché il trasferimento di dati in diverse parti del mondo richiede molta energia. E più lontano devono viaggiare i dati, più energia richiede.

È anche utile ricordare che le immagini servite tramite CDN sono in genere di dimensioni ridotte se in qualche modo hai saltato questo passaggio. Molti CDN ti forniranno strumenti per l'ottimizzazione delle immagini, inclusa la riduzione delle dimensioni dell'immagine, della densità dei pixel, del formato e della compressione.



È importante scegliere un CDN che utilizzi energia rinnovabile, ovviamente, come Cloudflare.

14. Controlla i tuoi contenuti per assicurarti che rispetti la strategia

Se disponi di un sito Web di grandi dimensioni, controllarne periodicamente il contenuto è fondamentale. Alcune pagine diventeranno inevitabilmente obsolete o non serviranno più al loro scopo. Ciò è particolarmente vero per le basi di conoscenza, ma vale anche per le pagine dei prodotti, i post dei blog e così via.

Puoi esplorarli manualmente o utilizzare Google Analytics per valutare quali pagine possono essere obsolete o con prestazioni insufficienti. Puoi quindi decidere se puoi adattarli per avere contenuti utili e aggiornati o determinare che sono semplicemente destinati al cestino.

15. Riduci le tue emissioni di CO2 compensando la tua impronta di carbonio

Diventare un'azienda a favore del clima è stata probabilmente una delle migliori decisioni che abbiamo mai preso in termini di miglioramento della nostra sostenibilità. Finora abbiamo piantato più di 50.000 alberi e compensato più di 2000t di CO2, con l'intenzione di continuare questo viaggio negli anni a venire.

Partecipare a progetti che piantano alberi e compensano il carbonio è un modo straordinario non solo per migliorare la sostenibilità del tuo web design, ma anche della tua attività in generale. Gli alberi sono vincitori assoluti quando si tratta di ridurre le emissioni di CO2, poiché le assorbono e le trasformano in ossigeno.

Ti invitiamo a visitare i nostri partner di Ecologi (o qualsiasi altra organizzazione simile) e iniziare a piantare quegli alberi!