Quando si utilizzano temi WordPress professionali o gratuiti, molto spesso ci si imbatte in template con un alto livello di design ma con una bassa ottimizzazione del codice.
Non prestare attenzione a questo aspetto significa ottenere un sito con pagine lente e tempi di caricamento lunghi.
Per rendere un tema WordPress più veloce è necessario concentrarsi prima di tutto su alcuni aspetti tecnici legati principalmente alla manipolazione delle risorse statiche.
Principi fondamentali
L’ottimizzazione tecnica di un sito di basa su tre criteri: compressione, riduzione e separazione.
Compressione delle risorse statiche
La compressione o minificazione è un tecnica di manipolazione delle risorse basata sulla rimozione di caratteri non necessari dal codice per ridurne le dimensioni e migliorando di conseguenza i tempi di caricamento.
Quando il codice viene minificato tutti i commenti, gli spazi e gli “a capo” vengono rimossi. Nel caso di JavaScript e CSS, questo può migliorare di molto le prestazioni poiché la dimensione dei file scaricati saranno ridotte.
Un esempio di codice non compresso è il seguente:
p {
text-align: center;
color: red;
}che una volta minificato diventerà:
p{text-align:center;color:red}Non è certo la riduzione di file di micro dimensioni, come nell’esempio, che può portare reali benefici ma normalmente in una pagina vengono richiamate centinaia o migliaia di righe di codice che se compresse possono contribuire ad un caricamento più rapido.
Ad esempio la libreria jQuery viene distribuita in più versioni, tra cui quella compressa che ha un peso del 68% inferiore a quella standard.
Riduzione delle richieste HTTP
La maggior parte del tempo di caricamento di una pagina è condizionata dal download delle risorse statiche quali immagini, fogli stile, script e font.
Spesso l’unica ragione per cui i template richiamano più file CSS o JavaScript è perché chi ha progettato il sito (o in questo caso il tema WordPress) ha preferito lavorare con file separati che possono raggiungere un numero consistente.
Aggregando le risorse statiche è possibile ottenere un solo ed unico file per ogni tipo di risorsa (CSS, JavaScript e con l’utilizzo di tecniche più avanzate come il CSS Image Sprites anche immagini).
Ridurre le risorse limita il numero di richieste HTTP necessarie per il rendering riducendo i tempi di scambio di informazioni tra client e server.
Utilizzo di risorse CSS e JavaScript esterne
Spesso all’interno del codice HTML sono presenti porzioni di CSS e JavaScript che bloccano il rendering contribuendo ad un aumento del ritardo sulla prima visualizzazione della pagina.
L’utilizzo di file esterni genera pagine più veloci perché essi vengono memorizzati nella cache dal browser: JavaScript e CSS che sono inline (all’interno del documento HTML) vengono scaricati ogni volta che viene richiesta la pagina rendendo la richiesta più pesante.
Il metodo migliore per ottimizzare temi WordPress
Esistono svariate tecniche e strumenti per ottimizzare un sito ma quando si parla di temi WordPress quello che ritengo più semplice, intuitivo e versatile è il plugin Autoptimize.
Tra le sue caratteristiche principali Autoptimize, anche attraverso le impostazioni avanzate, consente di:
- comprimere il codice HTML
- comprimere e aggregare in file unici le risorse CSS e JavaScript (è possibile selezionare eventuali esclusioni)
- estrapolare in modo automatico CSS e JavaScript in linea
- escludere il caricamento dei Google Font (utile se il tema carica font che non sono utilizzati o vengono impiegati font personalizzati
- sfruttare un sistema avanzato di Lazy Load sulle immagini per ritardare il loro download riducendo i tempi di caricamento
- utilizzare una CDN per abilitarne l’uso al fine di velocizzare lo scaricamento dei file ottimizzati
Ottimizzazione avanzata CSS
Nella gestione avanzata di Autoptimize è possibile controllare il caricamento dei fogli stile in due modalità differenti che possono contribuire a prevenire problemi legati al Critical Rendering Path.
Incorporare il CSS
Il primo metodo, più semplice, consiste nell’incorporare tutti gli stili della pagina direttamente nell’head: questo approccio è opposto all’utilizzo di risorse CSS e JavaScript esterne sopra descritto ed è consigliabile solo se il foglio stile è molto piccolo.
Sostanzialmente si va ad eliminare la chiamata ad una risorsa esterna (il CSS principale) privilegiando il caricamento degli stili direttamente in pagina: incorporare l’intero CSS su una pagina di Login o una Landing Page molto semplice può essere una buona idea.
Rimandare il caricamento dei fogli stile
Simile all’incorporazione ma prevede la suddivisione del foglio stile in due porzioni: la prima, molto più piccola e leggera viene integrata nell’head e destinata alla corretta visualizzazione della prima porzione della pagina.
Attraverso una selezione manuale o con l’aiuto di strumenti online specifici vengono estrapolati solo gli stili base necessari a fornire una corretta visualizzazione dei primi elementi (testata, menu e tutto quello che comprende la safe area) per generare un CSS molto leggero che viene direttamente inserito nelle impostazioni del plugin.
Tutta la restante parte del CSS verrà richiamata dopo il caricamento della pagina velocizzando sensibilmente la visualizzazione iniziale.
Migliorare le prestazioni e la velocità
Oltre all’ottimizzazione del codice e del Front-end è importante anche assicurarsi che le impostazioni del server, i contenuti media e i tempi di risposta siano correttamente gestiti e ottimali.
Per fare questo si può intervenire su vari aspetti fondamentali che concorrono a migliorare ulteriormente i risultati:
- abilitare la compressione Gzip per consentire al server di comprimere le pagine web, i fogli stile e i JavaScript
- sfruttare la memorizzazione delle risorse statiche nella cache del browser per di ridurre il tempo di caricamento delle pagine
- ottimizzare le immagini con ShortPixel che grazie ad un potente algoritmo di compressione è in grado di restituire immagini di alta qualità con una sensibile riduzione di peso
- scegliere un Hosting WordPress professionale che rappresenta una delle componenti più importanti nella realizzazione di un sito web
Conclusioni
L’ottimizzazione di un sito è un’attività complessa che prevedere la cura di diversi aspetti come una corretta gestione della cache e una efficiente ottimizzazione delle immagini.
Autoptimize è un’ottima soluzione per ottenere in poco tempo eccellenti risultati senza modificare il codice o il tema.
