PageSpeed di Google: il test di velocità per il tuo sito web

Nel coltellino svizzero di un buon SEO sono presenti diversi strumenti che permettono di analizzare un sito web in ottica di posizionamento e ottimizzazione per i motori di ricerca. Dagli Strumenti per i webmaster di Google passando per i software utili ad analizzare il posizionamento del sito sui motori di ricerca, i tools SEO sono fondamentali per capire lo stato di salute di un sito. In questo articolo tratteremo di uno strumento gratuito fornito da Google, il PageSpeed Insights.

 

Cos’è il PageSpeed Insight di Google?

Il PageSpeed Insight è uno strumento gratuito che permette di analizzare la velocità di un sito e fornisce informazioni su come poter ottimizzare i tempi di caricamento.

Perché è importante avere un sito che si carica velocemente?

Ci sono diversi vantaggi nell’avere un sito veloce e leggero:

  • Per gli utenti desktop: un sito che impiega troppo tempo a caricare i contenuti può essere vittima di un elevato tasso di abbandono. Questo significa che gli utenti abbandonano il sito ancor prima che siano stati caricati tutti i contenuti.
  • Per gli utenti mobile: se la connessione dati è lenta è fondamentale avere un sito leggero che non abbia lunghi tempi di attesa (già 10 secondi sono troppi!).
  • Per Google: big G apprezza molto i siti ottimizzati, soprattutto se questi hanno tempi di attesa ridotti. Google è nostro amico, velocizziamo il nostro sito!

 

Come funziona il PageSpeed?

Vediamo come funziona il PageSpeed di Google: per prima cosa colleghiamoci all’indirizzo developers.google.com/speed/pagespeed/insights ed inseriamo l’URL del sito da analizzare. Dopo qualche istante ci troveremo davanti a due schede, una con i risultati del sito in versione desktop e una per la versione mobile. Il PageSpeed Insights assegna un punteggio (da 1 a 100) alle due versioni del sito; maggiore è il punteggio, migliore è la valutazione che Google attribuisce al nostro sito in termini di velocità di caricamento.

ATTENZIONE: il PageSpeed non calcola il PageRank (la valutazione che ha Google nei confronti delle pagine del sito – e quindi del sito in generale – utilizzato come valore per stabilire il posizionamento nelle SERP); il PageSpeed fornisce informazioni relative alla velocità di caricamento del sito nonché all’esperienza utente per la navigazione da mobile.

Velocità sito pageSpeed

Schermata del PageSpeed Google

 

Messaggi e suggerimenti PageSpeed: come velocizzare il sito

Oltre a questi valori, vengono fornite informazioni su quali regole sono state rispettate e quali sono gli aspetti da migliorare. Vediamo insieme i messaggi che vengono visualizzati di frequente:

Messaggio: Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold 

Risoluzione PageSpeed Google: Non è stato possibile visualizzare alcun contenuto above-the-fold della pagina senza dover attendere il caricamento delle seguenti risorse. Prova a rimandare o a caricare in modo asincrono le risorse di blocco oppure incorpora le parti fondamentali di tali risorse direttamente nel codice HTML.

Traduzione: al fine di far visualizzare correttamente la pagina web viene eseguito del codice Javascript presente su un file esterno; il PageSpeed consiglia di includere il contenuto di questo file .js direttamente all’interno della pagina.

Al posto quindi di avere questo codice:

<head>
 <script type="text/javascript" src="small.js"></script>
</head>

dove small.js conterrà il codice Javascript in questione (es. /*contenuto del file small.js*/)

avremo il seguente codice:

<head>
 <script type="text/javascript">
 /*contenuto del file small.js*/
</script>
</head>

Discorso analogo per quanto riguarda i file di stile .css: se sono di piccole dimensioni, il PageSpeed di Google consiglia di incorporarne il codice – necessario alla corretta visualizzazione della pagina – all’interno della pagina stessa e solo dopo caricare i fogli di stile (dove, ad esempio, possono essere presenti anche degli stili non utilizzati in quella pagina).

 

Messaggio: Sfrutta il caching del browser

Risoluzione PageSpeed Google: Se viene impostata una data di scadenza o un’età massima nelle intestazioni HTTP per le risorse statiche, il browser carica le risorse precedentemente scaricate dal disco locale invece che dalla rete.

Traduzione: il suggerimento di Google è quello di applicare le intestazioni di memorizzazione nella cache relativamente ai file statici. Questo significa che, per ogni elemento statico (file PDF, immagini, fogli di stile .css, Javascript….), è necessario impostare la durata di permanenza nella cache del browser. In questo modo gli elementi non vengono scaricati nuovamente dalla rete ma sono richiamati dalla cache e questo permette di ridurre i tempi di caricamento.

 

Messaggio: Ottimizza le immagini

Risoluzione PageSpeed Google: La corretta formattazione e compressione delle immagini può far risparmiare parecchi byte di dati.

Traduzione: è consigliato ridurre il peso delle immagini al fine di velocizzarne il caricamento. Google, inoltre, consiglia di utilizzare, oltre a programmi di grafica, strumenti di compressione come jpegtran (per i jpeg) e OptiPNG (per i PNG).

 

Messaggio: Minimizza JavaScript – Minimizza HTML – Minimizza CSS

Risoluzione PageSpeed Google: La compattazione del codice JavaScript può far risparmiare parecchi byte di dati e può velocizzare download, analisi e tempo di esecuzione. – La compattazione del codice HTML e dell’eventuale codice JavaScript e CSS incorporato in esso contenuto può far risparmiare parecchi byte di dati e velocizzare i tempi di download e analisi. – La compattazione del codice CSS può far risparmiare parecchi byte di dati e può velocizzare i tempi di download e analisi.

Traduzione: in questo caso è necessario provvedere ad un’operazione di minimizzazione dei file indicati, in questo modo sarà possibile ridurne i tempi di download ed esecuzione eliminando byte superflui. Strumenti consigliati:

  • estensione PageSpeed Insight di Chrome per i file HTML
  • YUI Compressor e cssmin.js per i file CSS
  • Closure Compiler, JSMin o YUI Compressor per i file JavaScript

 

Messaggio: Abilita la compressione

Risoluzione PageSpeed Google: La compressione delle risorse con gzip o deflate può ridurre il numero di byte inviati tramite la rete.

Traduzione: alcuni server web comprimono i file in formato gzip prima di essere scaricati, in questo modo si riducono i tempi di download con conseguente incremento della velocità di caricamento della pagina. È necessario attivare la compressione a livello server.

 

Messaggio: Riduci i tempi di risposta dal server

Risoluzione PageSpeed Google: Nel nostro test il tuo server ha risposto in X,Y secondi. Il tempo di risposta del server potrebbe essere più lungo a causa di diversi fattori.

Traduzione: Google ha rilevato tempi di risposta del server web che superano i 200ms. Questo rallentamento può essere causato da diversi fattori, inerenti soprattutto al server. Ci troviamo di fronte a questa “problematica” soprattutto se utilizziamo server condivisi; in tal caso, se i tempi di risposta risultano essere troppo lunghi, si potrebbe prendere in considerazione di ricorrere ad una soluzione più professionale come un server dedicato.

 

PageSpeed Insights per Google Chrome

Oltre al link indicato, è disponibile un’estensione per Google Chrome che permette di implementare il PageSpeed direttamente nel browser. Potremo così analizzare ogni singola pagina del sito senza dover cambiare scheda ogni volta. Si tratta di uno strumento disponibile solo per Chrome, scaricabile a questo indirizzo.

 

Riassumendo

Sempre in un’ottica di ottimizzazione, seguire le indicazioni del PageSpeed permette di ottenere dei miglioramenti in termini di prestazioni e velocità di caricamento del sito. Ovviamente, è meglio avere un punteggio molto elevato tuttavia non perdiamo troppo tempo nel tentativo di raggiungere la perfezione. Un valore che supera 80/100 è già un ottimo traguardo. Tenete presente che neanche Google arriva a 100/100 😉

Pierluigi Amitrano

Autore del sito Web Marketing Policy, SEO addicted, specializzato in SEM e Web Analytics ha trasformato la sua passione in lavoro proponendo strategie di Marketing ad aziende che vogliono entrare in contatto con nuovi clienti tramite la rete.

View all contributions by Pierluigi Amitrano

Website: http://www.webmarketingpolicy.com

Similar articles

  • http://www.filmstreaming.com samirtop

    ciao ho une prpblema per favore nn va ho fatto come me hai spiegato javascript nel header ma non va il sito e fermo non ne wordpress ma e vldpersonals

  • Pierluigi Amitrano

    Ciao scusa il ritardo nella risposta, non so dirti di preciso qual è il problema ma ti consiglio di testare ogni modifica che apporti al codice: inserendo plugin non completamente compatibili o codice errato puoi provocare errori di visualizzazione. Ti consiglio sempre di fare un backup prima di qualsiasi modifica.

About Pierluigi Amitrano

SEO addicted, specializzato in SEM e Web Analytics ha trasformato la sua passione in lavoro proponendo strategie di Marketing ad aziende che voglio entrare in contatto con nuovi clienti tramite la rete.