Ottimizzare un sito web fatto con WordPress

In questi ultimi anni, abbiamo assistito ad una vera e propria crescita di siti web creati con WordPress. Si sà, questo sistema di gestione dei contenuti (CMS) è semplice da usare, e gestisce tutto in modo autonomo, magari con qualche aiuto da plugin completamente gratuiti messi a disposizione dagli sviluppatori.

Non è l’unico, non è il primo e non sarà neanche l’ultimo. Ci sono vari CMS che fanno comunque egregiamente il loro lavoro. Un esempio? Magento. Un CMS che permette a tutti di creare un e-commerce con mille e più prodotti. Poi abbiamo Prestashop, un CMS che potremo definire “la versione che permette di gestire e-commerce di piccole dimensioni“.

L’unico problema di questi “gestionali” è che non si ottimizzano da soli, quindi o chiamiamo un professionista che, dietro corrispettivo in denaro, lo ottimizzerà per noi… Oppure, ci imbocchiamo le maniche e lo ottimizziamo da soli, facendo molta attenzione a fare un backup completo di tutto il sito web ogni qual volta facciamo una modifica.

.htaccess e Robots.txt su WordPress

Prima di partire con l’analisi dei problemi relativi al nostro sito web, ci tengo a spiegare per bene due file che utilizzeremo nell’ottimizzazione e nella messa in sicurezza del nostro sito web. Il primo è “.htaccess“, un file di testo che permette la configurazione di un server con Apache. Per ulteriori informazioni, ti invito a leggere l’articolo di HTML.it inerente proprio a questo file.

Il secondo, invece, serve per i “bot“, spider che visitano il tuo sito web alla ricerca di pagine da indicizzare (es. GoogleBot). È sempre un file di testo, solo che contiene informazioni non utili a te ne tanto meno ai tuoi lettori, ma solo e soltanto ai bot e dice a loro cosa possono indicizzare, cosa no, cosa possono seguire e cosa no. Un esempio di Robots.txt è quello di AuxtinTech, visibile all’indirizzo www.auxtintech.it/robots.txt.

Potete controllare tutti i robots.txt di tutti i siti web che conoscete. A differenza del file htaccess, che non è visibile digitando “nomesito.it/htaccess” (se è visibile, avete un grosso problema), il robots.txt è visibile a tutti. I due file sono presenti nella cartella principale del vostro sito web. Se non li trovate, potete crearli voi stessi con un qualsiasi editor di testo.

Analisi dei problemi da ottimizzare

Prima di partire con l’ottimizzazione, avremo bisogno di capire cosa ottimizzare e dove concentrarci. Potremo usare, ad esempio, con GTMetrix o Google PageSpeed Insights, un tool gratuito made in Google che analizzerà il nostro sito web, sia la versione mobile (se ne avete una differente o un tema responsive), sia la versione Desktop e vi rilascerà un report diviso per dispositivo.

I principali problemi di questo strumento, è che per quanto noi possiamo ottimizzare il nostro sito web, troverà sempre problemi; trova addirittura problemi analizzando l’URL “google.it”, figuratevi col vostro. Quindi non state lì a cercare di ottimizzare tutto ciò che vi dice, ma concentriamoci su cosa è davvero importante. Tranquilli, vi spiegherò passo passo cosa interessa davvero.

Una volta analizzato, segniamoci tutti i problemi riscontrati e andiamo avanti.

“Abilita la compressione in .htaccess”

Una delle voci che sicuramente avrete trovato nel report è “attiva la compressione“. Questa funzione è molto utile per comprimere il contenuto del vostro sito web e renderlo più leggero, facendo così scaricare meno byte ai vostri lettori (e si sà, i nostri provider danno GigaByte limitati nelle loro offerte mobile).

Per abilitare la compressione, basta aprire il file .htaccess ed incollarvi il seguente codice:

In alternativa, in caso mancasse il file, potete crearlo o a mano (entrando via FTP nel vostro server) oppure usando Yoast SEO (nel caso in cui usaste questo plugin per la SEO).

Attiva la cache

La cache non è altro che una porzione piccola di memoria, gestita dalla CPU (Processore, un componente essenziale di un Computer) del server, estrememamente veloce. Serve soprattutto per i siti web con grandi quantità di traffico, quindi con una mole di lavoro enorme. Se avete un sito web appena aperto o con meno di 300 visite giornaliere, non abilitatela. In caso contrario, per abilitarla, basta aprire di nuovo il file .htaccess ed incollarvi questo codice[1]:

Spieghiamolo brevemente:

• Tutti i file con estensione flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav scadono dopo 1 anno, quindi tra 1 anno verranno aggiornati (queste sono estensioni di file che non si aggiornano quasi mai, in caso, potete anche disabilitare la cache per i file con queste estensioni; si tratta comunque di video o audio).
• Tutti i file con estensione jpg|jpeg|png|gif|swf si aggiornano ogni settimana. Sono estensioni di file immagini, non vi è un bisogno costante di aggiornamento, salvo blog di ricette e simili.
• Tutti i file con estensione txt|xml|js|css si aggiornano ogni 3 ore. Questi file sono quelli relativi a htaccess, robots.txt, javascript (jquery e simili), xml (per la sitemap dinamica, ad esempio) e CSS (i fogli di stile che rendono carino e coccoloso il vostro sito web).

Ovviamente, potrete modificare la durata dei file in cache, modificando i numeri dopo “A” (A10800). Es. Voglio che i file immagini si aggiornino ogni 3 mesi. La durata è espressa in secondi, quindi 3 mesi equivalgono a 1,814,400 secondi. Quindi scriveremo “A1814400”. Per un calcolo rapido, ho integrato in questo articolo questo fantastico tool:

Altri accorgimenti

Se avete analizzato il vostro sito web con GTMetrix, vi troverete di fronte ad ulteriori “problemi”. Tranquilli, già abilitando la compressione Gzip, avrete risolto la maggior parte dei vostri problemi. Abilitando la cache, in caso di sito enorme, avete risolto l’altra parte dei vostri problemi. Se siete però abbastanza pignoli, ecco alcuni accorgimenti utili nel caso in cui vogliate fornire il sito web più ottimizzato possibile ai vostri lettori e, perché no, possibili clienti.

Minify Javascript, CSS & HTML

La minimizzazione o Minify, non è altro che il togliere spazio al codice o eliminare parti di codice che non sono davvero utili al sito web. Solitamente, quando si parla di codici, ogni programmatore ha un suo ordine per risolvere possibili problemi nel minor tempo possibile. Facendo ciò, ovviamente, deve creare spazio tra una funzione e l’altra, quindi ogni codice avrà una lunghezza di almeno il 60% in più, con un aumento di circa il 20% di peso di un file.

Molti servizi, chiedono di togliere spazi dal codice per leggerlo più velocemente e per renderlo “usabile” ai browser. Personalmente non consiglierei mai di minimizzare questi file perché:

1. Potrebbero portare a problemi di visualizzazione;
2. Potrebbero bloccare il sito web, in quanto alcune funzioni, insieme, non sono “compatibili” (perdonatemi developers, non mi veniva altro in mente);
3. Potrebbero creare non pochi problemi ad alcune funzionalità del tema.

È comunque una cosa importante da fare, alla fine riduce notevolmente la grandezza della pagina, aumentando così la velocità di caricamento e facendo scaricare meno byte a chi ha una connessione mobile.

Quindi, detto ciò, fate davvero tanta attenzione nel minimizzare il codice e fate un backup di TUTTI i file del sito web.

Per minimizzare i file, ci sono due metodi:

Metodo 1: Tool online: CSS Minifier, Minify CSS, Javascript Compressor, Minify your Javascript;

Metodo 2: Installare il plugin Autoptimize. Molto semplice da usare.

Serve scaled images

In questo caso si chiede di caricare immagini già scalate. Quindi non modificate via HTML. In questo caso, se non avete ancora scelto un tema per WordPress, vi consiglio di sceglierne uno che abbia già questa funzione integrata nel pannello, come quelli di WPgalaxy, ad esempio. Nel caso in cui abbiate già un tema, come son sicuro che sia, non bisogna fare altro che caricare le immagini nella galleria di WordPress in modo che siano più leggere e piccole possibili.

Al posto, quindi, di usare immagini 4029×6987, ne userete di grandezza variabile da 400×300 a 1024×720 (non più grandi di così). In alternativa, potrete usare il plugin EWWW image Optimizer. Un plugin davvero utile che riduce la grandezza delle immagini e le ottimizza al meglio, senza perdere la qualità delle stesse. Ovviamente non risolverete il problema delle immagini scalate, ma almeno le ottimizzate al meglio!

E il file Robots.txt?

Tranquilli. Non mi sono dimenticato di questo file. Con questo file non aggiungerete nulla all’ottimizzazione se non a lato sicurezza. Ecco cosa potete fare:

Anzitutto Bloccare l’indicizzazione della cartella “wp-admin” del vostro sito in wordpress in quanto, questa cartella, contiene tutti i file del back-end e non vogliamo di certo far indicizzare file importanti, no? Anche perché un malintenzionato potrebbe fare di tutto… ma questo ne parleremo nel prossimo articolo (work in progress).

Per fare ciò, aprite il file “robots.txt” presente nella vostra root (se non c’è, ve lo create voi con un qualsiasi editor di testo o con Yoast SEO) ed aggiungete questo codice (solitamente WordPress lo crea automaticamente, quindi dovreste già avere questo codice, ma, in caso…):

Questa è la configurazione di base per questo file. Approfondirò il tema “sicurezza” nel prossimo articolo.

Conclusioni

Spero che questo mio nuovo articolo possa tornarti utile. In caso di problemi, non esitare a contattarmi o commentare qui sotto. Per rimanere aggiornato sui miei futuri articoli, basta che ti iscrivi alla mia newsletter qui sotto.  Grazie per il tempo dedicatomi.

Potrebbe interessarti anche: Come ottimizzare il database di WordPress