Eco-design

In quanto azienda attenta all’ambiente, abbiamo scelto di collaborare con l’agenzia WebSenso per sviluppare un sito web eco-progettato. Questo approccio collettivo ci permette di conciliare performance digitale e responsabilità ecologica.

Abbiamo quindi sviluppato un sito che soddisfa le tue esigenze minimizzando la nostra impronta digitale.

In breve, come
Abbiamo proceduto?

• Design pulito : abbiamo rimosso tutti gli elementi superflui
• Contenuto essenziale : ogni informazione è stata selezionata con cura
• Risorse ottimizzate : immagini compresse, codice leggero, ecc.

Cos’è l’eco-design?

Il web eco-design è un approccio volto a ridurre l’impatto ambientale di un sito web durante tutto il suo ciclo di vita. Consiste nel progettare siti che consumano meno energia e siano più rispettosi dell’ambiente, ottimizzando risorse, codice e privilegiando host green. Questo approccio non solo minimizza l’impronta di carbonio, ma migliora anche le prestazioni e l’esperienza utente.

Indicatori chiave e benchmark

EcoIndex

EcoIndex è uno strumento gratuito per valutare l’impatto ambientale dei siti web. Sviluppato dall’associazione GreenIT e da Nxtweb, permette agli utenti di misurare le prestazioni ecologiche delle proprie pagine web. EcoIndex analizza criteri come peso della pagina, complessità e numero di query, poi assegna un punteggio su 100 e un voto da A a G.

GTmetrix

GTmetrix è uno strumento di analisi delle prestazioni web. Valuta la velocità di caricamento e l’ottimizzazione del sito fornendo metriche dettagliate e raccomandazioni per il miglioramento.

GTmetrix utilizza varie metriche come il tempo di caricamento, la dimensione totale della pagina e il numero di richieste. Genera report completi con punteggi di performance e offre suggerimenti specifici per ottimizzare il sito. Sebbene il suo focus principale siano le prestazioni, GTmetrix contribuisce indirettamente all’eco-design incoraggiando siti più leggeri ed efficienti.

Lo standard “115 buone pratiche nel web eco-design” sviluppato dal Green IT Collective.

Questa guida completa offre un approccio strutturato alla progettazione e al mantenimento di siti web ambientalmente responsabili. Copre l’intero ciclo di vita di un progetto web, dalla specifica alla fine della vita, inclusi progettazione, implementazione, produzione e utilizzo.

Le 115 best practice sono organizzate in sei sezioni principali : Specifica, Progettazione, Implementazione, Produzione, Utilizzo, Supporto / Manutenzione / Fine Vita. Ogni pratica è presentata in modo conciso, offrendo consigli pratici per ridurre l’impatto ambientale dei siti web. Queste raccomandazioni mirano a ottimizzare le prestazioni, ridurre il consumo energetico e minimizzare l’uso delle risorse, migliorando al contempo l’esperienza utente.

Il nostro sito in alcuni punti chiave

Livello di eco-design del sito moustiers.fr

• Peso della pagina: Significativamente ridotto
• Tempo di caricamento: ottimizzato
• Indicateurs GTmetrix :
  • Homepage: C (75%)
  • Avviso legale: B (76%)
  • Profilo turistico: B (76%)

Scelte rigorosamente selezionate

• Ridurre il peso delle pagine web: caricamento asincrono delle immagini, pochi font, pre-caricamento dei font…
• Limita il numero di richieste al server il più possibile, senza sacrificare tutte le funzionalità
• Ottimizzare ulteriormente i percorsi utente
• Rivedi il modo in cui progettiamo i nostri contenuti
• Ottimizzazione delle nostre pratiche tecniche (aggregazione, minificazione, immagini responsive, …)

Fin dall’inizio del progetto, un metodo di design adattato per affrontare le nostre sfide!

Sviluppo

Cache ottimizzata

Per ridurre i tempi di caricamento e il consumo di risorse, abbiamo implementato una cache efficiente. I file statici (CSS, JS, immagini) vengono memorizzati lato utente per evitare di ricaricarli ad ogni visita.

Struttura HTML leggera

Il codice HTML è stato ripulito per evitare elementi superflui. Una struttura semplificata riduce la dimensione della pagina e accelera l’interpretazione dei browser.

Caricamento asincrono delle risorse

Gli asset non critici, come immagini, video e widget, vengono caricati con caricamento pigro utilizzando tecniche di caricamento lento. Questo migliora le prestazioni e riduce il tempo di caricamento iniziale.

Richieste server ottimizzate

Gli scambi con il server sono stati ridotti limitando le richieste non necessarie e raggruppando i dati quando possibile. L’uso di query ottimizzate, combinato con la cache delle risposte, riduce i tempi di risposta e migliora la visualizzazione delle pagine.

Integrazione

Ottimizzazione degli asset

Per alleggerire il sito, sono stati integrati solo i font necessari, con formati ottimizzati come WOFF2. Le risorse critiche utilizzano il precaricamento e le icone sono state raggruppate in un unico sprite per limitare le richieste. Le immagini, compresse e convertite, combinano leggerezza e qualità visiva.

Meno dipendenze esterne

Abbiamo ridotto l’uso di librerie di terze parti come jQuery, preferendo soluzioni native e CSS personalizzati. Questo riduce il peso del sito offrendo al contempo il pieno controllo sul codice.

Codice standard ad alte prestazioni

Il codice segue gli standard attuali e le regole CSS Lint. Questo semplifica la riproduzione, migliora le prestazioni lato browser e garantisce una maggiore durata.

Riduzione dell’impatto ambientale

Abbiamo limitato la potenza delle animazioni, ottimizzato il DOM e abilitato un cache efficiente. Queste scelte riducono il consumo energetico migliorando al contempo l’esperienza utente.

Essere partner in un approccio eco-responsabile è essenziale. L’esperienza di WebSenso , unita alla nostra visione, ha reso possibile creare un sito ad alte prestazioni e sostenibile, allineato ai nostri valori.