È giunta l’ora di ottimizzare wordpress per migliorare le performance del tuo sito e velocizzare i tempi di caricamento delle sue risorse? Bene! Immaginiamo questo scenario.
Il tuo fiammante sito WordPress è online. I contenuti sono aggiornati e revisionati, l’aspetto è fico come lo avevi immaginato. Ma che succede quando i tuoi utenti vi si collegano da smartphone? Oddio, come mai le pagine si caricano in più di 6 secondi e pesano diversi MegaByte?
Vediamo. Probabilmente ti sei affidato ad un tema multipurpose, hai usato una tonnellata di plugin per le funzionalità e ti sei dimenticato di ridimensionare e comprimere le immagini.
Beh, tranquillo. Sappi che questi sono alcuni degli errori più comunemente commessi quando si sviluppa un sito in wordpress. Ognuno di questi è risolvibile, se seguirai questa pratica guida per velocizzare il tuo sito WordPress.
Perché dovresti considerare di ottimizzare WordPress
Cerchiamo prima di fare un po’ di chiarezza. Perché mai dovresti dedicare del tempo e degli sforzi per migliorare i tempi di caricamento del tuo sito web? Molto semplice. Velocità vuol dire maggior numero di conversioni. Le performance del tuo sito sono direttamente proporzionali ai tempi di permanenza degli utenti, che altrimenti sparirebbero spazientiti dopo pochi secondi.
Gli ultimi trend del web mettono al centro l’utente, eliminando per quanto possibile i fronzoli e gli esercizi di stile.
Anche in termini si SEO la velocità viene indicata come fattore principale di ranking a partire dal 2010. Pertanto non è affatto un segreto che un sito web più veloce possa portare ad un migliore posizionamento.
Come spiega Jeremy Wagner, quando un sito inizia a caricarsi, c’è un periodo di tempo in cui gli utenti attendono che vengano visualizzati i contenuti. Prima di allora è inutile anche parlare di User Experience, perché non c’è proprio un bel niente da navigare!
Il nostro compito in questo articolo è cercare di ridurre questa latenza all’osso. Per ottenere un risultato degno di nota, dobbiamo innanzitutto selezionare degli strumenti per effettuare i nostri test.
Come effettuare test di velocità sul tuo sito wordpress
La prima cosa che faccio quando un mio cliente mi chiede di velocizzare il suo sito wordpress è senza dubbio un test con i miei tool di analisi preferiti.
Questo mi serve per diversi motivi:
- Capire quali sono i colli di bottiglia nei tempi di caricamento del sito;
- Verificare di che tipo di intervento si tratterà. Mi è capitato più di una volta di dover rinunciare ad un semplice intervento di ottimizzazione WordPress. Perché? Beh, quando un lavoro è stato impostato male dal principio, c’è ben poco da fare se non mettere delle toppe qui e là. In casi come questo preferisco sempre parlare francamente con il nostro committente e proporgli piuttosto di ricostruire tutto con criteri completamente distinti.
- Condurre test A/B: se uso questo plugin al posto dell’altro, ottengo miglioramenti? Se sì, in che misura? Ho attivato la caching del browser. Che incremento concreto ho delle prestazioni rispetto a prima?
Misurare questi risultati ti aiuta a selezionare le tue best practice per aggiustare via via il tiro e rendere il tuo sito una scheggia.
Per effettuare un test di velocità ti basta copiare per interno la URL della pagina web che ti interessa monitorare e incollarla nell’input di uno degli strumenti che sto per elencare. I tool che mi trovo ad usare quasi tutti i giorni sono questi:
Pingdom
Si presenta con un’interfaccia molto moderna e chiara. È uno strumento davvero completo, che può esserti d’aiuto in molte situazioni. Puoi usarlo semplicemente per verificare i tempi di caricamento di una pagina web (ed eventualmente per sbirciare le performance dei tuoi competitor).
Oppure puoi addentrarti in un’analisi più approfondita sfruttando la sua furbissima tabella, ordinabile secondo diversi criteri, per capire ad esempio da dove provengono alcune richieste HTTP, o quali sono le risorse più onerose in termini di peso.
Il mio consiglio generale è quello di lanciare un test almeno 2/3 volte prima che possa essere del tutto attendibile. Occhio solo ad aspettare 30 secondi tra un test e l’altro, perché pare sia il tempo minimo.
Inoltre è importante, in base alla strategia generale del tuo business, lanciare il test da una località sensata. Ad esempio se possediamo una pizzeria in centro a Genova e facciamo attività di local SEO solo in italiano, non avrebbe nessun senso lanciare un test da Vancouver. Se lavoriamo in Italia possiamo tranquillamente selezionare Francoforte.
GTmetrix
Un altro infallibile alleato è GTMetrix, che consente con un account del tutto gratuito di fare test comparativi tra pagine web, monitorare le variazioni nel tempo delle nostre performance, oltre a una serie di utili consigli.
Anche tramite questo tool è possibile addentrarsi nei dettagli specifici su cui stiamo indagando.
PageSpeed Insights
Il celebre tool messo a disposizione da Google, a differenza dei due precedenti, offre una marea di utili spunti per ottimizzare e migliorare le prestazioni del tuo sito web WordPress. Si presenta quasi come la bibbia del web developer, perché si sa, Google ormai detta le regole della presenza online.
Il mio consiglio è quello di non impazzire a cercare di ottenere dei punteggi altissimi perché quello che conta davvero è il tempo di attesa utile affinché la nostra pagina web sia completamente caricata.
Ottimizzare sito WordPress: La lista della spesa
Bene, fino abbiamo visto come partire da un’analisi dettagliata, prima di immergerci nel lavoro meticoloso che ci porterà ad avere finalmente un sito web performante.
Ricordiamo prima di tutto che dovremmo sganciarci dall’idea che la semplice attivazione di svariati plugin possa risolvere i nostri problemi.
Se dovessi incontrare qualsiasi tipo di difficoltà non esitare a commentare l’articolo o a contattarmi personalmente!
Vediamo quindi insieme quali sono gli step per giungere a un buon risultato.
Ottimizzare sito WordPress
- Scegli un buon provider di Hosting
Un buon provider è fondamentale per evitare di incappare in spiacevoli situazioni tecniche. Il restore di un backup, le piattaforme di staging, o un pannello amministrativo come cPanel non sono caratteristiche da dare per scontate quando si tratta di hosting.
Esistono una miriade di soluzioni sul web, più o meno note. Alcune di queste si presentano come pacchetti pronti all’uso per il nostro amato CMS. L’importante a mio avviso è che tu possa contare su un supporto live h24 e su tecnologie all’avanguardia: server in buone condizioni, versioni PHP e mySQL aggiornate e soprattutto la possibilità di sfruttare la cache lato server.
Se non sei alle prime armi il mio consiglio è quello di preferire un Virtual Private Server (VPS) con indirizzo IP dedicato e procedere in autonomia alla sua configurazione. Sicuramente le performance saranno di gran lunga superiori rispetto ad un hosting condiviso.
I nostri server sono su Keliweb (no, non è un link di affiliate marketing), azienda italiana che si comporta molto bene in caso di apertura ticket e offre un ottimo rapporto performance/prezzo. - Usa un buon tema o framework lightweight per il tuo sito
Il tuo tema è il responsabile non solo della veste grafica che il tuo sito indosserà, ma anche delle sue performance. È il tema che caricherà i principali script utili al suo funzionamento, oltre a delineare la struttura HTML delle pagine, sia in chiave SEO che di usabilità.
Molti temi reperibili sui più famosi market online (vedi Envato e simili) potranno anche apparirti strabilianti, ma ahimé spesso e volentieri non sono affatto ottimizzati per la velocità.
Punta su un tema lightweight e usalo come ossatura per il tuo sito. Parti dagli elementi di stile base e successivamente personalizza quelle parti che necessitano di un plus.
Io personalmente mi sono affidato a Generatepress, con il quale costruisco temi figli completamente customizzati in base al cliente con cui mi interfaccio. È davvero strepitoso in termini di ottimizzazione performance e developer friendly.
Ne esistono comunque molti altri validi, come Astra, Ocean WP ecc…
Provane qualcuno, conduci qualche test e non lasciarti affascinare dagli effetti speciali.
- Comprimi le immagini e tagliale nel formato giusto
Molte volte mi è capitato di accedere ad una dashboard di WordPress e trovare trai media file di 3MB, con una risoluzione di 5000x3000px.
Occhio!
È molto importante sul web servire risorse calibrando una buona compressione, in modo da consentire anche a chi ha una connessione lenta di scaricare i tuoi media. Inoltre non è necessario caricare file di risoluzione altissima, quando la massima estensione su una nostra pagina web sarà di 1000×1000.
Sull’ottimizzazione delle immagini potrebbe aprirsi un capitolo a sé, ma per me vige la regola che sopra i 150kb non si va!
Potresti usare un tool come Optimizilla, a mio avviso molto ben fatto, in accoppiata con un semplice software di photo editing per ridurre o croppare le immagini (Gimp, Photoshop o simili).
Mi raccomando: trova anche il formato giusto per le tue immagini. Si tratta di una fotografia? Beh, il JPEG sarà perfetto! È un’illustrazione vettoriale? Prova l’SVG! - Utilizza il lazy load
Mai sentito parlarne? Il lazy load è un ottimo metodo per caricare i file media solo quando l’utente si trova con l’area visibile del proprio schermo in loro prossimità.
Questo, nel caso le tue pagine o articoli fossero colmi di immagini o video, aiuta moltissimo a sveltire i tempi di caricamento iniziali. Le immagini verranno quindi sostituite inizialmente con un segnaposto (in genere uno spinner di caricamento) o faranno il loro ingresso con un piacevole effetto di fade-in.
Io mi affido spesso ad a3 Lazy Load, la cui configurazione è davvero semplice. Ecco la mia da cui puoi prendere spunto. Ho creato una classe CSS, che utilizzo per alcune immagini il cui caricamento voglio avvenga subito.
- Sfrutta una Content Delivery Network (CDN)
La content delivery network è una vera e propria rete di distribuzione, che, a partire dalla posizione fisica del tuo host, crea una serie di nodi sparsi per il pianeta, in modo da servire alla massima velocità i contenuti ai tuoi utenti, che essi si connettano dall’Italia o dagli Stati Uniti.
Quindi la CDN ha il compito di diminuire la latenza dovuta alla distanza dall’host e il client, sfruttando molteplici server e attivando sempre quello più vicino all’utente.
La CDN porta anche numerosi altri vantaggi, che vengono descritti in maniera più che esaustiva da Kinsta.
Ci sono diversi provider che offrono servizi di CDN, la maggior parte dei quali offre anche un periodo gratuito di prova. Il mio consiglio è come sempre quello di provare e fare numerosi test per trovare quella più adatta alle tue esigenze.
Tendenzialmente ognuno di essi propone il suo procedimento per l’implementazione su un’installazione WordPress (spesso anche con plugin proprietari come fa Cloudflare).
In linea di massima il metodo universale che ho testato personalmente è quello di usare CDN enabler con la configurazione che trovi qui in basso.
Nel primo campo dovrai inserire l’URL fornito dal provider. Nel secondo puoi scegliere quali cartelle includere e nel terzo invece escludere formati, file o intere cartelle.
- Minimizza Javascript, HTML e CSS
- Sfrutta la Cache del browser e del server
- Abilita la compressione GZIP
- Ottimizza il database WordPress
- Carica gli script in maniera asincrona
