Luigi Sabbetti

Il mondo del web a 360 gradi

Come velocizzare un sito Wordpress

Come velocizzare un sito WordPress


di // Pubblicato il: 12 aprile 2018

Oltre ad avere dei buoni contenuti e una grafica accattivante, la chiave del successo di un sito web sta nelle performance. Oggi vedremo dunque come velocizzare un sito WordPress.

Le ragioni che ci spingono a velocizzare il nostro sito web sono molteplici. Sicuramente le due ragioni più importanti sono legate all’usabilità dello stesso e la possibilità di indicizzarci meglio sui motori di ricerca. Un sito web veloce, infatti, è facile da navigare per gli utenti. Di conseguenza le nostre statistiche miglioreranno. Gli utenti saranno ben lieti di tornare a farci visita e anche i motori di ricerca inizieranno a guardare il nostro sito con un occhio di riguardo. Uno dei fattori SEO è infatti legato a velocità ed usabilità. Scommetto che non vuoi farti trovare impreparato!

Prima di iniziare ti avviso subito: la guida è molto lunga, ma la considero la mia guida definita su come velocizzare un sito web. Ho diviso comunque il testo in moduli per renderti la lettura più piacevole. Ti ci vorranno all’incirca dieci minuti per leggerla tutta e, fidati, ti sembreranno ben pochi se paragonati ai dieci anni di lavoro che mi sono serviti per apprendere questi segreti, senza tralasciare le ore passate per redarre questo articolo e condividerli con te.

Un sito web che impiega molto tempo per caricare le proprie pagine, costringe il visitatore a lunghe ed interminabili attese. Il tuo compito è proprio quello di ridurre al limite questo tempo di caricamento. Le statistiche, infatti, evidenziano l’impazienza dell’utente medio, sempre tentato dalla chiusura del sito web qualora i tempi di reattività dello stesso risultino scarsi. Si calcola, infatti, che la percentuale di utenti che abbandonano un sito salga drasticamente dopo i 3 secondi di attesa.

Come detto, inoltre, la velocità del sito è considerata un vero e proprio fattore indicizzante in quanto Google, assieme anche ad altri motori di ricerca, tiene in considerazione i tempi di reazione per stilare il suo ranking. Sarebbe un vero peccato, dunque, perdere posizioni sui motori di ricerca a causa della velocità, soprattutto perché è un fattore sul quale possiamo intervenire direttamente, cercando di arrivare a performance decisamente degne di nota senza troppa fatica.

Come avrai già capito, le ragioni per velocizzare il caricamento di un sito web sono diverse, ma tutte si riassumono nel mantra che devi sempre tenere presente: garantire un’esperienza utente di alta qualità per i visitatori del tuo sito. Fatte le doverose premesse del caso, vediamo assieme come velocizzare un sito WordPress.

Verificare i tempi di caricamento del sito

Per prima cosa, dobbiamo testare il nostro sito web per capire i punti deboli e cercare di migliorare le prestazioni. Sono diversi gli strumenti che ci permettono facilmente di misurare le performance del sito ed ottenere alcuni consigli utili per ottimizzarlo.
Ti invito a testare il tuo sito adesso, annotare i dati ottenuti e rifare il test al termine della guida, solo così facendo potrai toccare con mano l’efficacia dei consigli che sto per darti.

Se non ti ho ancora convinto, ti invito a testare il mio sito. Ho fatto molto per ottimizzare le performance e te ne accorgerai subito. Con i miei consigli riuscirai anche tu ad avere simili performance.
Il primo tool che mi sento di consigliarti è quello messo a punto da Google.

Page Speed Insights

luigisabbetti.it su Page Speed Insights

Sto parlando del Page Speed Insights, un tool messo a disposizione gratuitamente da Google per misurare la velocità del nostro sito web. Solo conoscendo le attuali performance, infatti, saremo in grado di agire per velocizzare un sito web.

Il tool ci permette, inoltre, di testare il sito web sia in versione desktop che mobile. Non è detto, infatti, che un sito  ottimizzato per desktop, riesca a mantenere le stesse performance anche da mobile. Tieni presente che, al giorno d’oggi, la maggior parte delle visite che riceverai sul tuo sito provengono da dispositivi mobili. Ecco perché dovresti sempre puntare verso un approccio mobile first quando sviluppi i tuoi siti web.

Per testare il sito ti basterà inserire l’url dello stesso all’interno del tool. Lo strumento inizierà immediatamente la scansione del tuo sito e, in pochissimo tempo, sarà in grado di restituire un punteggio calcolato in base alla velocità riscontrata. Assieme al punteggio, troverai anche dei preziosi consigli per ottimizzarlo al meglio. Fanne buon uso.

Personalmente tra me e Page Speed Insights c’è un rapporto di amore ed odio. Le ragioni dell’amore sono dovute soprattutto al fatto che questo strumento ti permette, una volta testato il sito, di scaricare una versione delle risorse ottimizzate. Hai capito bene, Google ottimizzerà immagini, file js e css e ci permetterà di scaricarli. Potremo dunque sostituire i files etichettati come ottimizzabili ed ottenere così un immediato miglioramento delle performance.

Le ragione dell’odio sono invece dovute a quelli che io ritengo alcuni problemi tecnici difficilmente superabili e che non credo Google dovrebbe segnalare come errori. Il primo è riguardante i contenuti above the fold della pagina web. Ma che significa contenuti above the fold?

Te lo spiego io. Si tratta di elementi che bloccano la visualizzazione dei contenuti del tuo sito fin quando questi non vengono del tutto caricati. E’ ad esempio il caso di framework css come foundation o bootstrap. Purtroppo arginare questo tipo di errore, come tu stesso vedrai, non è affatto semplice. Esistono tuttavia alcuni trucchetti che ti spiegherò più avanti nel capitolo dedicato alle soluzioni.

La seconda pecca legata all’utilizzo di page speed insights sta nel fatto che il tool segnala costantemente come errore il mancato utilizzo della caching del browser. In realtà, si riferisce anche a risorse esterne al sito e sul quale non possiamo intervenire direttamente. Se, ad esempio, abbiamo utilizzato il codice di incorporamento di Analytics o abbiamo caricato un Google Fonts all’interno del sito, andremo incontro a questo errore e, purtroppo, non esistono soluzioni per arginarlo.

I più furbi hanno pensato bene di scrivere una condizione che non registra questi files specifici se capisce che la richiesta proviene dal page speed insights. Ovviamente questo è solo un escamotage inutile che serve solo per raggiungere il 100% effettivo nella scala metrica del tool ma che, in sostanza, non porta alcun beneficio per il sito. Ecco perché mi sento di sconsigliartelo e, in questa guida, non troverai ulteriori accenni a questo metodo.

GTMetrix

luigisabbetti.it su gtmetrix

Un altro tool che ti consiglio per testare le performance del tuo sito web WordPress è GTmetrix. Gtmetrix è, da anni, uno degli strumenti più utilizzati dai developer di tutto il mondo per testare siti web. Sono tante le features di questo tool.

Gtmetrix è un tool davvero intuito e facile da utilizzare, anche per i neofiti. I suoi report sono di facile comprensione e semplici da condividere anche con i membri del tuo team. Una delle funzioni più interessanti, infatti, è quella di poter scaricare il report delle tue performance in formato pdf direttamente sul tuo pc.

Un altro punto di forza è la chiarezza e la sua semplicità nel saper fornire soluzioni mirate alle problematiche che emergono dall’analisi del sito. Come Page Speed Insights, infatti, questo tool non solo analizza il sito, ma ci permette di conoscere i punti deboli sui quali andare a lavorare.

I punti dell’analisi sono ordinati in base alle priorità, in questo modo ti sarà facile capire quali sono i problemi da risolvere per primi. Ecco, di seguito, alcune delle funzioni principali di GTmetrix:

  • Le analisi possono essere schedulate
  • Attraverso la registrazione al sito, gratuita, è possibile avere accesso allo storico delle analisi.
  • Visualizzare le performance del sito e confrontarle con la media dei siti web già testati con GTmetrix da altri
  • Venire a conoscenza di molti dati utili come il numero totale di richieste, il tempo di caricamento della pagina e il waterfall (letteralmente cascata) delle risorse caricate suddivise in base al tempo di reazione
  • Analisi comparata di tool diversi come Google PageSpeed e Yahoo! YSlow
  • Disponibile anche una versione PRO

Pingdom

luigisabbetti.it su Pingdom

L’ultimo tool che ti consiglio è Pingdom. Pingdom ti offre un tool altamente affidabile per monitorare le prestazioni del tuo sito. E’ in grado di utilizzare più di 70 server diversi dislocati in tutto il mondo. Potrai quindi, testare il tuo sito anche simulando il comportamento di un utente che si collega dall’altra parte del globo.

Il motto di Pingdom è Nobody Likes a Slow Website, d”altronde come dargli torto. Sfrutta con cura questo tool per testare al meglio il tuo sito. Potrai ottenere consigli molto utili che ti apriranno gli occhi sul da farsi.

Di seguito, ecco una carrellata di features messe a disposizione da pingdom:

  • Pingom è in grado di esaminare tutte le parti di una pagina web: visualizzare il peso dei singoli files, i tempi di caricamento e altri dettagli legati alla pagina web (HTML, JavaScript CSS, immagini, etc.).
  • Grado di performance e consigli utili: Pingdom analizzerà il nostro sito restituendoci un grado di performance da 1 a 100 con una classificazione basata su lettere dove A sta per ottimo. Inoltre ci offrirà alcuni consigli utili per migliorare le performance
  • Tracciare lo storico delle tue performance. Pingdom salva ogni test effettuato ed è in grado di farti accedere allo storico, fornendoti anche dei grafici molto intuitivi
  • Test da località differenti. Come detto hai la possibilità di testare il tuo sito simulando il comportamento di un utente proveniente da qualsiasi angolo del globo
  • Condividere i tuoi risultati. Pingdom ti permette di condividere facilmente i risultati ottenuti con i tuoi amici o colleghi

Mi raccomando, quando effettui il test di velocità su Pingdom evita i tempi di latenza. Seleziona dunque il server più vicino che, nel caso dell’Italia, è quello che si trova in Svezia, a Stoccolma per l’esattezza. Se invece vuoi testare il tuo sito simulando il comportamento di un utente proveniente da una nazione diversa, sei liberissimo di farlo. Otterrai, ovviamente, risultati ben diversi a meno che non utilizzi servizi di CDN dislocati in tutto il globo come, ad esempio, Cloudflare, ma questo è un altro discorso.

Seorch.eu

Dovevo limitarmi a tre tools, ma ho deciso di aggiungere un ultimo strumento che ritengo molto utile. Sto parlando di Seorch. Cosa ha seorch di diverso dagli altri? In realtà non molto, se non per il fatto che è in grado di fornirti anche qualche indicazione per migliorare il tuo sito sotto l’aspetto SEO. Mi sento dunque di consigliartelo perché può esserti davvero utile, ma non mi dilungo sul suo utilizzo in quanto non differisce di molto dagli altri strumenti finora mostrati.

Bene, dopo questa prima analisi saremo in grado di conoscere i punti deboli del nostro sito. Scommetto che qualcuno sei già riuscito ad individuarlo grazie ai tool di analisi e, forse, hai già messo qualche toppa per risolverli in autonomia. Se sei arrivato fin qui, però, è perché stai cercando qualche trucchetto difficilmente reperibile online o comunque non facile da intuire in autonomia. Non preoccuparti, sono qui per questo.

Gli strumenti da utilizzare per velocizzare un sito web WordPress

Passiamo dai tool di diagnosi agli strumenti per migliorare le prestazioni del nostro sito web. Ecco di seguito i passi che, a mio avviso, dovrai seguire per ottenere performance degne di nota:

Ottimizzazione delle immagini

Se il tuo sito è lento, molto probabilmente è perché è pesante in termini di peso effettivo di MB. Le ragioni della pesantezza possono essere diverse ma, molto spesso, la colpa è da attribuirsi al peso eccessivo di contenuti come video ed immagini presenti sul sito. Mi è capitato molto spesso, infatti, di conoscere persone che si ostinano a caricare contenuti pesanti sul proprio sito senza pensare minimamente alla fase di ottimizzazione. Le stesse persone, poi, si lamentano delle performance.

Anche una macchina molto veloce, se caricata con 5 tonnellate di ferro inizierà ad andare lenta, non trovi? La stessa cosa vale per il tuo sito. Ecco perché dovresti fare ben attenzione al numero di files e al peso degli stessi.

E’ difficile darti delle indicazioni precise poiché dipende molto dal tipo di sito che stai realizzando ma, in linea di massima, non dovresti mai caricare foto che superano i 100KB. Potresti fare giusto qualche eccezione per delle foto molto grandi come ad esempio quelle da utilizzare in uno slider principale.

Forse ti starai chiedendo: voglio garantire una risoluzione delle foto ottimale per i miei visitatori, come faccio a tenermi nell’ordine dei 100Kb?

La domanda non è banale ed esistono molti trucchi per arginare questo problema. Un trucco ad esempio è quello di mostrare un’anteprima della foto e, al mouseover oppure al click su di essa, caricare l’immagine in alta risoluzione.

Abbassare il peso delle immagini, comunque, non sempre vuol dire rinunciare alla nitidezza delle stesse. Ci sono vari tool, infatti, che permettono di alleggerire le immagini senza rinunciare alla definizione: uno fra tutti TinyPng. Di questo comodo tool esiste anche un plugin per Photoshop.

TinyPng è comunque un servizio esterno e non fa parte ovviamente di WordPress. Probabilmente ora sarai in preda al panico perché con ogni probabilità devi rimediare a mesi, se non anni, di caricamenti di immagini non ottimizzate sul tuo sito. Per fortuna esiste un plugin che ci dà una mano. Non dovrai dunque ricaricarti a mano tutte le immagini, ti basterà utilizzare ewww optimizer

Per i video, invece, rispettare i 100Kb è ovviamente quasi impossibile, a meno che non si tratti davvero di video composti da pochissimi frames. In questo caso ti consiglierei di non sforare mai i 2 mega di peso e, ad ogni modo, evita di visualizzare il video in autoplay soprattutto da mobile. Non tutti gli utenti mobile, infatti, sono disposti a sacrificare 2Mb per vedere un video.

Per ottimizzare un video online ci sono davvero tantissimi tool. Io mi sono sempre trovato bene con Hand Brake per Windows ma, come detto, ne esistono tantissimi e ti basta semplicemente effettuare una ricerca su Google per trovarne di nuovi.

Sfruttare il caching

Hai mai sentito parlare di cache? Se non è mai sentito parlare, allora forse è meglio che ti illustri i vantaggi di questo sistema. La cache non è altro che una memoria. Quando accediamo ad un sito web, se è attivato un sistema di caching lato server, ciò che vediamo verrà immagazzinato in una sorta di memoria volatile. Quando torneremo a far visita allo stesso sito, alcuni dei dati saranno già presenti in memoria e questo ci permetterà di accederci in modo decisamente più veloce.

Ora che hai le basi giuste, puoi iniziare a sfruttare anche tu il caching sul tuo sito. Non sai come fare? Non c’è problema, ti mostrerò un plugin decisamente fenomenale che farà tutto per te.

Forse ne hai già sentito parlare, sto parlando del rinomato W3 Total Cache. Questo plugin rientra senza dubbio in quelli che io ritengo essere i migliori plugin WordPress in circolazione. W3 Total Cache, infatti, ci permette con pochi e semplici passi di minimizzare i nostri files css e js, sfruttare al massimo la cache del browser e del nostro server, caricare file mediante il protocollo HTTP2 e molto altro ancora.

Di seguito trovi un video dettagliato sul suo utilizzo. W3 Total Cache risolverà davvero tanti dei tuoi problemi legati alle performance. Occhio nella minificazione, qualcosa all’interno del sito potrebbe rompersi. Testa sempre tutto con cura ed effettua un backup dei files e del db prima di fare operazioni che ritieni azzardate

Scelta dell’hosting

E’ inutile negarlo, le prestazioni del nostro sito non dipendono soltanto dalla nostra volontà. Molto, infatti, è dato anche dal nostro hosting. Un hosting ottimizzato per WordPress, infatti, ci consente di guadagnare secondi preziosi in fase di caricamento. Ora ovviamente starai per chiedermi: qual è il miglior hosting WordPress?

In realtà non posso darti una risposta sicura al 100%. Io sinceramente ne ho provati diversi in questi anni. Sentirai molta gente parlare bene di Siteground ma io, personalmente, non ho avuto un’ottima esperienza con questo provider. Siteground, infatti, pone secondo me dei limiti immani nella realizzazione di un sito web. In particolar modo con i piani di hosting tradizionali ha delle limitazioni molto alte alle richieste effettuate dagli utenti. Fatto sta che l’hosting di Siteground risulta essere ad oggi uno dei più performanti sul mercato per quanto riguarda WordPress.

Con il piano base, purtroppo, avrai problemi non appena il tuo sito inizia ad avere un numero considerevole di visitatori. Un altro hosting molto utilizzato in Italia è senza dubbio Aruba. Anche con Aruba le mie esperienze non si sono rivelate positive. Sebbene non abbia nessun tipo di limitazione per quanto riguarda banda e richieste, sembra che i pacchetti hosting siano ancora molto ancorati al passato: pannelli vetusti e assistenza mediocre sono quelli che io ritengo i punti deboli di questo hosting.

Nell’ultimo periodo, infine, ho deciso di passare a Netsons: una società italiana che ho avuto modo di conoscere anche da vicino. I Server sono affidabili, il supporto è buono e non ho mai avuto problemi di restrizioni in base al traffico. Insomma, dopo vari tentativi, ho scelto questo come hosting. I prezzi di Netsons, infine, sono molto competitivi.

Ovviamente i miei sono solo dei consigli, l’hosting è solo uno dei fattori, ma è comunque un punto che dovresti esaminare a fondo.

I Plugin

Quanti plugin hai installato sul tuo sito? Scommetto parecchi. Ebbene questo è uno degli errori più comuni che si commettono, soprattutto quando non si è molto esperti. Io ti consiglio di non eccedere con i plugin. Ogni plugin si porta dietro del codice che può essere dannoso, ma soprattutto che andrà ad appesantire ulteriormente il tuo sito.

A volte, infatti, anche se disinstalli un plugin, ne rimangono comunque tracce sul database. Questo fa si che il tuo sito ne risenta pesantemente. Ti consiglio dunque di installare un plugin che ti servirà per fare pulizia di plugin e temi ormai non più utilizzati. Il plugin in questione si chiama Clean Options.

Questo plugin è molto utile perché ti consente di ripulire la tabella wp_options del database rimuovendo plugin e temi rimasti orfani. Sbarazzati dunque dei plugin in eccesso e, se hai bisogno di ulteriori informazioni riguardo i plugin, puoi consultare la mia guida dedicata ai plugin wordpress.

Un’altra cosa utile è quella di limitare le revisioni delle pagine del tuo blog. Farlo è molto semplice, ti basta andare nel wp-config.php, che si trova nella root principale del tuo sito, ed aggiungere queste due righe

define ( ‘WP_POST_REVISIONS’, 5 );
define( ‘AUTOSAVE_INTERVAL’, 300 );

Per capire a fondo quanto i plugins incidono sul tuo sito, ti consiglio di disattivarli tutti momentaneamente e provare uno speed test. Sono sicuro che rimarrai a bocca aperta.

I Template

Il template è una parte fondamentale del tuo sito. Non racchiude, infatti, solo l’aspetto grafico, ma gestisce anche tutte le risorse fisiche che passano sul tuo server. Dovresti, dunque, assicurarti di utilizzare un template altamente performante e mobile first.

Nel mio caso, essendo un web designer, ho sviluppato personalmente il template del mio sito cercando di limitare all’osso le richieste inutili e aumentando così notevolmente la velocità.

Sviluppare un template da zero, ovviamente, ti consente di avere un maggiore controllo su tutto ciò che accade sul sito. Capisco bene che non tutti sono in grado di farlo. Fortunatamente sono tanti i siti che mettono a disposizione template premium. Uno fra questi è senza dubbio themeforest.net

Il consiglio che mi sento di darti è quello di testare anche il template con page speed insights. Non è detto, infatti, che un tema, anche se premium, abbia delle buone performance di caricamento. Stai dunque attento a ciò che acquisti e non sottovalutare mai la velocità.

Ottimizzare il DB

Un altro aspetto che molti sottovalutano è legato all’ottimizzazione del database del tuo sito. Molti, infatti, pensano esclusivamente ai files trascurando in toto la base dati. Non commettere questo errore perché potresti pentirtene.

Ogni volta che sporchiamo il database installando e disinstallando temi e plugin dovremmo prenderci la briga di cancellare le tabelle non più utilizzate. Devi farlo a mano? traqnuillo, esiste un plugin anche per questo e si chiama Wp-Optimize.

Wp-Optimize ottimizzerà al meglio il tuo database eliminando commenti spam, pesanti revisioni dei post e bozze.

Come se fosse un vero e proprio registro di sistema il database del tuo blog si sporca e ogni tanto va ripulito. Il mio consiglio è quello di non lasciare sempre attivo questo plugin. Usalo solo quando dovrai fare un pò di pulizia sul tuo blog.

Sfrutta la CDN

Prima di concludere, l’ultimo consiglio che ti lascio è quello di sfruttare al massimo le CDN. Le CDN, se non lo sapessi, sono delle content develivery network. In pratica sono delle risorse hostate su siti terzi. Molti sono i siti web che mettono a disposizione questi files, come lo stesso Google e MaxCDN.

Le CDN hanno un doppio utilizzo. Sicuramente sul tuo sito userai jQuery ad esempio. Sono tanti i siti che usano jQuery proprio come te ed è quindi probabile che un utente abbia già visitato in precedenza un sito web che fa utilizzo di questa libreria.

Se così fosse allora tu ne trarresti vantaggio poiché l’utente avrebbe già in cache la libreria e non dovrebbe scaricarla nuovamente. Ok, hai capito la teoria, ma la pratica?

Per sfruttare le CDN puoi utilizzare il plugin di caching che ti citavo precedentemente, vale a dire W3 Total Cache. Troverai, infatti, un’ampia sezione delle impostazioni dedicata a questo argomento.

Se hai molte visite dall’estero, invece, ti consiglio di utilizzare cloudflare, un servizio con CDN dislocate in tutto il globo. Questo servizio è a pagamento ma, credimi, ne vale davvero la pena.

Qui trovi una guida utile per ottimizzare al meglio cloudflare con WordPress.

Conclusioni

Se hai seguito tutti i miei consigli alla lettera, noterai un incremento delle prestazioni del tuo sito.
Se ne hai voglia lasciami pure un commento, magari allegando i test di velocità prima e dopo le ottimizzazioni. Se hai altre domande sono a disposizione per aiutarti.

Alla prossima.

Ti è piaciuto questo articolo? Votalo!
[voti: 1 - Media voto: 5]

About Author

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Profondamente amante della scrittura, mi piace condividere le mie conoscenze informatiche attraverso il mio sito web. Amo correre, guardare il mare e il buon cibo. Scopri di più nella mia