Velocizzare un Sito WordPress Lento

Come Velocizzare al Massimo il Sito WordPress

In questo articolo ti spiegherò come velocizzare WordPress con una guida completa passo-passo completa di case study.

Sto infatti per mostrarti i risultati che ho ottenuto su questo blog eseguendo proprio le istruzioni che sto per darti.

Google conosce bene le performance, ed è pertanto opportuno tenere questo fattore in considerazione, soprattutto se il tuo è lento.

Velocizzare un WordPress (anche Woocommerce) porta a un piccolo miglioramento del ranking e del posizionamento, in quanto è un fattore di ranking.

E’ un passaggio che implemento per ogni progetto al quale collaboro. Oggi voglio quindi proporti un case study che ha come oggetto di studio JFactor.it stesso: ti mostro come aumentare le prestazioni passo dopo passo.

Chi mi segue da più tempo sa che JFactor.it è stato restaurato graficamente pochi mesi fa, a causa di una necessaria riorganizzazione dei contenuti e della struttura.

Ho scelto, come tema grafico, Brixton, che purtroppo peccava molto. Insomma: per quanto bello esteticamente, a livello di codice lasciava alquanto a desiderare.

Ho deciso di porvi rimedio, e mi sono affidato alla mia amica Pamela, che ha eseguito l’analisi e apportato le correzioni necessarie.

Lascio allora la parola a lei, buona lettura!

Buongiorno a tutti! Mi chiamo Pamela Guccione, sono titolare dell’azienda MelaGraphic, e mi occupo con grande passione della realizzazione, dalla creazione del design fino allo sviluppo vero e proprio.

Oggi vi racconto come ho lavorato su JFactor.it, blog creato con il CMS. In seguito al restyling e alla riorganizzazione dei contenuti del proprio blog, Filippo si è reso conto che le prestazione di JFactor.it erano piuttosto scarse.

Mi ha quindi contattata chiedendomi di ottimizzarne il codice e i contenuti al fine di migliorare il caricamento.

Mi presento: sono Filippo Jatta, sono consulente dal 2007.

Mi sono laureato e specializzato nel 2007 in Economia, Organizzazione e Sistemi Informativi presso l’Università Bocconi di Milano.

Analisi Preliminare del Sito Web: PageSpeed Insights, Core Web Vitals e GTMetrix

Per migliorare le prestazioni e comprendere quale fosse effettivamente la gravità della situazione e quali fossero le cause, ho effettuato un’analisi preventiva utilizzando due tool disponibili gratuitamente sul web.

I primi sono Core Web Vitals e PageSpeed Insights. Questi semplicissimi strumenti valutano le performance di caricamento di una pagina web sia da PC che da dispositivi mobili, assegnando punteggi su una scala da 1 a 100 e valutazioni delle prestazioni misurate in secondi.

Su JFactor.it abbiamo rilevato un punteggio di 44/100 per i dispositivi mobili e di 54/100 per i dispositivi desktop.

Il report di PageSpeed Insights fornisce anche utili consigli per aumentare le prestazioni, risolvere i problemi e migliorarne le prestazioni.

Fornisce molte informazioni interessanti ad esempio per eliminare javascript e css che bloccano la visualizzazione nei contenuti above-the-fold, e molte altre.

A mio avviso, però, interpretare le istruzioni fornite da questo tool non è sempre molto semplice ed intuitivo.

Ecco perchè mi servo anche di un secondo strumento: GTMetrix. Esso mette insieme i risultati di PageSpeed Insights (solo lato desktop) e di YSlow, altro strumento di analisi, messo però a disposizione da Yahoo.

Qui i punteggi vengono assegnati in percentuale e sono accompagnati da una lettera. L’analisi di JFactor.it ha prodotto i seguenti risultati: PageSpeed D (66%) e YSlow D (65%).

Se teniamo in considerazione che dovrebbe raggiungere un punteggio PageSpeed minimo dell’81% e un punteggio YSlow minimo del 79%, il blog presentava delle grosse anomalie da risolvere.

Inoltre precisiamo che questi punteggi sono stati rilevati prima dell’installazione di plugin vari e collegamenti a servizi esterni, ad esempio il widget di Facebook, fattori che hanno condotto ad un ulteriore peggioramento delle performance.

Come accennato in precedenza, nonostante l’interfaccia interamente in lingua inglese, per gli addetti ai lavori, sappi che GTMetrix è molto più semplice da interpretare rispetto a PageSpeed Insights.

Consente infatti di lavorare in maniera più sistematica, elencando punto per punto tutti gli aspetti da sistemare e quelli che sono già a posto.

Velocizzare il Sito WordPress

Oltre alla pesantezza del nuovo tema installato, ho subito notato che il blog non rispettava alcune regole fondamentali, come l’abilitazione della compressione GZip, l’ottimizzazione delle immagini, la creazione di una cache…ma vediamo nel dettaglio tutta la procedura che ho seguito per JFactor.it.

Questi sono gli elementi per velocizzare.

Aggiorna CMS, Temi e Plugin

E’ necessario che il CMS, il tema e tutti i plugin siano sempre aggiornati all’ultima versione disponibile.

Bisogna inoltre verificare che i plugin siano compatibili tra di loro e con la versione del CMS in uso.

Tornando a noi, ho quindi effettuato tutte le verifiche e gli aggiornamenti necessari.

Inoltre su CPanel, sotto la voce “Software e servizi”, ho selezionato “select PHP version”, impostando la versione PHP più recente.

Usa la Compressione GZip

Ricorda di usare la compressione GZip: questa consente ai browser di comprimere i contenuti, riducendo il “peso” di ciascuna pagina. Per abilitarla è necessario seguire 2 passaggi:

1. abilitare il modulo “mod_deflate” installato sul server. Per farlo, dopo l’accesso a CPanel, bisogna andare sotto la voce “Software e servizi” e cliccare su “Ottimizza sito web”. Nella nuova schermata che si aprirà, selezioniamo la voce “comprimi tutto il contenuto” e clicchiamo su “aggiorna impostazioni”;
2. attivare la compressione. Per farlo, bisogna inserire una stringa di codice nel file .htaccess manualmente oppure utilizzare alcuni plugin. Io ho scelto la seconda strada ed ho installato Wp Fastest Cache, poichè questo è utile per implementare anche altre funzioni.

Configura W3 Total Cache o WP Fastest Cache

Ci sono diversi strumenti utili per i nostri scopi. Possiamo configurare W3 Total Cache, oppure l’ottimo WP Fastest Cache.

Quest’ultimo è un plugin che si presta a varie configurazioni, in base alla struttura, e performa bene anche con Woocommerce in maniera semplice e rapida.

Le funzioni più importanti attivabili con questo plugin sono appunto la compressione GZip, ma anche il caching del browser e la creazione della cache per i temi mobile (disponibile nella versione pro).

L’immagine sottostante mostra come ho configurato il plugin.

Su JFactor non ho trovato giovamento dall’attivazione di altre funzioni come Minify HTML, Minify JavaScript o Minify CSS; al contrario, abilitandole, i punteggi tendevano a calare.

Questo perché ogni web è diverso dagli altri, ognuno ha una propria struttura interna e talvolta una sovraottimizzazione può condurre a risultati contrari a quelli desiderati.

Nel caso specifico, ho potuto notare che i codici html, css e javascript risultavano già sufficientemente minimizzati grazie alla compressione GZip, mentre i file CSS e JS, che potrebbero ottenere buoni risultati dalla minimizzazione, sono file esterni, di servizi quali Facebook, Analytics e YouTube, e sui quali, pertanto, non abbiamo alcun controllo.

Ricorda che ogni caso è a sè, quindi il suggerimento è quello di effettuare le varie modifiche e controllare l’andamento dei punteggi utilizzando i due tool sopra citati (PageSpeed Insights e GTMetrix).

Fa la Compressione delle Immagini

Elemento spesso sottovalutato ma di primaria importanza, è l’ottimizzazione delle immagini.

Contrariamente a quanto molti possano pensare, per il web è sufficiente una risoluzione di 72 dpi ed è inutile, anzi penalizzante, caricare immagini più grandi del necessario, affinché si vedano meglio.

Bisogna infatti evitare i ridimensionamenti delle immagini mediante codice html o css.

Il blog di Filippo, invece, era pieno di immagini di dimensioni inutilmente elevate come 1024×768 px e poi visualizzate ad esempio a 512x384px mediante il ridimensionamento effettuato tramite codice html e css.

GtMetrix in questo caso ci viene in aiuto, e non poco, segnalandoci tutte le immagini ridimensionate in html o css e pertanto da scalare.

Per scalare la dimensione delle immagini in maniera piuttosto rapida, ho utilizzato uno strumento presente su CPanel. Sotto la voce “Avanzate” ho selezionato “Gestione immagini” e nella nuova schermata “image scaler”.

Da qui ho ricercato le immagini segnalate da GtMetrix una per una e le ho salvate nella dimensione corretta. Questa operazione ha consentito di ridurre il peso di ciascuna immagine anche dell’80%.

Per diminuire ulteriormente il peso delle immagini è possibile comprimerle, senza perdita di qualità.

La versione Premium di Wp Fastest Cache è in grado di comprimere in maniera molto rapida tutte le immagini jpeg. Per le immagini in altri formati, ad esempio png, ho sostituito l’immagine originale con quella compressa proposta da GTMetrix.

Ho eseguito la scansione con GTMetrix e l’ottimizzazione delle immagini per tutte le pagine, alleggerendo notevolmente il peso dell’intero blog.

I Video YouTube

JFactor è un blog molto ricco di video tutorial realizzati da Filippo, caricati su YouTube ed incorporati poi nei vari articoli.

Per ridurre il tempo di caricamento delle pagine contenenti video, ho installato il plugin Lazy Load for Videos che sostituisce i video YouTube incorporati negli articoli del blog con delle immagini di anteprima cliccabili, riscontrando buoni risultati.

Riduci le Query al Database

JFactor è un blog con una homepage dinamica. Configurando il file wp-config.php è possibile impostare in maniera statica i valori relativi alla homepage del blog, riducendo le query al database e di conseguenza il tempo di caricamento.

Ho quindi inserito queste due righe di codice nel file:
define(‘WP_HOME’, ‘https://jfactor.it’);
define(‘WP_SITEURL’, ‘https://jfactor.it’);

Velocizzazione del Sito: Risultati Finali

A seguito dell’intero processo di ottimizzazione SEO di WordPress effettuato per ogni singola pagina, sono riuscita ad ottenere grossi miglioramenti in termini di prestazioni, evidenti non solo dai punteggi ottenuti nei vari test, ma anche durante l’esperienza di navigazione, sia da pc che da mobile.

Per quanto riguarda PageSpeed Insights, abbiamo raggiunto un punteggio di 77/100 per i dispositivi mobili e di 94/100 per i dispositivi desktop, con un incremento delle prestazioni superiore al 75%.
Con riferimento a GTMetrix, invece, abbiamo raggiunto un punteggio PageSpeed di A (95%) (+38%) e YSlow di C (79%) (+22%).

 

In entrambi i casi, bisogna tenere presente che il punteggio finale comprende l’installazione sul blog di vari plugins e l’inserimento di vari servizi, come il widget di Facebook, che se installati all’inizio, ci avrebbero fatti partire da punteggi ancora più bassi.

Un utile dato da valutare, inoltre, è la riduzione del peso complessivo della homepage, passato da 2,51MB a 1,26MB, con un calo del 52%, mentre le richieste HTTP sono scese da 130 a 79.

Considerazioni Utili

Come accennato all’inizio, per la verifica delle prestazioni utilizzo GTMetrix a supporto dei risultati di Pagespeed Insights, soprattutto per avere un quadro più chiaro ed immediato delle problematiche e delle soluzioni da implementare.

Voglio però far presente che, come si può notare dagli screenshots, le scansioni vengono effettuate dal Canada, pertanto il dato in secondi non è del tutto veritiero.

Pertanto è del tutto normale che ci venga indicato un tempo di caricamento della homepage di 3,7 secondi. JFactor riceve in realtà visite per la maggior parte provenienti dall’Italia, quindi, in concreto, trae beneficio dall’utilizzo un server italiano.

Le visite provenienti dall’Italia, dunque, godono di caricamenti più performanti di quanto mostrato da GTMetrix, che non ha la possibilità di effettuare scansioni dall’Italia.

Si tratta perciò di un ottimo risultato, anche perché sono considerati accettabili tempi di caricamento fino a 6,4 secondi.

Ho inoltre riscontrato lievi oscillazioni nei risultati delle scansioni su GTMetrix nei vari momenti della giornata, probabilmente sempre legate ad un discorso di distanza o di sovraccarico del servizio.

Un altro aspetto importante e che vorrei precisare è l’interpretazione del punteggio YSlow: JFactor viene penalizzato in quanto non viene utilizzato un CDN (Content Delivery Network), ovvero un servizio basato su un insieme di localizzazioni nel mondo che conservano nella cache i dati per poi ridistribuirli localmente, riducendo i tempi di latenza.

Personalmente ritengo che JFactor.it, localizzato su hosting italiano e avente come paese target proprio l’Italia, troverebbe giovamento dall’uso di questi servizi solo collateralmente dal punto di vista della sicurezza, poiché generalmente i CDN prevedono anche l’installazione di un firewall a protezione.

Per questo motivo, non è stato implementato l’uso del CDN. Utilizzandolo, infatti, avremmo ottenuto un punteggio YSlow molto più alto, ma questo non si sarebbe effettivamente tradotto in un aumento tangibile dei risultati per i visitatori italiani, che sono la quasi totalità degli utenti di JFactor.it. Consiglio invece il supporto di un CDN di qualità che vengono hostati su server Americani ma che hanno un target di pubblico italiano, o viceversa.

Insomma, non dobbiamo fare una gara per ottenere i valori più alti sempre e comunque, ma utilizzare anche nostre conoscenze e considerazioni per capire quando effettivamente serve migliorare un valore, e quando invece non serve o non è possibile farlo.

Perchè Abbiamo Raggiunto 94 su 100 e non 100 su 100?

Quando devi migliorare ricorda che non sempre puoi ottenere il punteggio di 100/100.

JFactor.it, così come molti altri, non potrà mai totalizzare un punteggio pieno in nessuno dei test effettuati, poiché, a prescindere dalla qualità e dall’accuratezza interna, l’utilizzo di servizi esterni come i widget dei social networks o persino lo script di Analytics, incidono negativamente sulle prestazioni e, in quanto esterni, non sono da noi controllabili.

Bisognerebbe utilizzare il minor numero di plugin possibile, di verificare che i plugin siano compatibili tra loro e con la versione corrente e di servirsi di servizi esterni solo quando lo si ritiene strettamente necessario.