Negli ultimi 20 giorni ho concentrato tutte le mie energie per analizzare le varie metodiche utili a velocizzare WordPress. Di recente infatti Google ha reso noto che il tempo di caricamento di un sito verrà preso in considerazione dal motore di ricerca ai fini dell’indicizzazione. Ne deriva quindi che un sito più veloce sarà meglio indicizzato rispetto ad un altro che magari offre contenuti migliori ma presenta tempi di caricamento molto lunghi. Un’analisi recente ha inoltre mostrato come gli utenti tendono ad abbandonare quei siti il cui tempo di caricamento supera i 3 secondi. In questo articolo vi elencherò 10 cose da fare assolutamente per abbassare il tempo di caricamento delle pagine del vostro sito basandomi sulla mia esperienza personale e sui test effettuati negli ultimi giorni.
Velocizzare WordPress – Premessa
Per valutare le prestazioni del nostro sito possiamo fare affidamento a tre tools: Pingdom, GTmetrix e Google PageSpeed.
Prima di effettuare qualsiasi modifica vi consiglio di fare dei test preliminari e di annotarvi i punteggi riportati per confrontarli con quelli ottenuti post-modifica.
Ma vediamo nel dettaglio cosa è possibile fare per velocizzare wordpress:
1. Affidatevi ad un Hosting Provider Serio
Per fare un paragone diciamo che è possibile aumentare i cavalli di una macchina per farla andare più veloce ma se il motore è un 1.0 diesel sarà impossibile ottenere le prestazioni di una ferrari o di una lamborghini. Allo stesso modo è possibile velocizzare wordpress ma se il vostro sito è ospitato all’interno di un server con hardware datato o con tempi di latenza molto lunghi sarà difficile ottenere un netto miglioramento delle prestazioni. Per questo motivo il mio consiglio è quello di affidarvi sin da subito ad un hosting provider che ha messo su una struttura interamente dedicata per accogliere siti realizzati con wordpress. Uno di questi è SiteGround, il quale offre un servizio di Hosting WordPress professionale e sicuro caratterizzato dai bassi tempi di latenza e un sistema di cache avanzato ed esclusivo.
Per scoprire quali sono i vantaggi che derivano da un servizio di hosting di qualità come quello di SiteGround vi consiglio di dare uno sguardo a questo articolo.
2. Scegliete un tema leggero e professionale
Negli ultimi anni abbiamo assistito ad una vera e propria esplosione di temi grazie soprattutto all’ingresso sul mercato di Themeforest. Tuttavia se da una parte molti di questi temi possono sembrare molto belli e professionali dall’altra nascondono alcune insidie che potrebbero rendere molto difficile il processo di ottimizzazione. Di recente ho infatti sostituito il tema del mio sito dopo aver effettuato diversi test sul vecchio tema. Vi consiglio di procedere in questo modo:
- eseguite un test con Pingdom ed annotatevi le dimensioni della vostra pagina
- disattivate tutti i plugin tranne quelli che sono obbligatori per il corretto funzionamento del vostro tema (non tutti i temi ne possiedono ma in alcuni casi per esempio il pannello di gestione del tema viene installato tramite un plugin accessorio)
- effettuate un nuovo test con pingdom e analizzate le dimensioni della pagina
a questo punto saprete quanto pesa più o meno in termini di Kb o MB il vostro tema. Nel mio caso il tema da solo mi faceva registrare un page size di 1.2MB, davvero eccessivo se considerate che una volta attivati i plugin questi andranno ad abilitare ulteriore codice CSS e Javascript che appesentirà ulteriormente le vostre pagine. Inoltre analizzando i file JS inclusi nell’header mi sono reso conto che alcuni di questi facevano riferimento a funzioni che non utilizzavo e che non avrei mai utilizzato. Inizialmente ho provato ad eliminarli o a ridurne le dimensioni ma alla fine ho optato per una scelta più drastica: scegliere un tema che fosse semplice e veloce ma soprattuto scarno di codice javascript inutile.
Dopo un’attenta analisi la mia scelta è caduta sull’utilizzo del Genesis Framework il quale presenta tutte le caratteristiche di cui ho bisogno ad un costo davvero contenuto. Inoltre un framework mi consente illimitate possibilità di personalizzazione e potrà essere riutilizzato per la creazioni di altri temi per altri siti senza dover acquistare ulteriori temi.
Ovviamente il mio scopo non è quello di costringervi ad acquistare il Genesis Framework ma vorrei farvi capire come il tema possa fare la differenza. Basta guardare lo screnshot in alto per notare come sono passato da un page size di 1.2MB con plugin disattivati a un totale di circa 730Kb con tutti i plugin attivati.
3. Fate un uso limitato dei widget
Ebbene si, anche i widget vanno ad aumentare i tempi di caricamento delle nostre pagine, in particolar modo quelli relativi ai social network. Non ci credete? Provate ad inserie un box per il like della vostra pagina facebook e uno per la vostra pagina di Google+ ed effettuate un test con pigdom per valutare la differenza nei tempi di caricamento. Purtroppo questo tipo di widget, cosi come le Ads fi google adsense vanno a caricare numerosi file css e javascript appesantendo il tutto. Stesso discorso vale per i video di youtube per i quali invece vi consiglio di utilizzare il plugin Lazy Load for Videos nel caso in cui vogliate inserire un’anteprima del vostro ultimo video nella vostra sidebar.
Il mio consiglio per velocizzare wordpress è quello di limitarvi ad un massimo di 4/5 widget, dopotutto ci sono diversi studi che dimostrano come siano le aree meno cliccate di un sito web quindi evitate di riempirle di roba inutile e pesante.
4. Ottimizzate le vostre immagini
Un’errore che vedo commettere sempre più spesso è quello di utilizzare immagini di dimensioni superiori rispetto all’area in cui queste sono contenute costringendo l’utente a scaricare un file di grosse dimensioni quando invece ne sarebbe bastato uno pesante la metà o anche meno. Quindi in prima battuta il mio consiglio è quello di usare immagini la cui larghezza corrisponda a quella della vostra area in cui vengono visualizzati i contenuti, successivamente vi consiglio di installare un plugin che si occuperà di effettuare una compressione dell’immagine senza perdita di qualità. Su wpguida utilizzo con ottimi risultati il plugin ewww image optimizer per il quale prossimamente scriverò una guida dettagliata ma in linea di massima è molto semplice da configurare e non richiede chissà quali abilità tecniche.
5. Plugin? Si pochi ma buoni
Sinceramente, voglio dirvelo una volta e per tutte: smettetela di installare roba a caso! D’ora in avanti prima di installare un qualsiasi plugin ponetevi queste 3 semplici domande:
- È davvero utile?
- È aggiornato è compatibile con la mia versione di WordPress?
- Posso ottenere lo stesso risultato scrivendo io stesso una funzione php?
Se la risposta alle prime due domande è positiva e negativa alla terza allora procedete pure ma se siete in grado di programmare in php e non lo fate solo per pigrizia allora vorrà dire che ve la siete proprio cercata!
Già in diverse occasioni abbiamo visto come creare un plugin wordpress per il proprio sito all’interno del quale poter inserire numerose funzioni che possono risparmiarci l’installazione di un plugin come nel caso per esempio dei custom shortcodes.
In ogni caso dopo aver installato un plugin vi consiglio di valutare attentamente due cose:
- Il numero e la dimensione dei file css e javascript che vengono caricati
- L’impatto globale che il plugin ha sul vostro sito
Quest’ultimo può essere valutato mediante l’utilizzo di P3 (Plugin Performance Profiler) uno dei plugin essenziali per wordpress che effettuerà una scansione del vostro sito e vi mostrerà quanto ogni plugin incide sui tempi di caricamento delle vostre pagine.
Nel caso in cui un determinato plugin appesantisca pesantemente il vostro sito provatene uno alternativo o in caso contrario contattate lo sviluppatore per valutare se è possibile risolvere il problema in altro modo.
6. Usate i file Jquery ospitati da Google
Nonostante WordPress carichi due file nell’header contenenti le librerie jquery per velocizzare wordpress vi consiglio di optare per l’utilizzo di quelle ospitate dai server di google e questo per diverse ragioni:
- Aumento del numero di file scaricati in parallelo – i nostri browser sono in grado di scaricare contemporaneamente solo 4 file per un dato sito, per cui utilizzando le librerie di Google potremmo far si che queste vengano scaricate parallelamente ad altri 4 file che invece verranno scaricati dal nostro website.
- È possibile che siano già in cache – molti siti fanno ormai uso delle librerie di Google per cui con molta probabilità quando un utente giungerà sul nostro sito avrà già in cache questo file e non dovrà scaricarlo nuovamente.
- Tempo di download ridotto – questo file è già compresso e non necessita di una compressione on the fly.
- Riduce la banda utilizzata dal nostro server
- Download dal server più vicino – Google possiede server sparsi ad ogni angolo della terra per cui questo ci garantisce che il download del file avverrà dal server più vicino alla zona in cui è stato richiesto.
- Script sempre aggiornato.
Per sostituire le librerie jquery con quelle di google vi rimando all’apposita guida.
7. Spostate i file JS nel footer ed implementate il Minify
Spostando i file JS nel footer e applicando la compressione del codice (minify) per l’HTML, il CSS e il JS possiamo ridurre ulteriormente il tempo di caricamento delle nostre pagine.
Muovendo i file JS nel footer infatti il rendering della pagina verrà effettuato quasi immediatamente mentre il minify ci permetterà di raggruppare tutto il codice CSS all’interno di un unico file che grazie alla compressione risulterà privo di commenti e spazi risultando quindi più leggero.
Nella maggior parte dei casi consiglio di utilizzare Better WordPress Minify il quale a mio avviso svolge meglio questo compito rispetto a W3 Total Cache e presenta un’interfaccia attraverso la quale possiamo visualizzare tutti i file CSS e JS che vengono caricati nelle nostre pagine e scegliere se escluderli dal minify o se spostarli nel footer.
Nel caso in cui invece abbiate scelto un hosting wordpress come SiteGround vi consiglio di utilizzare il plugin Wp Rocket.
8. Ottimizzate il database
Un database pulito è più performante di conseguenza contribuirá in piccola parte a velocizzare WordPress. Sará pertanto necessario eseguire una manutenzione periodica del db la quale puó essere effettuata mediante l’utilizzo del plugin WP-Sweep.
Purtroppo questo genere di plugin non è in grado di ripulire la tabella wp_options all’interno della quale si trovano spesso dei resti di plugin che abbiamo testato e poi disinstallato o dati che vengono cachati temporanemente e che potete individuare perchè contrassegnati dalla parola _transient. Anche per questo motivo è sempre meglio testare i plugin su una copia in locale e apportare le modifiche alla versione live solo quando siamo perfettamente sicuri che quel plugin faccia al caso nostro.
Comunque nel caso in cui volessimo alleggerire il nostro database possiamo procedere all’eliminazione di tutti i record _transient collegandoci al phpmyadmin e lanciando la seguente query:
DELETE FROM `wp_options` WHERE `option_name` LIKE ('_transient_%');
o in alternativa possiamo selezionare uno ad uno i record da eliminare. In entrambi i casi vi consiglio vivamente di effettuare un backup del database onde evitare brutte sorprese.
È necessario ripulire il database anche quando si disinstalla un plugin perchè spesso purtroppo gli sviluppatori non aggiungono il codice necessario alla rimozione delle tababelle del database create dallo stesso plugin. Per maggiori approfondimenti vi consglio di dare uno sguardo alla guida su come disintallare un plugin in modo corretto.
9. Implementate la cache
Questo è un argomento che ho già affrontato diverse volte sul mio blog e spero vivamente che buona parte di chi legge stia già utilizzando un plugin per la cache. Riassumendo brevemente esistono 3 plugin principali per quanto riguarda il caching delle pagine: W3 Total Cache, Wp Super Cache e Wp-Rocket. La domanda che tutti si pongono è però: quale scegliere?
Ho fatto diversi test utilizzando un server dedicato, un VPS e un hosting condiviso quindi vi elenco le configurazioni grazie alle quali sono riuscito ad ottenere le migliori performance.
Server dedicato –> W3 Total Cache utilizzando la cache del disco in combinazione con memcache. Trovate maggiori dettagli sui parametri e la relativa configurazione nella “Guida W3 Total Cache“.
VPS –> Bwp Minify + Wp Super Cache. Con questa configurazione sono riuscito ad ottenere i risultati migliori su un VPS che avevo acquistato su ovh
WordPress Hosting Siteground –> 3 livelli di Cache attiva + Wp Rocket. Non ci crederete ma con questa configurazione sono riuscito ad ottenere delle performance che si avvicinano tantissimo a quelle del server dedicato. Wp Rocket è un plugin a pagamento che è stato di recente ottimizzato per lavorare in combinazione con il sistema di cache wordpress sviluppato da SiteGround e a differenza dei plugin di caching gratuiti offre numerose funzionalità extra, se state pensando ad una soluzione definitiva e già pienamente testata vi consiglio di optare per questa soluzione che è la migliore anche dal punto di vista economico.
Naturalmente i setup sopra mostrati sono frutto della mia personale esperienza per cui soprattutto nel caso di VPS e Server Dedicati le prestazioni potrebbero differire in relazione anche all’hardware che avete acquistato.
10. Usate un CDN per i file statici
Una delle cose che vi farà fare il salto di qualità nel velocizzare wordpress è quella di utilizzare un CDN (Conent delivery network). Grazie a questo sistema infatti i file statici come le immagini, i file CSS e i JS verranno replicati all’interno di una rete di server la cui caratteristica principale è quella di avere numerosi punti di accesso distribuiti nel pianeta per cui quando un utente visiterà il nostro sito riceverà questi file dal server che si trova più vicino alla sua posizione.
Inoltre, dal momento che, come abbiamo già detto in precedenza i nostri browser possono scaricare solo 4 file simultaneamente per un determinato dominio, l’utilizzo di un CDN incrementerà la velocità di caricamento permettendo il download in parallelo dei file statici. Uno dei limiti dei CDN in passato erano i costi molto elevati, ma in seguito ha fatto la sua comparsa sul mercato un’azienda: MaxCDN.
Con MaxCDN bastano 9$ al mese per avere accesso ad un piano che offre 100GB mensili di trasferimento e credetemi, se siete agli inizi 100GB sono più che sufficienti.
E voi avete qualche altro trucchetto per velocizzare wordpress? Scrivetelo nei commenti!