Ente accreditato Regione Veneto n.4271

Come velocizzare WordPress

Diamo uno sprint ai nostri siti in WordPress

Pubblicato da Gianni // 11 luglio 2017 // 67 visualizzazioni

Immaginiamo di aver concluso la progettazione, lo sviluppo del sito in WordPress e di averlo pubblicato on-line. In questo caso molti potrebbero pensare che il lavoro sia concluso, e invece vi sbagliate! Eh sì, perché possiamo migliorare il sito, rendendolo molto più veloce. Il tutto attraverso qualche semplice espediente.

In questo articolo infatti vi mostrerò delle semplici operazioni che tutti possono compiere, dopo la pubblicazione del sito. Ma basta con le parole e passiamo ai fatti.

1 – Ottimizzazione tramite .htaccess

Prima di tutto, un sito Web (indipendentemente dal fatto che sia in WordPress o meno) può essere ottimizzato agendo direttamente sul file .htaccess che trovate nella cartella principale del vostro sito. Se non è presente (in WordPress c’è sempre), potete crearlo con un normalissimo blocco note/textedit.

Ma a cosa serve questo file? Semplicemente si occupa di “istruire” il Server in cui è salvato il sito su come comportarsi nel distribuire le pagine web. Potete ad esempio impostare la pagina di errore (404), re-indirizzare le richieste ad altre pagine, o per l’appunto migliorare le prestazioni del vostro sito.

Compressione GZIP

Per prima cosa, dobbiamo attivare la compressione GZIP. Questa permette al Server di fornire all’utente i contenuti compressi, come per i file .zip, così da ridurre il peso degli elementi inviati tramite internet. Sarà poi compito del nostro browser decomprimere i file per visualizzarli. Questa pratica è fortemente consigliata da Google stessa e vi permette di guadagnare fino al 50% del peso di ogni singolo file da inviare.

Per abilitare questa funzionalità, non dovete far altro che copiare il codice qui sotto in qualsiasi punto del file .htaccess ed il gioco è fatto.

# START GZIP Compression
<IfModule mod_deflate.c>
  # Comprime HTML, CSS, JS, Testo, SML e Webfont
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Rimuove eventuali bus sui vecchi browser
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>
# END GZIP Compression

N.B.: Se volete controllare che la compressione GZIP sul vostro sito sia attiva, andate su questo sito e inserite l’indirizzo web.

Attivare la Cache del browser

Altro espediente tramite .htaccess è quello di abilitare la cache del browser per l’utente che visita il nostro sito. In pratica ogni volta che qualcuno visita una pagina web, il suo browser controlla se nella cronologia del computer sono già presenti elementi che la compongono (immagini, fogli di stile, Javascript, ecc.) e che non siano troppo “vecchi”. In tal caso non li richiede al Server ma usa quelli presenti nella Cache.

Anche in questo caso, attivare questa funzionalità è relativamente semplice: vi basta incollare il pezzo di codice qui sotto, sempre sul file .htaccess, dove preferite.

# START Expires browser caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
# END Expires browser caching

2 – Ottimizzazione tramite plugin

Per velocizzare il nostro sito possiamo anche far affidamento ai plugin disponibili in WordPress. Il mercato in questo settore è molto vario, e comprende strumenti più o meno performanti. La scelta fatta qui sotto ricade su due plugin potenti, conosciuti, ma soprattutto semplicissimi da configurare.

Autoptimize

Fig. 1 – Plugin Autoptimize

 

Autoptimize, permette di concatenare in un unico documento, rispettivamente, i file CSS e Javascript, facendo così una sola richiesta al Server. Oltre a questo, per ottimizzare ancora di più il codice, minifica i file (anche il codice HTML in questo caso) togliendo tutti i commenti, spazi, tab e ritorni a capo che nel loro piccolo occupano spazio inutilmente ai fini dell’esecuzione del codice.

Fig. 2 – Configurare Autoptimize

 

Una volta attivato, andando su “Impostazioni –> Autoptimize” potete gestire il plugin. Qui, spuntando le caselle relative all’HTML, Javascript e CSS, attivate la concatenazione/minificazione dei rispettivi file (vedi figura qui sopra).

Verificate poi che il sito sia del tutto funzionante. Se ci sono problemi di visualizzazione vi consiglio di provare a disabilitare una delle voci (partendo dal Javascript che è quello che può portare maggiori incompatibilità).

N.B.: Se decidete di modificare a posteriori qualcuno di questi file, ricordatevi che dovete svuotare la cache, per permettere al plugin di rigenerare la nuova versione di questi file ottimizzata. Per farlo vi basta cliccare sulla voce “Svuota Cache” che trovate nel menu a tendina di “Autoptimize” sull’admin-bar in alto (vedi foto qui sotto).

Fig. 3 – Svuotare cache

WP Super Cache

Fig. 4 – Plugin WP Super Cache

 

Questo plugin (Sviluppato dagli stessi autori di WordPress) permette di abilitare la Cache del Server, una soluzione complementare alla cache del browser vista precedentemente.

Per ogni richiesta di pagina, normalmente il Server deve leggere ed eseguire il codice PHP al suo interno e poi consegnare il risultato all’utente. Abilitando questa cache invece, il risultato dell’esecuzione sarà messo da parte per poterlo distribuire ai futuri utenti che richiederanno quella stessa pagina. Questa soluzione permette quindi di velocizzare di molto il caricamento delle pagine che non devono più essere analizzate ed eseguite.

Fig. 5 – Configurare WP Super Cache

 

Per abilitare la cache, dovete andare su “Impostazioni –> WP Super Cache”, spuntare la voce “Cache attiva (Raccomandato)” e cliccare sul pulsante “Aggiorna stato” (figura qui sopra). Tutto qua. Immediatamente il plugin si occuperà di generare pian pianino la cache delle pagine.

Ovviamente ad ogni modifica del contenuto in area amministrativa, il plugin stesso provvederà a svuotare la cache.

N.B.: Se, come per Autoptimize, dovete svuotare manualmente la cache, per visualizzare ad esempio modifiche fatte al codice, potete utilizzare lo stesso pulsante visto precedentemente (figura 3). Infatti I due plugin si integrano perfettamente tra loro.

3 – Ottimizzazione tramite Hosting

Ovviamente anche l’hosting  gioca la sua parte. Come avviene per i computer di casa, più un server è veloce e più questo si rispecchia nel caricamento delle pagine web.

Diventa quindi importantissimo fare la scelta giusta nell’hosting per il nostro sito, a seconda della “complessità” del progetto. Se ad esempio avete progettato un e-commerce, non potete pensare di usare un hosting “low-cost”.

Ad oggi esistono diversi hosting condivisi con prestazioni valide anche per e-commerce semplici e con costi alla portata di tutti. Se invece il progetto è ancora più complesso, la scelta di un hosting VPS, Cloud o persino Dedicato dovrà essere messo in conto. E qui ovviamente i costi aumentano, e non di poco.

N.B.: Alcuni di questi servizi integrano sistemi di Caching del Server. In questo caso l’uso di Plugin come WP Super Cache, diventa inutile e quasi deleterio.

 

Con questo è tutto. Fateci sapere se trovate utile questa guida e anche se avete ulteriori consigli d’aggiungere.

Buon “tuning” del sito 😉

Topic: , , , , ,

Send this to a friend