[GUIDA DEFINITIVA] Come velocizzare il pagespeed di un sito WordPress

Che cos’è l’ottimizzazione e perché è importante

In questo articolo ti spiegherò come potrai velocizzare il tuo sito wordpress  di almeno un 50%-60% con alcuni piccoli accorgimenti e qualche plugin.

Per l’ottimizzazione di un blog wordpress, si intendono tutte quelle attività svolte a migliorare la velocità di caricamento delle pagine e i tempi di risposta del server.

Perché è importante l’ottimizzazione

Perché agli utenti piacciono siti che caricano velocemente, e google lo sa molto bene.
Lato SEO, google premia i siti che riescono a essere caricati e indicizzati rapidamente, cioè sotto il secondo di tempo di risposta.

Quante volte, mentre navigavi con il tuo smartphone, sei entrato su un sito internet dalla SERP di google, e aspettavi 2 secondi che caricasse, ma rimaneva la schermata bianca, per quindi uscire e cercare a informazione su un altro sito.

Bene, puoi aver scritto l’articolo più fico che esista, però per il lettore questo non è importante, perché non lo ha mai potuto leggere.

Fonte: https://it.semrush.com/blog/come-velocizzare-sito-web-lento/

Cosa comporta velocizzare il tuo sito wordpress

Il lavoro di velocizzare il tuo blog richiede un po’ di pazienza, ma ti garantirá di ottenere dei miglioramenti dal lato SEO, della SERP di google e dell’aumento del traffico in ingresso.

I miglioramenti rapidi che puoi subito osservare dopo aver ottimizzato il sito wordpress è una diminuzione del tasso di rimbalzo del sito, che corrisponde agli utenti che entrano ed escono dal sito negli stessi secondi.

Però, se mi seguirai in tutta questa guida, ti posso garantire il raggiungimento di risultati per il tuo blog.

Diversi strumenti per misurare il tuo blog wordpress

Per iniziare questo lavoro di ottimizzazione bisogna partire da un’analisi accurata della situazione delle tue pagine web, e per questo ci appoggiamo a diversi tools offerti da varie compagnie.

  • Google Pagespeed: Lo considero il più importante, in quanto è Google, e c’è la possibilità che il valore calcolato dal loro pagespeed influisca nel valore dato dalla pagina di ricerca al tuo sito;
  • GMetrix: Offre una valutazione più tecnica e analitica, con molti indicatori tecnici e una valutazione più accurata. Aumentando la valutazione su questo sito, si aumenterà anche per Google Pagespeed;
  • Pingdom: Anche questo riesce a offrire una buona valutazione del sito e buoni indicatori per poter valutare il da farsi;
  • P3 Plugin performarce profiler, che vedremo di seguito (è un plugin wordpress, che vedremo nella sezione plugins).

Come avrete già notato, la valutazione di un blog wordpress varia un po’ per ogni test che svolgete, questo è dovuto ai tempi di risposta del server che non sono sempre gli stessi.

Prenderemo come tool principale Google Pagespeed, da questo analizzeremo ogni punto e vedremo come si può migliorare.

[Migliorare velocità wordpress] Ottimizzazione immagini

Google consiglia di impostare le dimensioni minimi per le immagini, in modo da diminuire il tempo di attesa dell’utente prima che le immagini vengano scaricate dal browser.

Inoltre, comprimere le immagini tramite degli algoritmi, e scegliendo il giusto tipo di formato o codifica del file aiuterà senza dubbio a diminuirne il peso, senza togliergli eccessivamente qualità.

Le immagini possono rappresentare circa il 60-80% del peso di una classica pagina web su wordpress ….

Il consiglio è che la dimensione delle immagini caricate in wordpress non deve pesare assolutamente più di 100kb….

Mi è capitato di vedere template con immagini che arrivavano fino 6mb di caricamento, e 15 secondi di download.

Quando si tratta di utenti desktop con connessione abbastanza veloce, c’è anche margine per il peso delle immagini, ma quando il traffico è composto da utenti che vengono da mobile, con una connessione dati, allora diventa fondamentale, per il successo del business, curare accuratamente questo aspetto.

Per fortuna, WordPress ci può dare una mano d’aiuto, ed esiste il plugin WP-SMUSH.

Dopo averlo attivato, inizierà automaticamente ad ottimizzare le immagini, però la versione gratis, aggiorna le pagine 50 elementi alla volta, e non con l’algoritmo più efficiente per comprimere l’immagine.

Plugin per migliorare velocità sito wordpress
Plugin wordpress wp smush per comprimere le immagini

 

Interfaccia web per migliorare velocità wordpress
Interfaccia web dove migliorare le performance del sito web wordpress

Per ottenere un risultato migliore, soprattutto nella homepage e in qualche pagina particolare, si possono scaricare le immagini ottimizzate per wordpress direttamente da google, e caricare nel sito tramite FTP, sostituendo le originali.

Questa operazione richiede un po’ più di conoscenze tecniche!!.

Però, perché curare quando si può prevenire?

Esistono tanti tool online che ti permettono di ottimizzare le immagini prima di caricarle nel tuo sito, e nella mia esperienza ti posso consigliare tinypng.com e tinyjpg.com, che sono molto buoni e riducono notevolmente il peso delle immagini senza alterarne la qualità.

Screenshot di come migliorare la velocità wordpress
[Come migliorare la velocità wordpress] Screenshot di google pagespeed,

Analisi, rimozione e sostituzione plugins di wordpress

Ad influire notevolmente sul carico del server, e i tempi di risposta, sono i plugins di WordPress.

L’idea migliore è ridurre al minimo il numero di plugin presenti nel tuo blog, lasciando soltanto quelli strettamente necessari, per il lato SEO, o che aggiungono determinate funzionalità di cui non puoi fare a meno.

Quindi, per ogni plugin, chiediti: “Vale la pena lasciare attivo questo plugin, in cambio di rallentare un po’ il caricamento?”.

Però, non tutti i componenti aggiuntivi influiscono allo stesso modo, ci possono essere componenti che pesano più dal lato di richieste al database, e altri componenti, che invece tardano nell’elaborazione di codice PHP.

Per poter trovare i colli di bottiglia (la causa del rallentamento del sito) possiamo avvalerci di moltissimi tools e plugin per wordpress.

Il più famoso è P3 Plugin Profiling, sviluppato da GoDaddy, che permette di avere un grafico dell’incidenza del peso di ogni plugin sul caricamento totale del sito.

Con questo plugin si potrà trovare il plugin che ha una incidenza maggiore nel sito internet e rimuoverlo, oppure disattivarne funzionalità o trovare un sostituto molto più leggero o performante che permetta di ottenerne le stesse funzionalità.

Tool per analizzare la velocità del sito web wordpress
Tool per analizzare la velocità del sito wordpress

Dopo aver installato P3 Plugin Profiling, andare nella pagina di amministrazione, e nel menù Strumenti troverete la voce del plugin.

Per iniziare uno scan premete Analyze Site.

 

Scelta di un buon hosting

Per poter velocizzare un sito internet, la scelta dell’hosting è molto importante, in quanto  l’hosting, essendo il server del sito internet, se buono, permette di caricare la tua pagina web molto velocemente.

Molte aziende offrono un hosting web condiviso.

Ciò significa che il tuo sito è nello stesso server con altri siti.

Quando tutti i siti hanno molta utenza in contemporaneo, il server si sovraccarica, diminuendo i tempi di risposta delle pagine web.

Nella mia esperienza, è meglio scegliere un hosting condiviso quando si sta iniziando a creare il sito, o ha poca utenza, per poi crescere e importarlo in un hosting privato oppure un hosting specializzato per wordpress.

Gli hosting che posso consigliare sono GoDaddy che offre dei server web gestibili da CPanel, SiteGround, però il migliore, avendo un po’ di conoscenze linux, è amazon AWS e configurare direttamente un’istanza per caricare i dati del sito.

Un criterio molto importante per scegliere un hosting, è senza dubbio l’assistenza che ti offrono per qualsiasi problema, ad esempio, mi sono trovato molto bene con Godaddy per dei problemi legati al server mail.

Molto male con aruba, in quanto l’assistenza clienti sembra non esista, anche se hai il sito offline, a loro non gli importa nulla.

Sfrutta il caching del browser

Il caching del browser è una funzionalità che permette al browser di memorizzare nella sua cache le risorse come i file css, javascript, font e immagini dopo il primo caricamento, salvandole per un determinato periodo di tempo, in cui si pensa che nel server rimarranno invariati.

Questo tipo di memorizzazione locale, permette agli utenti di navigare con molta più rapidità, dopo il caricamento della prima pagina, nel caso è la prima volta che si apre il sito, in quanto non sarà necessario scaricare altre volte le stesse risorse dal server remoto, ma saranno presenti nel computer stesso.

Su wordpress si può attivare il caching del browser manualmente o automaticamente.

Per farlo manualmente bisogna modificare l’htaccess, che è un file che contiene diverse direttive per il server web.

Aprire con un tool ftp il file chiamato .htaccess nella root dei dati del sito internet e incollare il codice:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresByType image/jpg "access 1 year"
	ExpiresByType image/jpeg "access 1 year"
	ExpiresByType image/gif "access 1 year"
	ExpiresByType image/png "access 1 year"
	ExpiresByType text/css "access 1 month"
	ExpiresByType text/html "access 1 month"
	ExpiresByType application/pdf "access 1 month"
	ExpiresByType text/x-javascript "access 1 month"
	ExpiresByType application/x-shockwave-flash "access 1 month"
	ExpiresByType image/x-icon "access 1 year"
	ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Se non è possibile modificare il file, si può risolvere direttamente tramite wordpress installando il plugin W3 Total Cache.

Plugin famoso per migliorare le performance del sito wordpress
Plugin famoso per migliorare le performance del sito wordpress

Per configurare il plugin, seguite le seguenti immagini, oppure potrete scaricare in fondo all’articolo l’export del file di configurazioni che ho usato per questo sito.

Abilitare la compressione GZIP

La compressione gzip è un meccanismo di riduzione di dati, che permette di comprimere il contenuto delle pagine html, immagini e le varie risorse del sito, come se fossero un archivio zip.

Ottimizza la velocità di caricamento del sito, perchè riduce la quantità di dati da scaricare, e anch’essa si può attivare manualmente, o tramite il plugin W3 Total Cache (già visto in precedenza) di wordpress.

  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  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

  # Remove browser bugs (only needed for really old browsers)
  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

Si può attivare tramite W3 Total Cache.

Migliorare velocità sito web wordpress con w3 total cache
Impostazioni w3 total cache

Pulizia del database

Questa parte è dedicata solo se hai un sito già popolato con articoli e con una certa vecchiaia.

WordPress, ogni volta crei l’articolo, fai una modifica, e ogni 5 minuti che stai nell’editor, crea una revisione dell’articolo, che è una copia, salvata come tipo revisione, che permette poi di vedere le differenze del testo aggiunto o tolto.

Queste revisioni, a lungo andare possono appesantire notevolmente il database, aumentandolo di almeno 2 o 3 volte, in quanto wordpress, di default non cancella automaticamente le revisioni dell’articolo, ma restano accumulate, anche se non più utili.

Per svolgere questo, nella mia esperienza ho conosciuto WP-Sweep che permette di cancellare tutti i dati obsoleti.

ATTENZIONE: PRIMA DI SVOLGERE QUESTO PASSO FARE ASSOLUTAMENTE UN BACKUP DEL DATABASE!!!

Migliorare velocità database di un sito web wordpress
Migliorare velocità database del sito web wordpress

Eliminare JavaScript e CSS che bloccano la visualizzazione nei contenuti “above-the-fold”

Il contenuto “above the fold” è la prima parte del sito che vedi dopo essere entrato.

È fondamentale, che questa parte venga caricata prima delle altre, in modo che l’utente che entra possa iniziare a leggere il contenuto mentre la restante parte del sito non è ancora stata caricato.

Questo parametro incide notevolmente nel pagespeed e il problema maggiore è dovuto ai javascript e ai css.

Il caricamento di risorse esterne tarda il browser che cerca di interpretare il codice html, in quanto è costretto a caricare queste risorse in modo sincrono, obbligandolo a interrompere l’interpretazione del codice della pagina.

Un simpatico sito link che indica il contenuto “above the fold” di un sito http://abovethefold.fyi/.

Con wordpress si può provare a risolvere un po’ questo problema mettendo il caricamento di tutti gli javascript e i css in nel footer del sito web o impostando un caricamento asincrono delle risorse.

Un’altra soluzione è di configurare autoptimize, un plugin che comprime tutte le risorse javascript e css in un unico loader, che ottimizza le prestazioni.

Installare il plugin, e nelle configurazione attivare tutte le impostazioni riguardanti Javascript e Css.

Anche questo plugin può creare notevoli problemi, in base al template che il sito usa, arrivando, nel peggiore dei casi a ottenere una pagina bianca.

Minificazione e Riduzione tempi di risposta del sito

La minificazione è una funzione per ridurre il peso delle risorse javascript, html e css e consiste nel cancellare gli spazi, comprimere il nome delle variabili, e mettere tutto il testo in solo una riga, permettendo di conservare qualche kb di informazione da scaricare.

Il caching del sito consiste nel restituire all’utente una pagina già elaborata in precedenza dal server, senza che sia necessario elaborare un’altra volta tutto il contenuto, in quanto si pensa che sará sempre lo stesso per una determinata soglia di tempo.

Per questo utilizziamo Cloudflare per wordpress, che ci permette di risolvere tutti e due i problemi.

Cloudflare ci offre un sistema di caching che permette di ridurre del 30% i tempi di risposta del blog, un sistema di ottimizzazione automatico delle risorse, compresa la minificazione dei css e javascript.

Migliorare velocità database di un sito web wordpress
Pannello di amministrazione cloudflare per attivare la minificazione JS/CSS

Se sei arrivato qua, spero abbia apprezzato tutta la guida. Sarò molto contento di leggere il tuo parere nei commenti qua in basso, e rispondere a qualsiasi tua perplessità.

Se vuoi ricevere altri miei contenuti, ti invito a iscriverti alla nostra newsletter.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *