Mi sono rifatta il sito personale. Un po’ per noia, un po’ per shock.
[Il sito è in fase di debug per cui se vuoi segnalarmi qualcosa ben venga!]
Il vecchio tema Kerge su WordPress aveva come <h1> fisso il mio nome e utilizzava il sistema delle VCards per gestire la transizione da una pagina all’altra: di fatto si generava una url con un’àncora #. Poi c’erano infinite scroll ovunque nella sezione del blog, quindi alla fine non ho retto e appena ho trovato un po’ di tempo ho cercato delle soluzioni migliori online.
La GT community consigliava di provare Generate Press per i core web vitals. In soldoni si tratta di un tema base gratuito che consente di crearsi da soli il proprio sito o di utilizzare un template predefinito della library, personalizzandolo con il solito approccio a blocchi. Il tema può essere arricchito con un plugin premium (a pagamento) che aggiunge delle funzionalità. Nel mio caso ho una versione premium.
Personalizzazione del sito
La personalizzazione parte dal layout e arriva fino ad ogni singolo componente delle pagine: questo sito è stato creato a mia fantasia. Per la scelta dei colori ho usato dei tool in cui si generano delle palette a contrasto oppure a supporto di un colore di base, che nel mio caso era un fucsia. Chi non ha voglia, tempo o competenza tech può appoggiarsi alla libreria di riferimento e scegliersi qualcosa di già pronto, ma comunque sempre personalizzabile.
Il builder
Per creare le pagine si lavora a blocchi: ogni blocco può essere gestito e modificato per i vari device, cosa utilissima. Però, occhio! Perché non tutti i blocchi sono responsive e ogni tanto vanno sistemati a mano.
Alcune caratteristiche, tipo le mie breadcrumbs, sono uno shortcode di Yoast SEO perché di default non erano presenti nel tema di base: non mi piace la resa grafica ma nella documentazione di Generate Press ho trovato solo questo metodo. Il mega menu sotto la voce “progetti” è un CSS aggiuntivo inserito con un plugin e fornito sempre dalla documentazione di Generate press per avere a disposizione una classe “mega-menu” da inserire nel menu stesso una volta create le sottocategorie.
Se non conosci i Core Web Vitals
Un sito veloce rende l’esperienza utente più felice e questo piace anche a Google, che è il mezzo tra noi e le nostre risposte. Quindi dal 2021 non è più un mistero che per far felice pure Google il sito debba rispondere a determinati criteri di velocità di caricamento, di interattività e di stabilità visiva, altrimenti non verrà considerato “prestante”.
I tool per misurare l’esperienza
Il tool più comune per visionare lo stato del proprio sito è Page Speed Insight di Google, che di recente ha assunto le vesti di Lighthouse, altro tool utile per monitorare. I report sono disponibili anche sulle proprietà Google Search Console e attraverso il Google Chrome User Experience Report.
La gestione delle immagini
Le immagini, il loro formato e il loro caricamento in pagina, sono uno dei più grossi problemi di un sito. Solitamente gli editor che caricano le immagini non rispettano “le regole del web”, ovvero pesi e formati corretti. Lato sviluppo, d’altro canto, Andrea Pernici ci ha detto in tutte le lingue (incluso il marchigiano!) come precaricare le immagini: ultimo esempio l’edizione 2022 del Search Marketing Connect in cui ha condiviso i requisiti tecnici da inserire nel codice.
Test dei Core web vitals con Generate Press
Per fare un esempio, il blocco di wordpress immagine + testo ha l’immagine con il Lazy Loading invece che con l’Eager. Io ho usato questo blocco come primario nelle mie pagine statiche, quindi mi ritrovo con la prima immagine in lazy. Facendo un test, il mio nuovo sito fatto a manella con Generate press ha come prestazioni 93/100 da Mobile e 100/100 da Desktop per la homepage, mentre le foglie articolo si aggirano tra i 92 da mobile e i 98 da desktop con un’immagine in jpg da 297 KB quindi leggermente oltre la soglia dei 200.
A chi lo consiglio
Se ho suggerito Substack per i giornalisti, quindi per chi in media non ha esperienza di CMS, a primo impatto consiglio Generate Press sia alle Piccole e Medie Imprese che hanno poco budget ma vogliono un sito efficiente, sia ai professionisti che vogliono un sito di contenuti leggero. Un esempio è il sito di Jane Friedman. Se non si hanno esperienze di CMS, html e css naturalmente serve il supporto di uno sviluppatore.
Nota bene: vediamo nel futuro prossimo se il tema resta sostenibile, visto che lo sto osservando solo da un mesetto. Se lo hai provato o hai qualche osservazione aggiuntiva, scrivimi nei commenti. Grazie!