Velocizzare WordPress senza plugin

velocizzare wordpress

La velocità di caricamento di una pagina è sicuramente un fattore di ranking, Googlebot ragiona come un essere umano, se un sito si apre troppo lentamente, il visitatore probabilmente lo chiuderà per passare oltre, allo stesso modo, lo spider tenderà a favorire un website più performante.

Quindi, se ancora non hai posto in essere il tuo blog, e sei alla ricerca di un hosting, non posso che consigliarti Siteground.

Ottimo servizio, server veloci, pannello di controllo con gestione totale del sito, sicuramente uno dei migliori hosting che ci siano sul mercato.

Detto questo, vediamo come possiamo aumentare le performance di WordPress, cominciando a fare dei test attraverso PageSpeed Insights. Nel campo di testo inseriamo l’url della pagina che vogliamo monitorare e clicchiamo su analizza. Il tool ci mostrerà dei punteggi, sia per la versione desktop che per quella mobile, con dei suggerimenti per migliorare la situazione.

tool test velocità sito

Limitare il numero di plugin

I plugin sono utili, ma come possiamo facilmente immaginare, rallentano notevolmente WordPress, per cui il consiglio che ti posso dare è cercare di limitarli al massimo. Scegli quelli che sono veramente necessari e se dobbiamo aggiungere delle funzionalità, verifichiamo se esiste la possibilità di realizzare manualmente, piuttosto che una soluzione automatica tramite plugin. Anzi, sappi che ogni volta che installi un plugin, spesso e volentieri, questo lascia delle tracce nel database, che non vengono rimosse con la disinstallazione, con notevole influenza sul caricamento del blog. A tal proposito ti segnalo Clean Options, che ci mostra tutte le dipendenze tra i plugin e il database, di modo da fare una bella pulizia su MySql.

Prima di procedere, facciamo un backup del database, dopodiché lanciamo il plugin. Alcune delle voci ti suoneranno familiari, mi riferisco a estensioni che hai installato in passato, che se non sono più presenti puoi tranquillamente flaggare la casella in corrispondenza della linea interessata, altrimenti se hai dei dubbi, per ogni opzione c’è il comodo link per cercare su Google di che cosa si tratti. Ovviamente non si troverà tutto, per cui se hai dei dubbi, lascia stare, altrimenti si rischia di compromettere l’intero blog.

pulizia database plugin disinstallati

Compressione immagini

Le immagini pesano, e anche parecchio, per cui, come per i plugin, dobbiamo cercare di limitarle al massimo, sia come numero e sia come peso.

Ho visto delle cose che voi umani non potete neanche immaginare, foto ad alta definizione, caricate di sana pianta su WordPress, con pagine che arrivavano a pesare fino a 25 megabyte! Se vogliamo velocizzare WordPress, dobbiamo trovare un compromesso tra qualità delle immagini e il relativo peso. A tal proposito ti consiglio un programma gratuito, che non necessita neanche dell’installazione, Caesium, veramente una bella risorsa.

Prima di caricare le immagini nel tuo articolo, salvale in una cartella e apri Caesium, vai su Strumenti, poi su Opzioni e infine su Compressione. Flagghiamo la voce relativa all’impostazione “Salta se la dimensione di output è superiore all’originale” e clicchiamo su Ok.

programma compressione immagini

Dalla schermata principale del programma clicchiamo sull’icona Aggiungi File e selezioniamo le immagini che volgiamo comprimere. Nelle opzioni di compressione, impostiamo il formato su Input e scegliamo la qualità dell’immagine compressa, io di solito la setto su 80%. Se vogliamo anche ridimensionare le immagini, flagghiamo i campi ridimensiona e mantieni il rapporto. Scegliamo poi la cartella di destinazione per le nuovi immagini, possiamo anche impostare la stessa cartella di origine, in questo le immagini compresse avranno un suffisso per distinguerle dall’originale.

Minify CSS e Javascript

Per minify s’intende la possibilità di restringere la lunghezza di un codice senza alternarne le funzionalità. Un blocco di codice meno lungo peserà di peso, con altri benefici sulla velocità di caricamento del blog. C’è da dire che molti plugin compiono questa operazione, ma noi stiamo cercando di ridurre il peso della piattaforma, per cui ci affideremo a una soluzione, con lo sconveniente che a ogni aggiornamento del template che stiamo usando, dovremo ripetere l’operazione.

Colleghiamoci a questo sito http://csscompressor.com/ e con un’altra scheda apriamo l’editor del tema utilizzato, selezioniamo il file style.css (dovrebbe aprirsi automaticamente una volta avviato l’editor) e selezioniamo tutto il codice CSS dopo la fine del blocco di commenti introduttivo.

Incolliamo il codice copiato nell’area di testo di CSS compressor, impostiamo la voce Compression Level su Highest e clicchiamo su Compress. Copiamo l’output generato e incolliamo nell’editor del tema di WordPress e clicchiamo su Salva.

Anche molti plugin hanno il loro foglio di stile, quindi la soluzione migliore è fare un backup del blog sul disco, seguire i suggerimenti di Google Speed Insights, che c’indica quali sono i fogli di stile più pesanti e comprimerli attraverso il sito linkato poco fa. Dopo di che, sostituire il file originale con quello ottimizzato.

Questa operazione si può effettuare anche per comprimere i file in javascript, stando però un po’ più attenti, magari facendo una compressione alla volta e testando il corretto funzionamento di tutte le funzioni del blog, in quanto può capitare che un’eccessiva compressione vada a ledere il corretto funzionamento dello script. Il sito per la compressione di Javascript è il seguente : http://jscompress.com/

Modifiche al file .htaccess

Il file .htaccess è un semplice file di testo che contiene delle direttive per Apache, possiamo editarlo con il blocco di note di Windows, per velocizzare in maniera più importante il sito internet. Scarichiamo il file originale dal server con Filezilla e apriamo con Notepad.

Questo è il codice originale di un file .htaccess senza alcuna modifica :

Ok, cominciamo abilitando la compressione dei dati di risposta, usando il modulo deflate! Inseriamo all’inizio del file .htaccess il seguente blocco di codice:

Ora abilitiamo la memorizzazione delle risorse statiche nella cache del browser, di modo da far risparmiare tempo a chi ha già visitato il sito in passato, di modo che queste risorse non siano caricate dal server, ma dal disco del visitatore.

Limitare le risorse esterne

Purtroppo, sia la compressione che la cache, non hanno effetto sulle risorse esterne, come possono essere contatori di visite, codici di Google Adsense, pulsanti per la condivisione sui social network, ragion per cui bisogna stare attenti a limitare queste implementazioni a ciò che è realmente importante. Come detto più volte, si deve trovare un compromesso tra servizi disponibili e rendimento complessivo.

Evitare Javascript e CSS Above the fold

Cosa significa? Generalmente i file in Javascript e i fogli di stile, vengono inseriti nella pagina, inserendo il codice d’incorporamento all’interno del tag <head>. Questa è la regola standard, ma quando le risorse cominciano a essere molte, il browser non visualizza i contenuti che interessano ai lettori, prima di aver completato il caricamento di tutto che viene strutturato prima.

La soluzione che ho adottato io è spostare la maggior parte dei CSS e JS alla fine della pagina, prima del tag di chiusura </body>, lasciando all’interno di <head>, solo il foglio di stile principale e il core di JQuery.

Attraverso questa funzione, che dovrete inserite nel file functions.php del vostro tema (in locale, perchè si tratta di un test), possiamo scoprire quali sono le risorse che sono caricate da WordPress:

Con Firebug o la relativa estensione di Chrome, andate a visualizzare nel sorgente della pagina dove sono incorporate questi file, se si trovano all’interno di <head> li andremo a disattivare per poi inserirli nel footer, attraverso le funzioni native di WordPress.

Facciamo dei test, disattiviamo una risorsa alla volta e vediamo se tutto il blog funziona come prima, sia su desktop che mobile, se il test ha esitivo positivo andiamo avanti! Io ho creato due array, le cui le chiavi dei singoli elementi sono gli handles mentre i valori sono i relativi percorsi.

Mentre il codice per fare l’operazione vera e propria è il seguente:

Prova, sperimenta, rigorosomante su un server in locale, poi quando i risultati sono soddisfacenti passa in remoto, se hai qualche problema, contattati lasciando un commento di seguito, se posso aiutarti lo faccio volentieri.

Spostare jQuery nel footer

Sinceramente la soluzione precedente non mi hai mai convinto. Ritengo inoltre che le indicazioni di Google page speed vadano un po’ prese con le pinze. Con il tempo sono arrivato ad una soluzione di compromesso, ossia mantenere i file separati, spostando l’embed di jQuery dall’header al footer.

Perché solo jQuery? Perché si tratta di una libreria molto pesante e spostandola nel footer, tutte le sue dipendenze lo seguiranno (ovviamente dovremmo ripetere il processo per ogni estensione), con un gran vantaggio sui tempi di caricamento.

Apriamo il file functions.php e scriviamo la nostra funzione personalizzata e relativa action su hook wp_enqueue_scripts

Quando poi dovremo includere una dipendenza di jQuery, ci sarà da ricordarsi che questa dovrà seguire la libreria nel footer. Nel caso di una risorsa sviluppata da terzi, dovremo anche “deregistrare” il file js e includerlo nuovamente nel footer.

Un esempio per questa situazione potrebbe essere il seguente

Come vediamo ho operato sempre all’interno della funzione move_script, e entro il blocco condizionale che esclude il pannello di amministrazione. Nel terzo parametro della funzione wp_register_script ho specificato la dipendenza del file, indicando l’handle di jQuery. In questo modo tutto funzionerà perfettamente perché il file verrà caricato dopo la libreria genitore.

W3 Total Cache

Mi rendo pefettamente conto che tutte queste implementazioni manuali richiedono una certa dimestichezza e che non tutti possono essere in grado di metterci le mani correttamente, quindi mi sembra doveroso consigliare un’alternativa, il plugin W3 Total Cache, che fa esattemente quanto descritto in maniera più o meno automatica.

Si tratta di un’estensione molto potente, che ha diversi parametri da configurare, ma sulla rete sono presenti diversi tutorial che mostrano come gestirlo. Io l’ho usato per un pò, ma come ho detto in precedenza, il percorso ottimale prevede di limitare il numero dei plugins a ciò che è realmente necessario e visto che sono in grado di gestire manualmente queste impostazioni ho preferito questo metodo alternativo.

2 opinioni su Velocizzare WordPress senza plugin

  1. 3 anni fa

    Hai ragione le procedure sono un pò elaborate e richiedono competenza, per chi come me ne ha poca in fatto di linguaggi e codici, W3 total cache è l’alternativa migliore, se impostato al meglio va benissimo per rendere il blog molto più veloce.

  2. Antonio Flora
    1 anno fa

    Complimenti ottimo articolo posso chiederti di darmi una mano per spostare manualmente il css nel footer?

Lascia un commento...è gratis...

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