Come Velocizzare WordPress

come-velocizzare-sito-wordpresS

Come velocizzare WordPress? Basta installare 3 plugin: W3 Total Cache per gestire la cache e la compressione del codice, WP Smush per ottimizzare le immagini e Async JS and CSS per far caricare i file JavaScript e CSS in maniera asincrona ed evitare che vi siano contenuti caricati “above the fold”. Ecco una guida completa step by step.


Sapere come velocizzare un sito web è diventata una priorità per vari motivi ed ora non è più tempo di rimandare la questione. Ci sono almeno 2 ottimi motivi per farlo subito e oggi andremo a descrivere come velocizzare un sito WordPress. Lo faremo come al solito illustrando tutta la procedura passo passo, servendoci di immagini esplicative, affinché alla fine dell’articolo possiate avere a disposizione una valida guida per aumentare la velocità di WordPress.

Considerazione personale: Non è necessario inseguire il risultato di 100 su 100 del Google Pagespeed Insight. L’importante è che il sito sia abbastanza veloce nel caricamento delle pagine e soprattutto sia velocemente scansionabile dal bot di Google.

Leggete pure questa guida ma non fissatevi e non credete a chi dice che velocizzare wordpress sia indispensabile per non perdere posizioni su Google.

  • Non credete a chi vi dice che se il sito non raggiunge certi valori di velocità poi Google lo penalizza.
  • Non credete a chi vi dice che la velocità è un fattore SEO così importante da determinare le prime posizioni su Google

La velocità di un sito WordPress è importante e va migliorata, senza se e senza ma. Ma non è solo quella che determina la posizione su Google.

Se oggi siete in decima posizione, non arriverete in prima solo se vi mettete a velocizzare WordPress. Sia chiaro.

Certo è che migliorerete la posizione se il sito lo merita. Se accanto al miglioramento della velocità del sito ci sarà il mantenimento o miglioramento della qualità dei vostri contenuti il sito scalerà posizioni.

PERCHE’ VELOCIZZARE IL CARICAMENTO DELLE PAGINE DI UN SITO?

Come detto nella prefazione, ci sono almeno 2 ottimi motivi:

  • Google premia i siti le cui pagine si caricano più velocemente (posizionamento)
  • Un sito che si carica in più di 3 secondi ha ottime probabilità di essere abbandonato dall’utente prima ancora che sia visualizzata la pagina sullo schermo (perdita potenziale cliente)

COME MISURARE LA VELOCITA’ DI UN SITO

Prima di andare a vedere come velocizzare un sito WordPress, partiamo dal verificare se il sito in questione abbia bisogno di essere velocizzato. Per farlo, portati sulla pagina di Google Page Speed Insight e inserisci nell’apposito campo la url del tuo sito o della pagina che vuoi testare.

Una volta cliccato sul pulsante “analizza”, attendi qualche istante per vedere il risultato del test.

Per scrivere questo articolo mi sono servito di un mio sito che utilizzo per scopi personali (soprattutto esperimenti che spesso me lo devastano…). Non lo curo molto, di conseguenza l’ho ritenuto il candidato ideale per realizzare questa piccola guida su come velocizzare un sito WordPress. Il risultato del test lo potete vedere nelle immagini seguenti.

velocizzare-sito-wordpress

aumentare-velocita-sito-wordpress

 

Come puoi notare, il sito sta messo abbastanza male in termini di ottimizzazione della velocità. Per inciso, le immagini riportano la schermata restituita per i dispositivi mobili. La velocità di un sito visualizzato sullo schermo del classico pc è leggermente diversa (di solito più alta) e la si può vedere andando a cliccare sulla tab “Desktop”.

Insieme al risultato del test, il Google Page Speed Insight, ci da anche dei suggerimenti su quali siano le cose da fare per migliorare la velocità del sito. Basterà cliccare su una delle voci “Mostra come risolvere il problema”.

test-velocita-sito-wordpress

 

Fatti tutti questi doverosi preamboli, adesso passiamo a spiegare come velocizzare un sito WordPress.

PLUGIN WORDPRESS PER VELOCIZZARE SITO

La strada più facile, è utilizzare degli appositi plugin WordPress per velocizzare i siti web. Sappiamo anche però che per molti versi, sono loro stessi, con il loro codice ricco di css e javascript che rallentano i tempi di caricamento delle pagine. Tuttavia in questo caso il gioco vale la candela. Per chi invece vuole divertirsi a smanettare con il file .htaccess, e fare a meno dei plugin può guardare questo mio precedente articolo.

Ecco i plugin di cui ci serviremo:

  • W3 Total Cache
  • WP Smush (o altro plugin per diminuire il peso delle immagini)
  • Async JS and CSS

Ora andremo a configurarli uno per volta e vedremo l’effetto che fa sulla velocità di un sito WordPress.

CONFIGURARE W3 TOTAL CACHE

Immagino che tu sappia già installare un plugin. Quindi scaricalo e installalo. Il plugin puoi trovarlo qui.

Portati sulla prima voce “General Settings” e configura il tutto nel seguente modo:

La voce Toggle all caching types on or off (at once) è semplicemente l’abilitazione della modalità “preview” e serve per testare senza salvare, le configurazioni del plugin.

Page Cache invece va spuntato e, sotto la voce Page Cache Method, va selezionato Disk Enhanced. Come nell’immagine sottostante.


abilita-w3-total-cache

 

Va senz’altro abilitata anche la “minimizzazione” dei codici HTML, CSS e JavaScript. In questa maniera li compattiamo eliminando gli spazi tra un’istruzione e l’altra e favoriamo la velocità di caricamento dei files. Quindi:

  • Minify: Enable
  • Minify Mode: Auto
  • Minify Cache Method: Disk
  • HTML minifier: Minify (dafault)
  • JS minifier: JSMin (default)
  • CSS minifier: Minify (default)

Lasciate in bianco la voce Opcode Cache che se siete su un hosting condiviso, sicuramente non avete installato e abilitate invece la voce Database Cache.

  • Database Cache: Spuntare
  • Database Cache Method: Disk

Di seguito impostate Object Cache nel seguente modo:

  • Object Cache: Enable
  • Object Cache Method: Disk

Object Cache serve a “unire” le chiamate al database per avere una risposta più rapida.

Nella sezione Browser Cache, mettete la spunta su Enable. Questo vi permetterà di abilitare la cache del browser.

Sezione CDN. Il Content Delivery Network, aumenta notevolmente le prestazioni in termini di velocità. Sul plugin è possibile acquistare il servizio MaxCDN ed abilitarlo ma aspettate a farlo: se riuscite a velocizzare il sito con i suggerimenti di questo articolo non sarà necessario.

Nella sezione Reverse Proxy lascia così com’è con spuntata la voce Enable reverse proxy caching via varnish.

Lasciate tutto il resto così com’è e salvate. Basta cliccare su uno dei pulsanti salva presenti nelle varie sezioni per salvare tutta la configurazione.

Adesso cliccate a sinistra nel sottomenu di W3TC e cliccate su Minify. Qui lasciate spuntato Rewrite URL structure e spuntate Enable su HTML minify setting, JS minify setting e CSS minify setting.

In particolare la sezione HTML minify setting deve essere così configurata:

html-minify

 

Cambiamo sezione e portiamoci, sempre nella colonna di sinistra, sulla voce Browser Cache. Questa è una sezione molto importante perché è qui che andiamo ad abilitare la cache del browser e la compresisone gzip per i vari tipi di files presenti nel sito.

Nella prima sezione, General, spunta tutte le voci tranne

  • Rewrite URL structure of object
  • Apply HTTP Strict Transport Security policy

e salvate.

Nella sezione CSS & JS invece abilitate con una spunta tutto, tranne

  • Disable Cookies for static files

Nella sezione HTML & XML spuntate tutto.

Nella sezione Media & Other Files, spuntate tutto tranne

  • Disable Cookies for static files

Direi che tanto basta per configurare il plugin W3 Total Cache per i nostri scopi.

Vediamo se già il solo utilizzo di questo plugin ha apportato miglioramenti alla velocità del sito WordPress in questione.

dopo-w3totalcache

Dopo aver configurato il plugn W3 Total Cache, il risultato del test è passato da 60 a 61. Troppo poco, però le problematiche da risolvere sono passate da 7 a 4.

Andiamo adesso ad installare il secondo plugin: WP Smush.

ALLEGGERIRE IL PESO DELLE IMMAGINI

Una delle segnalazioni che il Google Speed Test Insight ci da è relativa all’ottimizzazione delle immagini. Installando il plugin WP Smush, ridurremo in un solo colpo, il peso di tutte le immagini presenti all’interno del sito e ne dovremmo trarre un giovamento, aumentando la velocità del nostro sito WordPress.

Il plugin non presenta particolari difficoltà nella configurazione. Lasciate tutto com’è preimpostato e cliccate su Update Settings. Le immagini presenti nel vostro sito si ridimensioneranno in maniera ottimale.

wpsmush-immagini

 

Potete utilizzare un qualsiasi plugin per ridimensionare il peso delle immagini. L’importante è che ridimensioni anche le immagini esistenti e già caricate. Alcuni di questi plugin infatti, iniziano a ridimensionare solo le immagini che vengono caricate successivamente alla sua installazione. Fate attenzione a questo particolare.

E adesso andiamo ad installare il plugin Async JS and CSS, quello che ci permetterà di caricare i contenuti css e JS in maniera asincrona per risolvere la segnalazione più grave, quella riguardante i contenuti “above the fold”.

CONFIGURAZIONE PLUGIN ASYNC JS AND CSS

Questo plugin, ha subito l’ultimo aggiornamento circa 3 anni fa. Per questo WordPress, all’atto dell’installazione vi comunica che non è testato per le versioni più recenti. Però funziona benissimo e fa la differenza perchè permette di risolvere il problema di caricamento dei contenuti above the fold che rallentano la velocità del sito (javascript e css che bloccano la visualizzazione nei contenuti above the fold).

Configurarlo è semplicissimo e potete vederne un esempio nell’immagine seguente.

async-js-and-css-plugin-wordpress

 

Come è facile intuire dall’immagine, il plugin permette di caricare in maniera asincrona css e js e quindi ci permette di velocizzare i tempi di caricamento della pagina.

La voce CSS loading method ci fa scegliere dove caricare i css. Potremmo ad esempio rimandare il caricamento dei fogli di stile dopo il caricamento della pagina, con conseguente aumento della velocità di wordpress. Fate delle prove, e scegliete la spunta che vi da i migliori risultati in termini di rapporto tra velocità e UX.

Attenzione: Se inserite i CSS nel footer, le pagine saranno velocissime ma per alcuni istanti, prima di visualizzare la grafica corretta, il browser visualizzerà i contenuti in semplice stile html.

ED ECCO IL RISULTATO FINALE… 100 SU 100!

come-velocizzare-sito-wordpress

 

Hai visto? Con 3 semplici plugin siamo riusciti a velocizzare WordPress, portando i tempi di caricamento delle pagine del sito al massimo del punteggio che il Page Speed Insight può assegnare: 100 su 100!

Attenzione però… raggiungere il massimo punteggio nel Google Page Speed Insight non deve essere una fissazione. Infatti, anche un buon punteggio come 85 o 90 farà si che il vostro sito si visualizzi in un lampo.

A volte ci sono anche dei parametri su cui non si può agire. Ad esempio questo mio blog non raggiunge il massimo della velocità per varie cause.

  • Mi segnala che devo Sfruttare il Caching del Browser per Google Analytics (Ma non posso farlo perché Google Analytics è una risorsa esterna al mio server. Al massimo posso eliminare il codice analytics e rinunciare alle sue preziose statistiche, ma non lo farò mai)
  • Mi segnala che devo ridurre i tempi di risposta del server. Ma anche questo non lo posso/voglio fare perché mi trovo mega-benissimo con il mio fornitore dello spazio web (Ergonet). Su un mio sito hostato su Siteground (Vedi Opinioni su Siteground) però ad esempio, questa segnalazione non viene fatta , ma la cosa può dipendere dal tema diverso utilizzato.
  • Mi segnala che devo ottimizzare un’immagine. Non uso un plugin per l’ottimizzazione perché preferisco prepararle da me e ridurne il peso con photoshop
  • Ho un css che rallenta il caricamento dei contenuti above the fold.

Nonostante questo, Google Page Speed Insight mi assegna un bell’85 per la versione mobile e un 90 per la versione desktop e le mie pagine si caricano con una velocità notevole.

Per dirla tutta, sul mio blog la compressione gzip e la cache sono affidate al file .htaccess, la minimizzazione del codice HTML, CSS e JS è affidata al plugin Autoptimize ed utilizzo Async JS and CSS per il caricare in maniera asincrona JS e CSS.

Adesso che sai come velocizzare WordPress con diversi plugin ed hai capito quale tipo di problemi chiede di risolvere il Google Page Speed Insight nel caso il sito non sia abbastanza veloce, non ti resta che scegliere quelli che ti senti in grado di maneggiare e che ritieni migliori per te.

LEGGI ANCHE UN CASO STUDIO SU COME HO RISOLTO IL MESSAGGIO “ELIMINA I JAVASCRIPT CHE BLOCCANO LA VISUALIZZAZIONE DEI CONTENUTI ABOVE THE FOLD.

LETTURE CONSIGLIATE

[amazon_link asins=’8820378205,B01MZBS75N’ template=’ProductAd’ store=’flaviowebnet-21′ marketplace=’IT’ link_id=’c1b999ac-ec7a-11e6-89ac-9377e1a73a82′]

Readers Comments (8)

  1. Dio Buono sei un grande! Devo però farti una domanda. Wpsmush ottimizza al massimo 50 immagini e poi chiede di fare un abbonamento. Non ci sono altri plugin gratuiti?

    • Ciao Paolo e grazie per l’aprezzamento. Si, in effetti WPSmush permette di ottimizzare le prime 50 immagini e poi devi sottoscrivere un abbonamento. Un’eccellente alternativa è EWWW Image Optimizer (forse anche meglio di WPSmush). Una volta installato, bisogna andare sul pannello del plugin e cliccare sul link posto in alto, “Ottimizza Bulk” . In realtà nemmeno questo è completamente gratuito ma il prezzo è davvero irrisorio. Per quasi 400 immagini si pagano 0,99$. Puoi sottoscrivere dei piani mensili a 0,99$ al mese per ottimizzare le altre che metterai, oppure acquistare un piano prepagato una tantum. Ci sono vari tagli ma gia con 9 dollari acquisti un piano per ottimizzare ben 3000 immagini. Quando si installa, prima di procedere bisogna ottenere una chiave API da inserire in un apposito campo sul pannello di settaggio del plugin. Come detto costa 0,99$ per quasi 400 immagini. Dopo aver pagato la si ottiene.
      In alternativa, fai senza plugin. Se sei pratico usa photoshop o Gimp per ridurre il peso delle immagini. Se non sei esperto di questo tipo di programmi, scaricati il tool gratuito Caesius da https://saerasoft.com/caesium/. Questo programmino, installabile sul pc o utilizzabile in versione portable, ti permette in maniera intuitiva e facile di ridimensionare la larghezza e l’altezza delle immagini e di comprimerle per ridurne il peso in kb.

  2. ciao Flavio ho seguito tutta la tua guida e ottenuto un buon risultato ma non ancora sufficiente, ma, all’ultimo plugin ovvero Async JS and CSS anche variando tutte le impostazioni mi blocca il css io utilizzo visual composer hai altri consigli? forse non è compatibile con visual, grazie ivan

    • Ciao Ivan.
      Credo che i plugin di visual composer appesantiscano parecchio ma non ho mai riscontrato delle incompatibilità.
      Per sbloccare i css, individuali e poi scrivili nell’area dedicata alle esclusioni alla fine delle impostazioni.
      Purtroppo spesso é necessario trovare un compromesso tra velocità e visualizzazione del sito.
      Se comunque visivamente noti che il sito si carica rapidamente hai già raggiunto un buon risultato.
      Un caro saluto. ☺️

  3. Ciao Flavio… un bell’articolo veramente 🙂

  4. ciao Flavio, grazie per l’articolo. Però (dopo aver seguito tutto alla lettera), dopo la configurazione di Async JS and CSS le pagine non si vedono più o per lo meno, si vde solo la prima immagine e poi nient’altro. Ho dovuto disattivare il plugin. Hai dei consigli?

    • Ciao Fabio.
      Async js and css non é un plugin autoconfigurante. Le opzioni le scegli tu a seconda dei risultati che ottieni, sia in ottica pagespeed che in ottica usabilità del sito. Nel tuo caso, probabilmente ci sono uno o piu files js/css che non possono essere deferiti o resi asincroni, pena la mancata visualizzazione di alcuni elementi.
      Detto questo, se ci fai caso, c’é un campo in cui inserire i files che non si vuole siano toccati dal plugin. Una volta individuati inserisci li il percorso e vedrai che il sito si visualizzerà correttamente. Per farti capire meglio, leggi l’articolo https://flavioweb.net/contenuti-above-the-fold-wordpress/ dove spiego la procedura, anche se utilizzo un altro plugin. Spero ti sia utile. Fammi sapere.
      Un grande abbraccio.

Leave a comment

Il tuo indirizzo email non sarà pubblicato.


*