UX & Coding

Aumentare la velocità di un sito WordPress

"Attraverso la compressione delle risorse statiche è possibile ridurre le richieste HTTP ed il peso delle pagine per ottenere un sito più veloce"

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 concentrassi prima di tutto su alcuni aspetti tecnici legati principalmente all’integrazione 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 compressione 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.

Riduzione richieste HTTP
Ridurre il numero di risorse significa aumentare la velocità di caricamento

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.

Autoptimize impostazioni base
Con le impostazioni base di Autoptimize si possono raggiungere ottimi risultati

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
  • 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

Critical Rendering Path
Ottimizzare il percorso di rendering critico significa ridurre il tempo necessario per visualizzare la prima parte della pagina

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.

Autoptimize incorpora CSS

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.

Autoptimize differisci CSS

Tutta la restante parte del CSS verrà richiamata dopo il caricamento della pagina velocizzando sensibilmente la visualizzazione iniziale.

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.

Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.