Etiena passa alla versione 3.0! Quali novità?
Diamo un caloroso benvenuto alla nuova versione 3.0 di Etiena.com. Un’idea nata dal frutto di un percorso formativo individuale che mi ha permesso di imparare tantissime nuove cose e di ottenere un sito molto performante. Scritto interamente “from scratch”, senza l’utilizzo di CMS e relativi plugin né template preesistenti e nemmeno riuso di codice scritto da altri.
Cosa è cambiato?
La versione precedente 2.0 era basata su una struttura CMS di Wordpress, mentre l’attuale versione 3.0 è stata scritta minuziosamente con codice HTML, CSS, JAVASCRIPT e PHP; tutto ciò fa si che il sito sia più leggero, veloce, funzionale e performante. Ecco alcune novità:
- Tecnologia WAI-ARIA per una interazione degli utenti con disabilità
- Etiena.com è anche una Progressive Web App
- Service worker per un caricamento super veloce
- Configurazione del contrasto chiaro & scuro
La chiave del successo
Il codice di ogni pagina in questa versione 3.0 è stata ottimizzato e curato nei minimi dettagli, di seguito alcuni dei punti più importanti:
- Immagini e foto formato WEBP
- Video in formato WEBM
- Tag picture con attributo media per caricare l’immagine adatta al tipo di dispositivo
- Utilizzo della metodologia BEM per la scrittura delle classi nel markup HTML evitando così l'abuso di molteplici classi, tag ridondanti ed inutili
- Tecnologia Service Worker per un utilizzo ottimale della cache
- Icone SVG locali preferite a CDN di icone esterne
La sfida 100% di Google Lighthouse
Dopo la riprogettazione e ridisegno delle pagine di questa applicazione web, ho deciso di utilizzare Google Lighthouse come esame finale. Google Lighthouse è uno strumento del "dev tool" di Google Chrome in grado di verificare la qualità delle pagine web sotto diversi aspetti.
Con duro lavoro e perseveranza, sono orgoglioso di aver ottenuto il massimo dei punteggi disponibili da parte di Google Lighthouse: prestazioni 100%, accessibilità 100%, best practice 100% e SEO 100%.