100/100 con Google PageSpeed Insights per il Tuo Blog Wordpress: la Guida!

100/100 con Google PageSpeed Insights per il Tuo Blog WordPress: la Guida!

aumentare velocità sito blog 100 googlespeed insights

La Guida per Velocizzare al Massimo il tuo Blog WordPress

In questo articolo ti spiegherò come rendere il tuo sito superveloce, con una guida completa passo-passo.

Come spiego nelle mie lezioni sul posizionamento su Google Google conosce bene le performance di velocità dei siti, ed è pertanto opportuno tenere questo fattore in considerazione.

Pertanto, come spiegato anche nel mio corso SEO online, oltre alla classica ottimizzazione onpage e alla creazione di link,  è necessario ottimizzare il sito web rendendolo quanto più veloce possibile.

Questo è 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.

Il blog che stai leggendo utilizza il CMS WordPress, di gran lunga il più diffuso e utilizzato della rete.

Abbiamo preparato un dettagliato corso wordpress, e in questa guida ti mostratutti i passi da seguire per aumentare al massimo la velocità del tuo sito wordpress.

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 in velocità. Insomma: per quanto bello esteticamente, a livello di ottimizzazione il codice lasciava alquanto a desiderare.

Ho deciso di porvi rimedio, e mi sono affidato alla mia amica Pamela, che ha eseguito l’analisi del sito 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 di siti web, dalla creazione del design fino allo sviluppo vero e proprio.

Oggi vi racconto come ho velocizzato JFactor.it, blog creato con il CMS WordPress. 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 incrementare la velocità di caricamento delle pagine.

Analisi Preliminare del Sito Web

Per 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.

Il primo è PageSpeed Insights. Questo semplicissimo strumento, messo a disposizione da Google, valuta la velocità di caricamento di una pagina web sia su pc che su dispositivi mobili, assegnandole un duplice punteggio su una scala da 1 a 100.

Su JFactor.it abbiamo rilevato una velocità di 44/100 per i dispositivi mobili e di 54/100 per i dispositivi desktop.
Punteggi PageSpeed Insights prima dell'ottimizzazione

Il report di PageSpeed Insights fornisce anche utili consigli su come risolvere i problemi del sito web e migliorarne le prestazioni. 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, che è GTMetrix. Esso mette insieme i risultati di Google PageSpeed Insights (solo lato desktop) e di YSlow, altro strumento di analisi dei siti web, 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%).
Punteggi GTMetrix prima dell'ottimizzazione
Se teniamo in considerazione che un buon sito 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, GTMetrix è molto più semplice da interpretare rispetto a Google PageSpeed Insights.

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

L’Ottimizzazione Passo Passo

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 velocizzare JFactor.it.
Precisiamo che JFactor.it è un blog WordPress realizzato su hosting Linux.

Aggiornamenti di WordPress, Temi e Plugin

Affinché un sito web possa funzionare sempre al meglio, è 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. 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.

Compressione GZip

La compressione GZip consente ai browser di comprimere i contenuti del sito web, riducendo il “peso” di ciascuna pagina e quindi la velocità di caricamento. 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 WordPress. Io ho scelto la seconda strada ed ho installato Wp Fastes Cache, poichè questo plugin WordPress è utile per implementare anche altre funzioni.

WP Fastest Cache

Come già anticipato, si tratta di un plugin WordPress che si presta a varie configurazioni, in base alla struttura del sito web.

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.
Configurazione Wp Fastest Cache
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 sito 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, Google Analytics e YouTube, e sui quali, pertanto, non abbiamo alcun controllo.

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).

Ottimizzazione 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 del nostro sito. 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.

Ottimizzazione 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 WordPress Lazy Load for Videos che sostituisce i video YouTube incorporati negli articoli del blog con delle immagini di anteprima cliccabili, riscontrando buoni risultati.

Ridurre 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’);

Risultati Finali

A seguito dell’intero processo di ottimizzazione effettuato per ogni singola pagina del sito web, 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 Google 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%).

valore finale speed insights

 

risultati finali velocità sito gtmetrixIn 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, utilizzo GTMetrix a supporto dei risultati di Google Pagespeed Insights, soprattutto per avere un quadro più chiaro ed immediato delle problematiche del sito 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 sulla velocità di caricamento della pagina 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 ancora più veloci 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 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 del sito web 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, non troverebbe giovamento dall’uso di questi servizi in termini di velocità, ma solo collateralmente dal punto di vista della sicurezza, poiché generalmente i CDN prevedono anche l’installazione di un firewall a protezione del sito web.

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 della velocità di caricamento del sito per i visitatori italiani, che sono la quasi totalità degli utenti di JFactor.it. Consiglio invece il supporto di un CDN di qualità per i siti web 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?

JFactor.it, così come molti siti web, non potrà mai totalizzare un punteggio pieno in nessuno dei test effettuati, poiché, a prescindere dalla qualità e dall’accuratezza dell’ottimizzazione interna, l’utilizzo di servizi esterni al sito, come i widget dei social networks o persino lo script di Google Analytics, incidono negativamente sulle prestazioni di siti e blog, e, in quanto esterni, non sono da noi controllabili ed ottimizzabili. Il consiglio che posso dare, per chi desidera che il proprio sito o blog sia veloce, è quindi quello di utilizzare il minor numero di plugin possibile, di verificare che i plugin siano compatibili tra loro e con la versione corrente di WordPress e di servirsi di servizi esterni solo quando lo si ritiene strettamente necessario.

Bene, è tutto, ringrazio Pamela per questa guida, utile a chiunque voglia aumentare la velocità del proprio blog WordPress. Alla prossima!

Scopri il Video Per Posizionare Su Google il Tuo Sito Web

guest1@jfactor.it

3 Comments
  • Daniele
    giugno 21, 2017 at 2:59 pm

    Ciao Filippo,
    complimenti per questo articolo molto interessante sugli step da effettuare per velocizzare un sito in WordPress.
    Molto interessante la funzione di lazy load per i video…
    Volevo chiederti, per la compressione delle immagini WP Fastest Cache offre buoni risultati? Io finora l’ho utilizzato in versione free e per le immagini normalmente utilizzo altri servizi (WP Smush o Caesium fuori da WP), però sarebbe comodo avere tutto in uno se i risultati di compressione fossero apprezzabili.

    Invece ti vorrei chiedere un approfondimento sul codice
    define(‘WP_HOME’, ‘https://jfactor.it’);
    define(‘WP_SITEURL’, ‘https://jfactor.it’);

    Cosa fa esattamente e in che modo velocizza il caricamento dell’homepage? Quei parametri non sono già impostati nel backend di WordPress?

    Grazie 😉

  • Sergio
    novembre 20, 2015 at 2:18 pm

    Buongiorno Filippo, ho avuto modo di leggere un vostro articolo sull’ottimizzazone del sito web in WordPress e mi sono incuriosito ai servizi da voi offerti.

    Ho anche io un sito realizzato da me in WP che contiene sicuramente delle imperfezioni: vorrei capire se e come è possibile ottimizzarlo insieme e possibilmente accrescerne la visibilità sui motori di ricerca.

    Gradirei essere contattato per un preventivo senza impegno.

    Un saluto cordiale,

    Sergio Sarnicola

    • Filippo
      novembre 20, 2015 at 2:37 pm

      Buongiorno Sergio. Può contattarmi via mail (filippo.jatta@jfactor.it) o aggiungermi su skype (filippojatta), così potrò darle una mano.

      A presto 🙂

Post a Comment