Goodbye Wordpress, Welcome Hugo
KISS - Keep IT simple, stupid
Dopo quasi 10 anni di WordPress self-hosted ho deciso di tornare all’approccio KISS - Keep IT Simple, Stupid con Hugo.
Passare da un sito dinamico con tutti i plugin da tenere aggiornati ogni versione, per evitare innumerevoli buchi di sicurezza, a un sito statico fatto con HTML, CSS e immagini locali è stato un salto indietro nel tempo ma un balzo in avanti come flessibilità e velocità di scrittura dei post, dei workflow e della gestione del sistema.
| Pro | Contro |
|---|---|
| Sicurezza intrinseca | Curva iniziale di apprendimento |
| Assenza DB | Mancanza della funzione di ricerca nativa |
| Scrittura offline | Mancanza dell’ecosistema di plugin Wordpress |
| Possibilità di hosting ovunque | Mancanza di tool specifici per SEO |
| Versioning con GIT | Mancanza commenti agli articoli |
| Markdown per scrivere gli articoli | |
| Velocità di generazione contenuti | |
| Anteprima e hosting locale | |
| Nessuna necessità di aggiornamenti al backend | |
| Performance |
Questa breve lista evidenza i motivi della scelta, i vantaggi sono molto superiori agli svantaggi.
Vediamo quali sono stati gli step per la migrazione :
- Installazione locale Hugo
- Export da Wordpress
- Import in Hugo
- Editing e fixup contenuti
- Testing locale
- Testing online
- Gestione Workflow
- Performance
Installazione locale Hugo
Export da Wordpress
Import in Hugo
Editing e fixup contenuti
Testing locale
Testing online
Gestione Workflow
Primi risultati
perteghella.org git:(main) ✗ hugo serve
Start building sites …
| IT
-------------------+------
Pages | 666
Paginator pages | 66
Non-page files | 0
Static files | 80
Processed images | 0
Aliases | 253
Sitemaps | 1
Cleaned | 0
Built in 566 ms
Performance
Per verificare le performance del nuovo sito con Hugo rispetto al precedente in WordPress ho usato i seguenti test online per fare una comparazione diretta:
- https://web.dev/measure/
- https://gtmetrix.com/
- https://developers.google.com/speed/pagespeed/insights/
Vediamo subito se un sito statico contro uno dinamico ottiene risultato migliori con gli stessi contenuti su una infrastruttura simile.
Lo strumento utilizzato è Lighthouse.
Lighthouse è uno strumento open source di Google che fornisce una valutazione delle pagine web in vari modi.
È considerato lo standard moderno nelle metriche delle prestazioni web.
web.dev 
web.dev usa Lighthouse per fornire metriche su :
- Performance
- Progressive Web App status
- Accessibility
- Use of best practices
- Search engine optimization
I numeri sono decisamente migliorativi, le performance passate da 63/100 a 94/100 e accessibilità, best practice e SEE 100/100.
GTmetrix 
GTmetrix è passato da PageSpeed/YSlow a Lighthouse, ha un algoritmo proprietario per il punteggio GTmetrix e punteggi per prestazioni e struttura.
Qui si riescono ad analizzare meglio i parametri tecnici di caricamento dei contenuti.
Il punteggio passa da E a A e il tempo di caricamento scende di un ordine di grandezza da 8.6 secondi a 0.8 secondi.
PageSpeed Insight 
PageSpeed Insight è il tool nativo di Google per misurare le prestazioni di una pagina su dispositivi mobili e desktop e fornisce suggerimenti su come migliorare quella pagina.
PSI fornisce dati di laboratorio e sul campo su una pagina. I dati di laboratorio sono utili per il debug dei problemi di prestazioni, poiché vengono raccolti in un ambiente controllato. Tuttavia, potrebbe non catturare i colli di bottiglia del mondo reale. I dati sul campo sono utili per acquisire un’esperienza utente reale e reale, ma hanno un set di metriche più limitato.
I dati per dispositivi mobili e desktop sono leggermente differenti ma vengono spostati in zona verde usando Hugo.
Il fine-tuning lo farò sul tema col tempo, sono molto soddisfatto del risultato.
Come ultima step lo swap dei domini e Goodbye Wordpress, Welcome Hugo