Guida a GT Metrix e ai suoi suggerimenti

Ben ritrovati su SeoRoma!

Come ben sai, la velocità di un sito web è uno degli aspetti principali sui quali devi puntare per assicurarti la soddisfazione dei tuoi utenti. Ma come puoi ottenere le informazioni che ti occorrono per migliorare le prestazioni del tuo sito? Come capire dove devi agire per migliorare sensibilmente la velocità del tuo portale?

GTMetrix è un tool online gratuito che permette di analizzare le performance di un sito web in termini di tempi di caricamento e di ottimizzazione delle risorse da restituire ai visitatori.
Questo strumento è stato sviluppato dalla società canadese GT.net, per permettere in origine ai loro clienti di misurare le performance dei siti sul loro servizio di hosting.

Assieme a Pingdom rappresenta uno degli strumenti più utilizzati per valutare le performance del sito web grazie alla propria intuitività e precisione delle informazioni restituite: unisce infatti dati provenienti da Google PageSpeed Insights e Yslow. Il tool è gratuito, ma iscrivendosi è possibile accedere a delle informazioni più avanzate di quelle standard.

Un grande vantaggio di questa piattaforma è quello di fornire dei consigli concreti su come migliorare le prestazioni dei siti analizzati, il tutto con un’interfaccia molto immediata.

Non è semplice infatti individuare quali sono gli elementi che incidono negativamente sui tempi di caricamento, specialmente se non si è esperti in fatto di ottimizzazione. Questo tool indica esattamente in quali proporzioni pesano i vari elementi, ci aiuta a scoprire i punti deboli dell’infrastruttura per ottimizzare il portale dal punto di vista delle performance.

Per utilizzare GTMetrix, devi soltanto inserire l’URL della pagina che vuoi analizzare nella barra bianca che appare nella home del servizio e cliccare sulla voce Analyze, per avviare l’analisi del contenuto.
In una manciata di secondi avrai a disposizione il risultato dell’esame.

I test possono essere effettuati da diverse località:

• Dallas (USA)
• Londra (Gran Bretagna)
• Mumbai (India)
• Vancouver (Canada)
• Hong Kong (Cina)
• Sydney (Australia)
• San Paolo (Brasile)

ed essere simulati da diversi browser (Firefox e Chrome da desktop) per verificare se cambiano da interfaccia a interfaccia.

Le analisi di GTMetrix – Come interpretarle

Le analisi di GTMetrix possono essere effettuate con cadenza settimanale o mensile in modo da confrontare nel tempo le prestazioni del sito e verificare se i nostri interventi stanno migliorando o peggiorando le prestazioni. Questo strumento online ci mette a disposizione molte analisi avanzate per capire attivamente dove andare a mettere le mani per migliorare le peformance dei nostri portali.

Registrandoti puoi accedere anche a dati aggiuntivi estremamente utili, come la velocità di caricamento sui dispositivi mobile. Ovviamente puoi anche salvare i risultati delle analisi in PDF per stamparli e consultarli su carta. Puoi persino condividere la pagina di analisi sui social network o come link.

I performance scores sono i punteggi della pagina che vengono calcolati a partire dal Pagespeed di Google e YSlow di Yahoo. I risultati verranno offerti con le rispettive percentuali di ottimizzazione (es. Pagespeed Score 74% e Yslow Score del 67%). La scala dei valori passa da A (il valore più alto) a F (il valore più basso), ovvero valori da 0 a 100.

Nella sezione che appare al termine delle analisi possiamo accedere a una serie di suggerimenti ordinati in ordine di importanza.

Possiamo attingere a diversi tipi di analisi per valutare su quali ambiti di miglioramento dovremmo concentrarci:

• Page Load Time: indica il tempo di caricamento della pagina. Dall’analisi dei tempi di page load possiamo avere indicazioni concrete su come ottimizzare il nostro sito. Un sito dalle performance accettabili non dovrebbe superare i 3-4 secondi.
• Total Page Size: la dimensione totale della pagina in KB. Devi tenere a mente che più la pagina è pesante, più è scomoda da navigare da mobile, perciò questa sezione ti illustra chiaramente su quali aspetti dovresti incidere per migliorare le performance del tuo sito
• Requests: indica le richieste di elementi HTTP che vengono eseguite in una pagina HTML. Possiamo così analizzare elementi quali cookie, CSS, Javascript e immagini.
  Al crescere delle richieste aumenta anche il tempo necessario per visualizzare interamente le pagine. Puoi ottenere informazioni per procedere a rendere le immagini più leggere, ottimizzare i file CSS e JSS e in generale per ottimizzare tutti gli elementi che incidono sulla velocità.

Se vuoi mantenere in memoria lo storico delle tue analisi puoi iscriverti (gratuitamente) per avere a disposizione l’evoluzione nel tempo delle performance. In questo modo puoi avere sotto controllo le prestazioni e individuare rapidamente eventuali problemi che possono verificarsi.

La funzione Notifiche permette di ricevere degli alert via mail al verificarsi di certe condizioni, ad esempio:

• valori di Pagespeed e YSlow
• velocità di caricamento delle pagine
• dimensione delle pagine

I suggerimenti di PageSpeed e YSlow

All’interno della tabella che appare dopo lo svolgimento dell’analisi possiamo verificare i suggerimenti proposti secondo i criteri di Google PageSpeed e YSlow, che faremo bene a valutare entrambi.

L’analisi effettuata da GTMetrix ci offre considerazioni su numerosi ambiti da migliorare e sulle attività da svolgere fra le quali:

• Servire immagini scalate, ovvero dalle dimensioni consone alle effettive esigenze di visualizzazione del browser
• Sfruttare il caching del browser: la cache del browser viene generata quando sul sito non sono presenti le intestazioni HTTP della cache corrett
• Inserire piccoli CSS in linea: permette di migliorare le performance dei piccoli siti
• Ridurre il peso di CSS e Javascript: consiste nell’eliminare i caratteri non utili senza intaccare le funzionalità. In questo modo puoi rimuovere byte non utili e rendere l’esecuzione più veloce
• Differire il parsing di Javascript: permette di rimuovere quegli elementi che costringono al loro completo caricamento per visualizzare la pagina
• Ottimizzare le immagini: le immagini costituiscono porzioni molto consistenti dei siti web e il loro peso complessivo puoi incidere molto sui tempi di caricamento del sito. Per questo ti conviene ridurre il peso in maniera apprezzabile per velocizzare i contenuti da fornire ai visitatori
• Specificare le dimensioni delle immagini: questa buona pratica ti consente di alleggerire il browser dal dover comprendere il formato delle immagini, indicandolo direttamente nel codice HTML
• Minimizzare il codice HTML: proprio come il CSS e il Javascript, anche il codice HTML può essere ridotto per accelerare l’esecuzione
• Evitare i redirect eccessivi: i reindirizzamenti fanno perdere ai crawler tempo prezioso saltando da un contenuto web all’altro. Se possibile cerca di ridurre al minimo i redirect e di correggere internamente tutti i link che rimandano alla vecchia versione degli URL
• Abilitare la compressione gzip: la compressione gzip, abilitata lato server, consente di ridurre il peso HTML, di file Javascript e di fogli HTML
• Aggiungere gli header expires: permette di aggiungere una scadenza effettiva agli elementi
• Utilizzare un CDN: ti consente di velocizzare la restituzione degli elementi, soprattutto se hai traffico da tutto il mondo. Il CDN permette di memorizzare una copia dei contenuti nella cache su POP più vicini agli utenti, riducendo i tempi di caricamento
• Utilizzare domini senza cookie: i cookie HTTP associati a immagini e file conducono a un maggiore affaticamento. Per sopperire a questo problema possiamo avvalerci di un provider CDN che rimuove i cookie oppure imposta un dominio separato per fornire i cookie
• Ridurre i lookup DNS: ogni dominio alla prima visita genera una ricerca DNS, fino a quando non si memorizza nella cache. Una tecnica per ridurre il fenomeno è ospitare i font di Google sul proprio CDN
• Ridurre le richieste HTTP: l’abuso di plugin conduce al ricorso alle richieste di elementi francamente non utili alla navigazione. Per questo non dovresti mai installare più funzionalità di quelle che ti occorrono effettivamente
• Specificare un validatore di cache: il cache validatori appare quando non sono state definite le intestazioni HTTP della cache, e che conducono alla definizione di una richiesta per ogni risorsa, appesantendo il server. Le intestazioni di cache permettono di alleggerire la lunghezza di banda e velocizzando l’accesso per l’utente.
• Ottimizzare l’ordine degli stili e degli script
• Rimuovere query strings da risorse statiche: i file CSS e Javascript riportano alla fine la versione del file possono non essere memorizzati da alcuni file server e proxy server
• Specificare un Header Vary: Accept-Encoding: questa intestazione permette di indicare al browser se il client può gestire la forma compressa del contenuto

Le altre analisi di GTMetrix

La funzione di Testare la pagina da nazioni diverse permette di simulare i tempi di caricamento quando ci si connette da nazioni diverse dalla nostra. Possiamo testare le performance da 12 server in Paesi diversi.

La funzione Adblock Plus può essere abilitata per apprendere quanto sia l’influenza della rete pubblicitaria sui tempi di caricamento del sito.

Il diagramma a cascata di GTMetrix (Waterfall) permette di analizzare tutte le singole richieste eseguite sulla pagina web. Grazie a questo schema possiamo analizzare nel dettaglio quali elementi provocano ritardi nella visualizzazione.

I valori evidenziati in marrone sono detti bloccanti siccome finché non vengono scaricati impediscono la visualizzazione degli elementi successivi.

I valori in verde acqua indica le richieste ai record DNS per ottenere le informazioni sugli IP.
Ogni volta che fai il test con GTMetrix dunque il DNS può rispondere più velocemente siccome hai già scaricato le informazioni. Per questo dovresti fare la media tra due o tre misurazioni e analizzare i valori risultanti.

• Il valore verde si riferisce alla connessione TCP tra il server e l’host.
• Il valore in rosso indica la normale trasmissione dei dati dal browser al server.
• Il valore in viola serve a indicare il tempo di risposta di un server o di una risorsa analoga (TTFB): più è basso e ovviamente meglio è.
• Il valore in grigio ci informa sul tempo necessario per il browser per ricevere dati dal server.

Nella sezione Storia possiamo monitorare un URL nel tempo per verificare quali modifiche avverranno nel tempo.

Possiamo inoltre aggiungere delle note per memorizzare delle variazioni dei grafici nel tempo.

La funzione Report permette anche di mettere a confronto due report di due momenti differenti per raffrontarli e trarre delle conclusioni sul risultato delle attività svolte.

Vuoi vedere con i tuoi occhi come è l’esperienza di navigazione sul tuo sito? A questo scopo ti viene in aiuto la funzione Video capture, che registra un video che mette in luce i problemi che avvengono nel caricamento. Se vuoi analizzare con tutta calma il portale, puoi rallentare la velocità fino a quattro volte.

È disponibile anche una versione più avanzata, GTMetrix Pro, che consente di eseguire delle analisi in ogni ora, funzione che può essere interessante per i grandi store che hanno la necessità di verificare continuamente che l’usabilità venga mantenuta sempre apprezzabile.

La versione Pro permette anche di superare il limite massimo di URL analizzabili a disposizione della versione basic.

Con le informazioni a disposizione grazie a questa piattaforma puoi eseguire gli interventi più consoni a migliorare la struttura del codice del sito oppure installare i plugin in grado di aiutarti, come Autoptimize.

Cosa ne pensi, GTMetrix è davvero in grado di aiutarti ad analizzare i punti deboli del tuo sito e a migliorarli? Parliamone qua sotto!