Oltre al web design, quando si sceglie un tema per il CMS (vediamo in particolare WordPress, abbondantemente il più diffuso), sono importantissimi anche altri parametri, spesso sottovalutati dai web designer: ovvero tutto ciò che ha a che fare con le prestazioni, sempre più importanti anche in ambito SEO, essendo molto legate all'esperienza utente (di recente Google ha introdotto nuove metriche su Page Speed Insights, che hanno a che fare con la velocità di caricamento, rendering ecc, quindi sempre legate alle prestazioni).

Come scegliere il tema migliore per WordPress?

Qui è importante specificare una cosa: i web designer forse mi odiano, guardando 100% l'aspetto grafico, slide e animazioni di ogni genere e pagina che impiega ore a caricarsi, ma la cosa fondamentale è quella di cercare una lista di temi con buone prestazioni, scegliere fra questi quello che piace di più esteticamente per quel tipo di progetto (oppure, per usi specifici, valutare anche altre caratteristiche) e poi da ricordare, ogni piccolo adattamento o miglioramento si può comunque fare, personalizzando le opzioni di configurazione del tema (tramite dashboard oppure eventualmente anche mettendo mano a file CSS, JavaScript, PHP)!

Lista temi WordPress più veloci (2023), secondo kinsta.com

  • Astra: tema veloce e leggero, popolarità in crescita
  • Blank Canvas: minimalista, ideale per sito web a pagina singola (personalmente se si tratta di single-page, scriverei il codice a mano, qui invito anche a leggere Sito web statico vs dinamico)
  • Customify: veloce e ottimizzato, integrazioni con Page Builder
  • GeneratePress: veloce, elegante, supporto e integrazioni anche con vari plugin e Page Builder
  • Go: proprietà di GoDaddy, lo slogan è "Gutenberg-first WordPress theme", quindi tramite editor a blocchi Gutenberg (analogamente ai Page Builder, personalmente sono molto contrario a questo approccio)
  • Hello Elementor: semplice soprattutto grazie all'Elementor Page Builder (sonsiglio l'uso di Page Builders che purtroppo rimangono sempre molto diffusi seppur inefficienti, in quanto semplici e comodi)
  • Hestia: design moderno, principalmente pensato per essere mono pagina
  • Neve: stessi sviluppatori di Hestia, Neve presenta layout semplice e pulito, allo stesso tempo personalizzabile, nel complesso veloce e flessibile
  • OceanWP: non proprio ottimale in termini di performance, ma apparenza professionale, adatto a PMI
  • PopularFX: semplice ma funzionale e versatile, con Page Builder
  • Responsive: fra i migliori in termini di performance; ideale per blogging, vetrine, portfolio
  • Sydney: ideale per PMI, freelance, design veloce e minimalista, compatibilità con Elementor
  • Twenty Twenty, Twenty Twenty-One, Twenty Twenty-Two, Twenty Twenty-Three: il tema di default rilasciato ogni anno (con il rispettivo nome) è sempre fra le scelte più ottimizzate e veloci come tema WordPress
  • Zakra: veloce e sicura, con alta personalizzazione

Tutti ottengono ottimi punteggi di velocità, fino a 99-100 con GTmetrix e anche con Page Speed Insights sia mobile che desktop.

Fra questi, comunque ottimi, la scelta poi deve ricadere sul gusto estetico, quale template si adatta meglio al proprio progetto; poi eventuali personalizzazioni aggiuntive si possono sempre fare. Da ricordare ovviamente che altri aspetti come l'ottimizzazione delle immagini e anche la gestione delle revisioni di WordPress, possono incidere molto di più nelle prestazioni rispetto alla scelta del tema stesso. E ovviamente tutti quei cavolo di plugin, importante mantenere solo l'essenziale! Certo sembra una cosa ovvia, ma a quanto pare non lo è 😀

L'importante è avere la consapevolezza che la SEO, quindi il posizionamento nei motori di ricerca, tiene sempre più in considerazione queste metriche di performance e stabilità visiva durante il caricamento (CLS, Cumulative Layout Shift), dato che sono strettamente legate all'esperienza utente. Vale a dire che a parità di condizioni, un sito web che offre prestazioni migliori (Core Web Vitals). Avere un design semplice e pulito, eleganza ma senza perdere efficienza, è l'ideale!

Nel caso di un progetto già in corso, dove si trova un tema "poco ottimizzato" dal punto di vista prestazionale, ad esempio BeTheme, se non si vuole stravolgere tutto il design e impostazione del sito web, si può comunque mantenere, con alcune accortezze: disablitare TUTTO ciò che non serve, per davvero (facendo prove, anteprima, ecc), evitare poi le combo critiche (per le performance) come ad esempio BeTheme+Slider Revolution ecc, magari anche un Page Builder... e caricamento di una serie di Google Fonts solo per un sottotitolo magari. Anche no! Ricordiamo i concetti di ottimizzazione. Se proprio non possiamo fare a meno di alcune scelte già intraprese (magari da altri) e funzionanti, mettiamo mano per ottimizare al meglio quello che abbiamo, disattivando ciò che non serve. L'esperienza utente e il posizionamento nei motori di ricerca sono sempre più influenzati da questi aspetti, quindi è molto importante.

Vediamo infine un'immagine che rappresenta tutti i temi elencati, nel rispettivo ordine.

temi leggeri WordPress-1parte
temi leggeri WordPress-2parte

un anno dopo

Vediamo un approfondimento, tratto da html.it:

Creare un proprio tema WordPress personalizzato

Nella cartella di default, "themes", via FPT dobbiamo creare una nuova cartella con il nome desiderato. Abbiamo bisogno di creare i seguenti file (requisiti minimi):

  • style.css: un file CSS in cui inseriamo un'intestazione di commento e poi eventualmente possiamo suddividere tutto il codice CSS anche in altri file
  • functions.php: molto importante, gestisce l'aggiunta di script e stile all'interno del nostro sito, è quindi l'elemento chiave nella gestione
  • index.php: contiene la maggior parte degli elementi front-end (ad esempio: <?php get_header(); ?> <?php the_title(); ?>, <?php the_content(); ?> <?php get_footer(); ?>)
  • header.php: ovviamente trattandosi di un sito complesso, la logica è questa: NON ha senso copiare l'header e il footer a sé in ogni pagina, mentre viene scritto una volta e richiamato (vedi infatti index.php); visti a sé, si tratta quindi di due file incompleti, ovvero questo è un esempio di header.php: <!DOCTYPE html> <html <?php language_attributes(); ?>> <head><title><?php wp_title(); ?></title> <?php wp_head(); ?></head><body>... non viene chiusa la pagina HTML (né il <body>) come si può vedere!
  • footer.php: analogamente a prima, non viene aperta la pagina HTML (semplicemente index.php carica l'header che contiene fra le varie cose l'apertura della pagina, poi carica il footer che contiene fra le varie cose la chiusura della pagina, è importante capire questa logica); quindi footer.php appare ad esempio come: <footer> <p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p></footer> </body></html>, vediamo che compare quindi la chiusura della pagina HTML
  • page.php: per la visualizzazione delle pagine statiche in WordPress; un esempio di page.php: <?php get_header(); ?><article><h2><?php the_title(); ?></h2><?php the_content(); ?></article><?php get_footer(); ?>

Se tutto va bene, dalla bacheca di amministrazione, Aspetto->Temi dovremmo trovare il nostro tema personalizzato e quindi poterlo attivare. Quella descritta è la base, poi si possono sempre fare altre aggiunte personalizzate, come la scelta della copertina da visualizzare.

Powered by: FreeFlarum.
(remove this footer)