Come utilizzare GTmetrix Speed ​​Test Tool

Per avere successo online devi avere un sito web veloce. Puoi verificare se il tuo sito funziona correttamente utilizzando strumenti di test della velocità del sito come GTmetrix . 

GTMetrix ti mostrerà vari parametri che ti aiuteranno a identificare cosa sta rallentando il tuo sito e come risolverli. 

Migliorare la velocità del sito offre numerosi vantaggi, come una migliore posizione nelle SERP e maggiori probabilità che i visitatori rimangano più a lungo.

Basta inserire l’URL del tuo sito e GTmetrix ti darà le metriche delle prestazioni del sito, con punteggi, consigli e strumenti di analisi per aiutarti a ottimizzarlo.

Sono molte le informazioni contenute in quei rapporti, quindi come sfruttarle al massimo per accelerare il tuo sito?

Questo è ciò che tratteremo in questo post su GTmetrix :

• Ti guideremo attraverso tutto ciò che offre lo strumento di prestazioni GTmetrix
• Vedremo come migliorare i tuoi punteggi ( e in primo luogo quanta enfasi porre su quei punteggi )
•  Mostreremo alcuni degli strumenti di analisi avanzati, come il diagramma a cascata

Informazioni di base e domande frequenti su GTmetrix

Prima di entrare nel nocciolo della questione, esaminiamo alcune informazioni di base e domande su cosa offre e come funzione GTmetrix.

Cosa offre il test di velocità GTmetrix?

GTmetrix speed test tool ti aiuta a valutare le prestazioni del tuo sito web in diversi modi.

Ti consente di vedere quanto tempo impiega il tuo sito a caricarsi. Ti aiuta anche ad analizzare perché si carica in quel modo e come migliorare.

A tal fine, GTMetrix:

• Valuta il tuo sito in base a due metriche diverse : Google Page Speed ​​e YSlow.
• Fornisce un diagramma a cascata e un’analisi dei tempi che spiega come vengono caricate le singole richieste e dove si trovano i potenziali colli di bottiglia.
• Realizza registrazioni video in modo che tu possa vedere come il tuo sito si carica ai visitatori.
• Registra i risultati dei test storici degli ultimi 30 giorni in modo da poter analizzare come le prestazioni del tuo sito cambiano nel tempo.

Da dove provengono i punteggi GTmetrix?

GTmetrix non ha un proprio meccanismo di punteggio ma genera i punteggi utilizzando due metodi di terze parti:

• Google Pagespeed : un insieme di 26 regole diverse. Ogni regola ottiene il proprio punteggio ed è ponderata in modo diverso. Il punteggio aggregato è da dove proviene il punteggio PageSpeed ​​complessivo.
• YSlow – YSlow è un progetto open source di Yahoo che classifica il tuo sito web rispetto a 19 regole diverse. Proprio come PageSpeed, il tuo punteggio complessivo deriva dal risultato ponderato di tutte quelle singole regole.

I punteggi GTmetrix sono importanti?

Sì e no.

Ecco la parte “Sì”:

Dovresti prestare attenzione ai punteggi GTmetrix perché avere punteggi bassi significa probabilmente che non hai implementato alcune buone pratiche per prestazioni front-end importanti.

Ma ecco anche la parte “No”:

I tuoi visitatori non si preoccupano dei tuoi punteggi GTmetrix – si preoccupano di quanto tempo impiega a caricarsi e diventare interattivo il tuo sito web.

Avere un sito web che si carica in meno di due secondi ma ha punteggi GTmetrix degli anni ’80 è molto meglio che avere un sito che impiega otto secondi per caricasi ma ottiene un 100 perfetto su GTmetrix.

Presta attenzione ai punteggi perché ti forniranno un quadro generale di quanto sia ottimizzato il tuo sito, ma non ne essere ossessionato perché, alla fine, l’unica cosa che conta è la velocità di caricamento.

Posso eseguire un test di velocità GTmetrix per mobile?

Sì! Inoltre, consiglio vivamente di testare sia le prestazioni desktop che quelle mobile perché la maggior parte delle persone naviga sul web con dispositivi mobile.

Conoscere come si carica il tuo sito per i visitatori desktop è solo metà dell’opera perchè dovresti fare lo stesso test anche per i dispositivi mobile.

I dispositivi mobili potrebbero avere schemi diversi. Ad esempio, per il rendering di JavaScript ci vorrà più tempo per un telefono cellulare a basso consumo rispetto a un desktop economico. Quindi, se il tuo sito ha molto codice Javascript potrebbe avere un effetto maggiore sui tempi di caricamento da mobile rispetto ai tempi di caricamento da desktop.

Non lo saprai se non testerai specificamente le prestazioni mobile.

Per eseguire i test di velocità mobile con GTmetrix, è necessario registrare un account gratuito, ma ne parleremo di più tra un secondo.

Cos’è GTMetrix?

GTMetrix è uno degli strumenti più conosciuti per l’analisi delle prestazioni di un sito. Se testi un sito web, ti verrà dato un punteggio delle prestazioni e un rapporto che mostra lo stato corrente del sito insieme ad alcuni suggerimenti su cosa e come migliorare.

Questo strumento è gratuito ma se desideri più funzionalità come fi iltri di report illimitati e grafici sull’utilizzo delle risorse, puoi provare GTmetrix Pro , che parte da $ 14,95 / mese con il piano Bronze.

Un’altra caratteristica degna di nota è il modo in cui GTmetrix utilizza i risultati di Google Page Speed ​​Insights e YSlow per calcolare il punteggio delle prestazioni e fornire i consigli. Non è necessario eseguire il test su un altro strumento poiché i risultati coprono un ampio spettro di metriche e le presentano in modo completo.

Prima di eseguire un test delle prestazioni su GTmetrix, ci sono alcuni fattori che è necessario considerare.

Diamo uno sguardo più approfondito.

Cosa considerare quando si esegue un test di velocità con GTMetrix

È essenziale assicurarsi che i risultati del test GTMetrix siano accurati e pertinenti. Dopotutto, un risultato preciso ti aiuterà a prendere una decisione informata su ciò che può contribuire a migliorare la velocità del tuo sito.

Per migliorare la precisione del test, è necessario prestare attenzione ai seguenti fattori:

• Il numero di test : non è sufficiente eseguire un test una tantum poiché i risultati potrebbero cambiare in base alla quantità di traffico. Prova a ripetere il test in momenti diversi.
• Posizioni del test : se disponi di un pubblico locale, potresti voler impostare la posizione del test su quella più vicina ai tuoi visitatori. Se invece ti rivolgi al pubblico globale, dovresti fare il test in più regioni in tutto il mondo.
• Soggetti del test : prova più post e pagine per una migliore analisi, contribuirà a scoprire quali devono essere ottimizzati.

Tieni presente che l’obiettivo principale di un test del sito è migliorare le prestazioni dell’intero sito e non il punteggio delle prestazioni. Pertanto, devi prendere in considerazione ogni suggerimento sul rapporto per decidere quale avrà il maggiore impatto.

Come eseguire un test di velocità con GTmetrix

Il modo più semplice per eseguire un test su GTmetrix è semplicemente andare alla homepage di GTmetrix , inserire l’URL del sito e fare clic su Test your site:

Tuttavia, ti consigliamo di registrare un account GTmetrix gratuito prima di eseguire un test.

La versione pubblica del test, utilizzerà sempre la seguente configurazione:

• Test da Vancouver, in Canada
• Browser Chrome desktop
• Connessione Unthrottled

Diversamente se registri un account gratuito, puoi modificare tutte queste condizioni in base alle tue esigenze.

Una volta effettuato l’accesso, puoi utilizzare i 30 server di test sparsi in sei aree:

• Vancouver, Canada
• Dallas, USA
• San Paolo, Brasile
• Londra, Regno Unito
• Mumbai, India
• Hong Kong, Cina
• Sydney, Australia

Se ad esempio la maggior parte dei visitatori proviene dal sud-est Europa, puoi modificare il luogo del test a Londra, per avere un’idea migliore delle prestazioni per il pubblico di destinazione.

Oltre a modificare le posizioni dei test, hai la possibilità di testare le prestazioni del sito con browser specifici come Chrome , Firefox. Puoi anche utilizzare un dispositivo mobile per il test o modificare la velocità della connessione ( simulando ad esempio una connessione 3G, più lenta rispetto a una connessione cablata veloce ).

Una volta registrato il tuo account gratuito, sarai in grado di espandere le Opzioni di analisi per configurare il funzionamento del test:

Quando sei pronto per eseguire il test, fai semplicemente clic su Analize. Una volta che GTmetrix ha eseguito il test in base alle tue condizioni, restituirà una pagina dei risultati con:

• Un breve riepilogo che contiene i punteggi delle prestazioni e i dettagli di base della pagina testata
• Risultati dettagliati, divisi in sei schede

Esaminiamo le sei schede …

GTmetrix: la Scheda Page Speed

La scheda PageSpeed è la scheda attiva predefinita quando esegui un test GTmetrix. Valuta il tuo sito web rispetto alle regole Page Speed di Google.

Per ciascuna delle 26 regole, il tuo sito web otterrà un punteggio compreso tra 0 e 100. Quindi, GTmetrix aggiunge quei punteggi per generare il punteggio PageSpeed ​​complessivo.

Le 26 regole non sono ponderate in modo uniforme, quindi alcune avranno un effetto maggiore sul tuo punteggio complessivo rispetto ad altre.

Se fai clic sulla freccia per espandere una delle regole, vedrai ulteriori dettagli sugli elementi specifici del tuo sito che causano problemi:

Ecco alcuni dei problemi più comuni di Google PageSpeed ​​e come risolverli per migliorare il tuo punteggio …

Ottimizza le immagini

La compressione delle immagini consente di ridurne le dimensioni dei file con perdita di qualità pari a zero o minima, a seconda dell’algoritmo di compressione.

Per ottimizzare e comprimere automaticamente tutte le immagini sul tuo sito WordPress, puoi utilizzare un plugin come optimole.

Sfrutta la memorizzazione nella cache del browser

La memorizzazione nella cache del browser accelera i tempi di caricamento memorizzando alcune risorse statiche nei browser locali dei visitatori. Ciò significa che, nelle visite successive, i browser dei visitatori possono fornire tali risorse dai computer locali dei visitatori anziché scaricarli ad ogni visita.

Molti dei plugin di caching per WordPress offrono già la memorizzazione nella cache del browser, inclusi WP Super Cache, WP Rocket e WP Fastest Cache.

Servi immagini in scala

Un’immagine in scala è un’immagine perfettamente dimensionata per le misure per cui la stai usando.

Un modo semplice per servire immagini ridimensionate su WordPress è, ancora una volta, con il plugin Optimole. Questo plugin può fare il lavoro per te in modo che le tue immagini siano sempre perfettamente ridimensionate, indipendentemente dal dispositivo utilizzato dai visitatori.

Specifica le dimensioni dell’immagine

Questo riguarda l’HTML: dovresti specificare la larghezza e l’altezza effettive di un’immagine quando la inserisci.

Per esempio…

Non ottimale :

<img src = "https://iltuosito.it/wp-content/uploads/pandabear.jpg">

Ottimale:

<img src = "https://iltuosito.it/wp-content/uploads/pandabear.jpg" width = "500" height = "200">

WordPress lo fa di default quando inserisci immagini nell’editor, ma ti consigliamo di specificare le dimensioni anche delle immagini che usi altrove.

Minifica HTML, CSS e JavaScript

Queste sono tecnicamente tre regole separate, ma le raggrupperemo insieme perché il concetto di base è lo stesso.

La minificazione di CSS, Javascript e HTML sono ulteriori metodi per migliorare i tempi di caricamento. Questo processo rimuove tutti i caratteri non necessari in ciascun file, ad esempio spazi vuoti o enter.

Alcuni plugin per le prestazioni di WordPress, come WP Rocket , includono la minificazione. In alternativa, puoi utilizzare il plugin gratuito Autoptimize per minificare il codice del tuo sito.

Evita redirect delle pagine di destinazione

I redirect URL sono utili per indirizzare il traffico ma dovresti evitare di usarli, se possibile, perché rallenteranno il tuo sito web.

Per risolvere questo problema, devi accertarti che tutti i tuoi collegamenti interni passino direttamente all’URL corrente, non fare affidamento sui redirect per risolvere le cose. 

Se ad esempio reindirizzi automaticamente http://iltuosito.ita https://iltuosito.itper forzare l’utilizzo di SSL, accertati di collegarti sempre alla versione HTTPS del tuo sito per evitare redirect non necessari.

Rinvia l’analisi di JavaScript

Quando parlamo di tempi di caricamento della pagina, la velocità con cui il tuo sito web diventa visibile è altrettanto importante, se non di più, di quanto tempo impiega a caricarsi l’intero sito.

JavaScript può rallentare costringendo i browser dei visitatori a mettere in pausa il rendering della pagina per scaricare e analizzare JavaScript. Questo è il motivo per cui spesso lo vedrai chiamato render-blocking JavaScript.

Per risolvere, prova a rinviare l’analisi dei JavaScript in modo che il tuo sito carichi/analizzi il JavaScript solo dopo che la parte visibile del sito è stata caricata.

Sempre WP Rocket include uno strumento integrato per aiutarti a farlo. In alternativa, puoi utilizzare il plugin gratuito Async JavaScript, che proviene dallo stesso sviluppatore del plugin Autoptimize.

Combina immagini usando gli sprite CSS

Questa è una tecnica avanzata che ti consente di combinare più file di immagini in un singolo file utilizzando CSS. Ciò ti consente di ridurre il numero di richieste HTTP per caricare la tua pagina.

Non dovresti usare gli sprite CSS per tutte le tue immagini perché ci sono implicazioni negative sull’accessibilità e sulla SEO ( perché non puoi più aggiungere testo alternativo all’immagine ). Dovresti invece usare gli sprite CSS solo per immagini decorative, come loghi dei tuoi clienti o icone di condivisione social.

Al momento non esiste un plugin per impostare in modo automatico gli sprite CSS: è necessario farlo manualmente. Ecco come .

Abilita la compressione Gzip

Abbiamo già parlato della compressione delle immagini in precedenza, main questo caso ci riferiamo alla compressione di tutti i file del tuo sito web a livello di server utilizzando Gzip.

In media, la compressione Gzip può ridurre la dimensione dei file del tuo sito di circa il 70%.

Molti plugin di prestazioni di WordPress possono aiutarti ad abilitare la compressione Gzip, inclusi WP Rocket, WP Super Cache e WP Fastest Cache. In alternativa, puoi utilizzare il plugin Enable Gzip Compression semplice e gratuito per una soluzione dedicata.

GTmetrix: la Scheda YSlow

Il punteggio YSlow segue un approccio simile al punteggio Google PageSpeed, usa solo un diverso insieme di regole per il test. L’elenco è un pò più corto: la scheda YSlow su GTmetrix contiene solo 19 regole.

Come il punteggio Page Speed, ogni regola ottiene il proprio punteggio e il tuo punteggio complessivo si basa sulla media ponderata di tali punteggi.

Ecco alcuni dei consigli più comuni che incontrerai …

Utilizza una rete di distribuzione dei contenuti (CDN)

Una CDN accelera i tempi di caricamento della pagina web del tuo sito offrendo contenuti statici del tuo sito da una rete di server in tutto il mondo. Scopri di più in questo post .

Per pubblicare le tue immagini tramite una rete CDN, puoi utilizzare il plugin Optimole gratuito . Per utilizzare un CDN per tutti i file statici del tuo sito, anche Cloudflare è una buona soluzione.

Minifica JavaScript e CSS

L’ho già trattato nella sezione Page Speed. Puoi minimizzare CSS e JavaScript con un plugin dedicato come Autoptimize. Anche molti plugin di prestazioni WordPress includono le proprie funzionalità di minificazione.

Comprimi i componenti

E’ lo stesso della raccomandazione “Abilita compressione” nella scheda Pagespeed. Puoi risolverlo abilitando la compressione Gzip.

Molti plugin di caching per WordPress includono una funzione di compressione Gzip. In alternativa, puoi utilizzare il plugin Enable Gzip Compression dedicato.

Evita i redirect URL

È uguale a “Evita redirect delle pagine di destinazione” di PageSpeed.

Prova a collegarti sempre all’URL corrente di una pagina web, piuttosto che fare affidamento sui redirect per indirizzare le persone verso la destinazione giusta.

Riduci i DNS lookups

I browser dei visitatori devono eseguire una DNS Lookup (ricerca DNS) per ogni dominio da cui il tuo sito riceve contenuto.

Avrai sempre almeno una ricerca DNS, ma se utilizzi servizi esterni (come Google Fonts o lo script di monitoraggio di Google Analytics), questi genereranno DNS lookup aggiuntive.

Le soluzioni sono:

• Rimuovi il servizio esterno se non è necessario
• Prova a ospitare autonomamente il contenuto, se possibile, come ospitare i Google Fonts sul tuo server invece di fare affidamento alla CDN di Google Fonts.

Diminusci le richieste HTTP

Vedrai le richieste HTTP in modo più dettagliato nella sezione Scheda diagramma a Cascata ( che è la prossima ).

GTmetrix: la Scheda diagramma a Cascata

La scheda diagramma a cascata di GTMetrix è un pò complessa, ma è uno strumento molto utile per capire come si caricano le diverse parti del sito e dove potrebbero esserci colli di bottiglia che rallentano l’intero sito.

Quando apri la scheda diagramma a cascata, vedrai un elenco di ogni singola richiesta HTTP per quella pagina web ( queste sono le “Richieste” dal riepilogo dei risultati GTmetrix ).

Ogni oggetto sulla tua pagina web è una richiesta HTTP separata. Per esempio:

• Ogni immagine è una richiesta HTTP (a meno che non si utilizzino gli sprite CSS! )
• Ogni file CSS o JavaScript è una richiesta HTTP
• Qualsiasi script esterno che stai caricando (come Google Analytics) sarà anche una richiesta HTTP
• Eccetera.

A parità di condizioni, un minor numero di richieste HTTP generalmente indica un sito web a caricamento più rapido.

Inoltre, come capirai quando guarderai l’elenco, ogni richiesta HTTP impiega un tempo diverso per caricarsi e lo fa con un un ordine diverso ( alcuni ne bloccheranno altri ) – quindi trovare e rimuovere le richieste HTTP a caricamento lento, può fare una grande differenza nei tempi di caricamento della pagina web del tuo sito.

Puoi vedere i dettagli di ogni richiesta HTTP quando ci passi sopra. 

Puoi anche utilizzare il filtro e le opzioni di ricerca in alto per trovare richieste HTTP specifiche. Ad esempio, se cerchi wp-content/pluginspuoi trovare le richieste HTTP che vengono aggiunte dai plugin del tuo sito WordPress.

Puoi approfondire ulteriormente per trovare richieste da plugin specifici. Ad esempio, la ricerca wp-content/plugins/elementormostrerà tutte le richieste effettuate dal plugin page builder Elementor :

Se ritieni che un plugin stia facendo troppe richieste HTTP a caricamento lento e il suo utilizzo non sia vantaggioso, potresti valutare di rimuoverlo e trovare un’alternativa migliore.

GTmetrix: schede Tempi, video e cronologia

Raggrupperò le ultime tre schede di GTmetrix speed test tool perché probabilmente non le userai spesso, e non penso che richiedano un approfondimento dettagliato.

Tempi

La scheda Tempi ti fornisce maggiori dettagli su quanto tempo ci vuole per raggiungere varie metriche del tempo di caricamento. Puoi trovare queste informazioni anche nel diagramma a cascata: la scheda Tempi semplifica la visualizzazione.

Se passi con il mouse su una delle metriche, GTmetrix visualizzerà una descrizione con il suo significato:

Video

Se hai attivato i video del caricamento della pagina web quando hai iniziato il test, puoi visualizzarli in questa scheda .

Sarai anche in grado di rallentarli fino a 1/4 della velocità originale per vederli in modo più dettagliato.

I video sono utili perché ti consentono di vedere non solo quando viene caricato il tuo sito, ma anche come viene caricato. Ad esempio, quali parti del tuo sito sono visibili per prime? Ci sono strani problemi durante il caricamento come un ” lampo di contenuti non elaborati “? Queste sono cose utili da sapere se vuoi ottimizzare le prestazioni del tuo sito.

Cronologia

Infine, se testi più volte una pagina web, la scheda Cronologia ti consente di vedere i risultati precedenti in modo da poter analizzare come le cose sono cambiate nel tempo.

Memorizzerà tutti i test per questa pagina web negli ultimi 30 giorni. In seguito, i risultati del test storico vengono eliminati.

Se ad esempio apporti modifiche per migliorare i punteggi dei test GTmetrix, puoi vedere come tali modifiche si traducono in miglioramenti del tempo di caricamento reale della pagina web:

Conclusione

Se vuoi un sito web rapido, avrai bisogno di uno strumento completo per testarlo in diverse circostanze. GTmetrix ti consente di fare esattamente questo: impostando il monitoraggio automatico e i test da diverse posizioni, ti darà un quadro completo delle prestazioni del tuo sito web.

Utilizzato correttamente, GTMetrix ti fornisce anche informazioni più che sufficienti per reagire analizzando le prestazioni del tuo sito e apportando miglioramenti.

Ricorda solo di testare non solo la tua home page, di testare ogni pagina più di una volta e da più posizioni e di concentrarti sulla riduzione effettiva di quei tempi di caricamento piuttosto che sulla massimizzazione dei punteggi percentuali PageSpeed ​​e YSlow!

Buon lavoro!