In che modo il miglioramento delle prestazioni del sito Web può aiutare a salvare il pianeta

Potresti non pensarci spesso, ma Internet utilizza una quantità colossale di elettricità. Questa elettricità deve essere prodotta da qualche parte. Nella maggior parte dei paesi, ciò significa bruciare combustibili fossili. Questo, a sua volta, significa che l'impronta di carbonio di Internet è cresciuta al punto che potrebbe aver eclissato i viaggi aerei globali, e questo rende Internet la più grande macchina a carbone sulla Terra.

Il Mozilla Internet Health Report 2018 afferma che, soprattutto quando Internet si espande in un nuovo territorio, "la sostenibilità dovrebbe essere una priorità più grande". Ma così com'è, i siti web stanno diventando sempre più obesi, il che significa che la domanda di energia di Internet continua a crescere in modo esponenziale.

Nel frattempo, gli impatti dei cambiamenti climatici aumentano e aumentano di anno in anno. La stragrande maggioranza degli scienziati del clima attribuisce la crescente ferocia e frequenza degli eventi meteorologici estremi in tutto il mondo ai cambiamenti climatici, che in gran parte attribuiscono all'attività umana. Mentre alcuni mettono in dubbio la scienza, anche le più grandi compagnie petrolifere del mondo ora lo accettano e ammettono che i loro modelli di business devono cambiare.

Tutti i paesi della Terra (ad eccezione degli Stati Uniti) hanno sottoscritto l'Accordo di Parigi sul clima. Sebbene gli Stati Uniti si siano ritirati in modo controverso, molti degli individui, delle città, degli stati e delle aziende più influenti d'America - che rappresentano più della metà della popolazione e dell'economia degli Stati Uniti - hanno mantenuto il loro impegno per l'accordo attraverso l'iniziativa America's Pledge.

Come sviluppatori web, è comprensibile pensare che questo non sia un problema su cui abbiamo alcuna influenza, ma non è vero. Sono in corso molti sforzi per migliorare la situazione sul web. La Green Web Foundation gestisce un database in continua crescita di host web che sono interamente alimentati da energia rinnovabile o almeno si impegnano a essere carbon neutral. Nel 2013, A List Apart ha pubblicato Sustainable Web Design di James Christie. Negli ultimi tre anni, la conferenza SustainableUX ha visto esperti di sostenibilità del web condividere le loro conoscenze in una serie di discipline basate sul web.

Dal 2009, Greenpeace ha esercitato pressioni sulle grandi società Internet affinché ripulissero il loro mix energetico attraverso la loro campagna Clicking Clean. In parte come risultato di questa campagna, l'anno scorso Google ha annunciato di aver acquistato per la prima volta energia rinnovabile sufficiente a coprire il 100% del suo consumo globale per le operazioni.

Quindi, oltre ad alimentare i server con energia rinnovabile, cos'altro possono fare gli sviluppatori web contro il cambiamento climatico?

"Non puoi gestire ciò che non puoi misurare"

Forse la vittoria più grande quando si tratta di rendere i siti Web più sostenibili è che prestazioni, esperienza utente e sostenibilità sono tutti perfettamente intrecciati. La metrica chiave per misurare la sostenibilità di un prodotto digitale è il suo consumo di energia. Ciò include il lavoro svolto dal server, dal client e dalle reti di comunicazione intermedie che trasmettono dati tra i due.

Con questo in mente, forse la prima cosa da considerare è come misuriamo il consumo di energia del nostro sito web? Questa è in realtà un'impresa più complicata di quanto potresti immaginare ed è difficile ottenere dati precisi qui. Ci sono, tuttavia, alcuni buoni fallback che possiamo usare che dimostrano il consumo di energia. Questi includono il trasferimento dei dati (ossia la quantità di dati che il browser deve scaricare per visualizzare il tuo sito Web) e l'utilizzo delle risorse dell'hardware che serve e riceve il sito Web. Una metrica ovvia qui è l'utilizzo della CPU, ma anche l'utilizzo della memoria e altre forme di archiviazione dei dati fanno la loro parte.

Il trasferimento dei dati è una cosa che possiamo misurare abbastanza facilmente. Tutti i principali browser forniscono strumenti per sviluppatori che ci consentono di misurare l'attività di rete. In questo screenshot qui sotto, ad esempio, possiamo vedere che il caricamento del sito Web di Smashing Magazine per la prima volta comporta poco meno di un megabyte di trasferimento di dati. Gli strumenti di sviluppo di Firefox in realtà ci forniscono due numeri: il primo è la dimensione non compressa dei file che sono stati trasferiti e il secondo è la dimensione compressa.

Lo strumento più comune per comprimere le risorse mentre viaggiano attraverso la rete è gzip, quindi la differenza tra questi due numeri è in genere il risultato del lavoro di gzip. Quest'ultimo numero rappresenta la quantità di dati effettivamente trasmessi ed è quello da tenere d'occhio.

Nota : ci sono molti altri strumenti che ci forniscono una metrica per il trasferimento dei dati, incluso il tanto venerato WebPagetest.

Per misurare l'utilizzo della CPU, Chrome ci fornisce un Task Manager granulare che mostra l'ingombro della memoria, l'utilizzo della CPU e l'attività di rete delle singole schede. Per i più avventurosi/tecnici, il comando top (tabella dei processi) fornisce metriche simili sulla maggior parte dei sistemi operativi simili a Unix come macOS e Ubuntu. In generale, possiamo anche eseguire il comando top su qualsiasi server a cui abbiamo accesso alla shell.

Fortunatamente, ci sono sforzi come WebsiteCarbon ed Ecograder che cercano di tradurre queste metriche in una cifra specifica di CO2 (nel caso di WebsiteCarbon) o un punteggio (nel caso di Ecograder).

Progettazione Web sostenibile

Ora che sappiamo come misurare l'impatto del nostro sito, è tempo di pensare a come possiamo ottimizzare le cose per renderlo più sostenibile, più performante e in generale un'esperienza migliore da utilizzare.

Ci sono alcuni lavori esistenti a cui possiamo attingere per aiutarci qui. Nel 2016, O'Reilly ha pubblicato “Designing For Sustainability” di Tim Frick. In questo libro, Tim ci accompagna in un tour dei perché e dei come del design sostenibile. Ma possiamo anche attingere a una ricchezza di idee esistenti, conferenze e articoli che, pur non avendo un focus esplicito sulla sostenibilità, hanno un'enorme sovrapposizione con la filosofia del web design sostenibile. Esempi particolarmente buoni qui sono il progetto collaterale di Brad Frost, "Death To Bullshit", gli articoli e i discorsi di Heydon Pickering sulla scrittura di codice meno maledetto e il post sul blog di Adam Silver, "Designing For Actual Performance".

Se stiamo eseguendo una riprogettazione completa di un sito Web o ne stiamo iniziando uno nuovo da zero, possiamo iniziare con alcune domande di alto livello qui. Ad esempio, cosa merita o deve essere effettivamente su una home page? E più specificamente, quale valore apporta ogni elemento di una home page? Come dice Heydon Pickering:

"La funzionalità più performante, accessibile e facilmente gestibile di un sito Web è quella che non crei in primo luogo."

Lavoro nel team VIP di WordPress.com, quindi in questo senso ho deciso di mettermi alla prova mettendo insieme un tema WordPress minimalista per vedere fino a che punto potevo spingermi con le tecniche del web design sostenibile. Il risultato è un tema chiamato Susty, e può essere visto in azione sul sito Web di accompagnamento che ho messo insieme: sustywp.com. In quell'esempio particolare, il sito Web viene consegnato in poco più di 6 KB di trasferimento di dati, il che è positivo dato che il sito Web medio è di circa 1,5 MB.

Allora, cosa ho fatto? Bene, te lo dico io.

Riduci le richieste di rete

Come ho sottolineato in precedenza, le richieste di rete sono qualcosa che possiamo facilmente misurare, quindi rappresentano un buon punto di partenza. Nel mettere insieme Susty, ho notato che c'erano un certo numero di richieste HTTP in corso che non sembravano essere necessarie. Ad esempio, WordPress raggruppa alcuni CSS e JavaScript che rilevano l'utilizzo di emoji e si assicura che non appaiano come caratteri illegali. Non c'è niente di intrinsecamente sbagliato in questo, ma se non hai intenzione di usare emoji, o sei felice e fiducioso che le varie impostazioni predefinite del sistema ti copriranno, puoi impedirne il caricamento.

Ciò rappresenta un risparmio relativamente scarso, ma stabilendo una filosofia di sfoltimento del codice e delle richieste indesiderate dalle nostre pagine, possiamo apportare miglioramenti delle prestazioni molto più significativi. Per esempio:

• Stiamo caricando l'intero jQuery per alcune operazioni DOM di base?
  Potremmo raggiungere gli stessi scopi con JavaScript puro? Puoi leggere informazioni sull'eliminazione del codice morto più avanzata (ovvero scuotimento degli alberi) in questo post per Google di Jeremy Wagner.
• Abbiamo un carosello di immagini?
  Abbiamo davvero bisogno di tutte quelle immagini? Stanno migliorando significativamente l'esperienza dell'utente? O potremmo ridurlo a una sola immagine forte? O anche mostrare casualmente una di una selezione di immagini, per dare un senso di dinamismo agli utenti abituali? A proposito, la ricerca che è stata fatta qui mostra che alla maggior parte degli utenti non piacciono né interagiscono con i caroselli.
• Se utilizziamo molte immagini, trarremmo vantaggio dal fornire le nostre immagini utilizzando il formato WebP per quei browser che lo supportano?
  Per molto tempo, il supporto di WebP è stato frustrantemente limitato. Ma con Firefox che dovrebbe iniziare a supportarlo nella versione 65 (prevista per gennaio 2019), è solo questione di tempo prima che i rimanenti ritardatari come Safari raggiungano il ritardo.
• Stiamo caricando centinaia di kilobyte di font web?
  Stiamo utilizzando tutti i caratteri Web che stiamo caricando? Abbiamo anche bisogno di font web? La maggior parte dei dispositivi in ​​questi giorni ha una pila di caratteri decenti per metà, potremmo semplicemente specificare un elenco di caratteri che vorremmo vedere disposti in base alle preferenze? Se dobbiamo utilizzare i font web, dovremmo assicurarci che i nostri font siano il più possibile performanti.
• Stiamo incorporando i video di YouTube?
  Un video YouTube incorporato in genere aggiunge circa un megabyte di trasferimento di dati prima ancora che qualcuno interagisca con esso. Se solo una frazione dei nostri utenti si siederà e guarderà il video incorporato sul nostro sito Web, potremmo semplicemente collegarci ad esso?

Scruta tutto

In questo senso, possiamo anche interrogare ogni aspetto delle nostre pagine. Cosa merita davvero di essere lì? La nostra barra laterale aggiunge un valore reale o ne abbiamo semplicemente inserita una perché la convenzione impone che i siti Web abbiano barre laterali? Quindi, ne abbiamo aggiunto uno e l'abbiamo riempito di merda.

Con Susty, ho sperimentato l'approccio alquanto poco ortodosso di relegare la navigazione alla propria pagina. Ciò mi consente di avere pagine ridotte letteralmente all'essenziale, con contenuti aggiuntivi caricati solo su esplicita richiesta dell'utente. Susty è così leggero e così veloce che mi sono reso conto attraverso alcune ricerche di utenti (alias il mio partner) che il caricamento del menu non sembrava davvero una nuova pagina, quindi ho deciso di farlo sembrare una sovrapposizione, con una croce per ignora che in realtà ti riporta alla pagina precedente.

Oltre ad aiutarmi a creare pagine piacevolmente leggere, la navigazione relegata elimina anche la necessità di qualsiasi codice nascosto/rivela di fantasia per mostrarlo. A questo punto, vorrei chiarire che Susty è un esempio di come portare le tecniche di web design sostenibili all'estremo (non sto suggerendo che sia un archetipo di un buon sito web).

Scrivi CSS come tua nonna

Quando si tratta di un serio miglioramento delle prestazioni, dobbiamo tenere a mente che letteralmente ogni carattere del codice conta. Ogni carattere rappresenta un byte e anche dopo che sono stati compressi da gzip, stanno ancora prendendo peso. CSS è un dominio in cui spesso vediamo un sacco di rigonfiamenti. Fortunatamente, esiste un numero crescente di strumenti sempre più complessi che possono aiutarti a eliminare i CSS inutilizzati. Questo fantastico post di Sarah Dayan illustra come ha ridotto il suo bundle CSS da 259 KB a 9 KB!

Se partiamo da zero, forse dovremmo pensare più a fondo a come scriviamo i CSS in primo luogo. Heydon Pickering ha scritto un post eccellente su come possiamo scrivere CSS in un modo che giochi ai punti di forza di come è stata progettata la sintassi e come questo può aiutare gli sviluppatori a prevenire la ripetizione. Heydon sottolinea anche la quantità di spreco che si verifica con l'uso eccessivo di div e classi, sia in HTML che in CSS.

Cosa stai analizzando?

Sembra essere diventato più o meno onnipresente sul Web per tutti analizzare ciò che fanno i visitatori del proprio sito Web tramite strumenti come Google Analytics, KISSmetrics, Piwik, ecc. Anche se non ho dubbi sul fatto che ci siano casi d'uso legittimi, lo facciamo davvero hai bisogno di analisi su ogni sito web? Io, per esempio, ho normalmente aggiunto Google Analytics a ogni sito che gestisco. Ma relativamente di recente mi sono reso conto che per la maggior parte dei siti Web in questione, questo è stato uno sforzo quasi completamente inutile: "Oh, sei persone sono venute a questo post tramite Facebook oggi". Che importa?

A meno che tu non ne abbia davvero bisogno e non analizzerai e agirai in base ai dati, abbandona l'analisi e trova un modo migliore per trascorrere il tuo tempo piuttosto che guardare a bocca aperta la mondanità di quante persone hanno visitato il sito Web X oggi.

Oltre ad aumentare il peso della tua pagina, l'utilizzo di qualcosa come Google Analytics solleva questioni etiche sui dati che stai raccogliendo sui tuoi utenti per conto di Google, ovvero c'è un motivo per cui Google ti fornisce Analytics gratuitamente.

Non dimentichiamo le basi

Ci sono così tante informazioni in giro in questi giorni su quanto segue, ma non dovremmo mai accontentarci e dimenticarcene. Oltre a tutto quanto sopra, dovremmo sempre minimizzare HTML, CSS e JavaScript e concatenare dove appropriato. Dovremmo anche comprimere tutte le immagini per assicurarci che siano il più piccole possibile, utilizzare i formati giusti con le impostazioni corrette e utilizzare il rendering progressivo.

Prestazioni lato server

Finora, il nostro focus è stato quasi interamente sul front-end, ma gran parte di questo è reso irrilevante se non ottimizziamo anche le cose lato server. L'ho già menzionato un paio di volte, ma dovremmo assolutamente abilitare la compressione gzip in ogni momento.

Dovremmo rendere il servizio del nostro sito Web il più semplice possibile per il nostro server. Uso prevalentemente Nginx e ho una particolare predilezione per la cache FastCGI e l'ho trovato particolarmente efficiente. Se hai accesso shell al tuo server, ecco un post che spiega come configurarlo. Ci sono opzioni meno tecniche se non hai (o non vuoi) tanto controllo sul tuo server. Uno dei preferiti nello spazio WordPress è WP Super Cache.

Dovremmo usare HTTP2 su HTTPS. L'utilizzo di HTTPS apre un mondo di nuove tecnologie Web come i service worker che ci consentono di trattare la rete stessa come un oggetto piacevole da avere. Se vuoi saperne di più su questo, consiglio vivamente il nuovo libro di Jeremy Keith, "Going Offline".

Nota : potresti anche voler esaminare il modulo PageSpeed ​​di Google, disponibile sia per Apache che per Nginx.

Infine, l'impatto più grande che possiamo avere qui è ospitare i nostri siti Web in data center alimentati da energia rinnovabile. Nel Regno Unito, posso consigliare vivamente Krystal e Kualo in termini di società con cui ospito direttamente i miei siti. (Per una directory completa di host web verdi, controlla The Green Web Foundation.)

In conclusione

Spero di averti convinto che vale la pena impegnarsi per rendere i nostri siti web più sostenibili. Soprattutto considerando che nel processo realizziamo anche i nostri siti Web:

• Più performante,
• Più facile da usare,
• Più accessibile,
• Più server-friendly,
• Ottimizzato meglio per i motori di ricerca.

Una risposta che alcune persone hanno all'idea di un web design sostenibile – il che non è irragionevole – è che sembra essere una piccolissima concessione alla causa ambientale. Ovviamente, quanto impatto puoi avere dipende da quanto sono occupati i siti Web su cui lavori. Ma oltre ad aiutare il web a diventare un po' più rispettoso dell'ambiente, il web design sostenibile è fondamentalmente la migliore pratica di web design.

Vale anche la pena pensare a compensare le emissioni di carbonio che non puoi evitare. La compensazione del carbonio a volte viene derisa e con una buona causa. Il problema principale con la compensazione è che in genere il termine entro il quale il carbonio verrà compensato è piuttosto lungo. Ad esempio, con la piantumazione di alberi, la cifra fornita per una quantità di sequestro del carbonio è generalmente basata su un periodo di 100 anni. Quindi, in termini di riduzione delle emissioni di carbonio ora, non è davvero una soluzione. Ma è meglio di niente.

Il motto di myclimate è fare del proprio meglio e compensare il resto. Ho scritto un post sul blog sull'implementazione del proprio schema di compensazione delle emissioni di carbonio. Consiglio vivamente anche l'iniziativa 1% For The Planet. Infine, se sei un imprenditore e vorresti entrare a far parte di un'alleanza di aziende che vogliono vedere una migliore giustizia sociale, ambientale ed economica, dai un'occhiata allo schema Certified B Corporation.