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 . 

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

Il miglioramento della velocità del sito offre numerosi vantaggi, come una posizione più elevata nelle SERP (pagine dei risultati dei motori di ricerca) e una migliore possibilità di far rimanere i visitatori più a lungo .

Con GTmetrix, inserisci l’URL del tuo sito e GTmetrix rispedisce le tue attuali metriche delle prestazioni, insieme a punteggi, consigli e strumenti di analisi per aiutarti a ottimizzare le prestazioni del tuo sito.

Ma ci sono molte 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?

Il test di velocità GTmetrix ti aiuta a valutare le prestazioni del tuo sito web in diversi modi.

A livelli elevati, ti consente di vedere quanto tempo impiega il tuo sito a caricarsi ma ti aiuta anche ad analizzare perché il tuo sito si carica in quel modo e come migliorare. A tal fine, esso:

  • 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 per farti vedere 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 il proprio meccanismo di punteggio ma genera i suoi 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 probabilmente significa che non hai implementato alcune best practice per le 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 e ha punteggi GTmetrix degli anni ’70 è molto meglio che avere un sito che impiega otto secondi per caricasi ma ha ottenuto un 100 perfetto su GT metrix.

Fondamentalmente, presta attenzione ai punteggi perché ti daranno una rapida stima di quanto sia ottimizzato il tuo sito, ma non ti ossessionare perché, alla fine, l’unica cosa che conta è la velocità con cui il tuo sito web viene caricato .

Posso eseguire un test di velocità mobile GTmetrix?

Sì! Inoltre, si consiglia vivamente di testare sia le prestazioni desktop che mobile perché la maggior parte delle persone naviga sul web su dispositivi mobili al giorno d’oggi.

Fondamentalmente, capire come viene caricato il tuo sito per i visitatori desktop è solo metà della battaglia: vuoi anche testare com’è per i dispositivi mobili.

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 della tua pagina mobile rispetto ai tempi di caricamento da desktop.

Non lo saprai se non testerai specificamente le prestazioni mobili.

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

Che cos’è GT metrix?

È uno degli strumenti più popolari per l’analisi delle prestazioni della velocità di un sito. Se si testa un sito web, verrà fornito un punteggio delle prestazioni e un rapporto che mostra lo stato corrente del sito insieme ad alcuni suggerimenti su cosa può essere migliorato.

Questo strumento è gratuito ma se desideri più funzionalità come filtri 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 cosa degna di nota è il modo in cui GTmetrix utilizza i risultati di Google Page Speed ​​Insights e YSlow per formare 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 di velocità in GTmetrix, ci sono alcuni fattori che è necessario considerare.

Diamo uno sguardo più approfondito.

Cosa considerare quando si esegue un test di velocità del sito web?

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

Per migliorare l’accuratezza 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 testare il tuo sito è migliorare le prestazioni dell’intero sito e non 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.

Con la versione pubblica del test, il test di velocità utilizzerà sempre la seguente configurazione:

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

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

Una volta effettuato l’accesso, sei libero di 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, è possibile modificare la sede 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, utilizzare un dispositivo mobile per il test o modificare la velocità della connessione ( ad esempio, simulando 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 di più sul 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 si esegue 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:

https://wordpress.org/plugins/enable-gzip-compression/

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 plugin di memorizzazione nella cache di 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 : può fare automaticamente il lavoro per te in modo che le tue immagini siano sempre perfettamente ridimensionate, indipendentemente dal dispositivo utilizzato da un visitatore.

Specifica le dimensioni dell’immagine

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

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 sto raggruppando insieme perché il concetto di base è lo stesso.

La minificazione di CSS, Javascript e HTML è un altro modo per migliorare i tempi di caricamento. Rimuoverà tutti i caratteri non necessari in ciascun file, ad esempio caratteri di spazi bianchi o caratteri di nuova riga.

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, assicurati 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.ithttps://iltuosito.itper forzare l’utilizzo di SSL, assicurati di collegarti sempre alla versione HTTPS del tuo sito per evitare reindirizzamenti non necessari.

Rinvia l’analisi di JavaScript

Quando parlamoi dei 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 il tuo intero sito a caricarsi.

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 questo problema, dovresti provare a rinviare l’analisi di JavaScript in modo che il tuo sito inizi a caricare / analizzare quel JavaScript solo dopo che la parte visibile del tuo sito web è già 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 ). Invece, dovresti usare gli sprite CSS solo per immagini decorative, come loghi dei tuoi clienti o icone di condivisione social.

Sfortunatamente, non esiste un plugin per impostare automaticamente gli sprite CSS: è necessario farlo manualmente. Ecco come .

Abilita la compressione Gzip

Abbiamo già parlato della compressione delle immagini in precedenza, ma questa “compressione” si riferisce alla compressione di tutti i file del tuo sito web a livello di server utilizzando la compressione 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.

Scheda YSlow test di velocità GTmetrix

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 il contenuto statico 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 opzione.

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” dalla scheda Pagespeed. Puoi risolverlo abilitando la compressione Gzip.

Molti plugin per la memorizzazione nella cache di 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 reindirizzamenti per spostare le persone verso la destinazione giusta.

Riduci i DNS lookups

I browser dei visitatori devono eseguire una ricerca DNS per ogni dominio da cui il tuo sito ha contenuto.

Avrai sempre almeno una ricerca DNS per il tuo sito, ma se utilizzi servizi esterni sul tuo sito (come Google Fonts o lo script di monitoraggio di Google Analytics), questi genereranno ricerche DNS 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 è un pò avanzata, ma è uno strumento molto utile per capire come vengono caricate le diverse parti del sito e dove potrebbero esserci piccoli 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. 

GTmetrix test di velocità analisi a cascata

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 anche approfondire ulteriormente per trovare richieste da plugin specifici. Ad esempio, la ricerca wp-content/plugins/elementormostrerà tutte le richieste dal plugin page builder Elementor :

Se ritieni che un plugin stia aggiungendo molte richieste HTTP a caricamento lento e non ti dia molti vantaggi, potresti prendere in considerazione la possibilità di rimuoverlo e trovare un’alternativa migliore.

GTmetrix: schede Tempi, video e cronologia

Raggrupperò le ultime tre schede del test di velocità GTmetrix perché probabilmente non le userete così spesso, e non penso che richiedano un approfondimento dettagliato.

Tempi

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

Se passi con il mouse su una delle metriche, GTmetrix visualizzerà una descrizione che ti dice cosa significano:

Video

Se hai attivato il 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 vedere le cose 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 stai ottimizzando le prestazioni del tuo sito.

Cronologia

Infine, se provi più volte una pagina web, la scheda Cronologia ti consente di vedere i risultati dei test 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. Successivamente, i risultati del test storico vengono eliminati.

Se ad esempio si apportano alcune modifiche per migliorare i punteggi dei test di velocità GTmetrix, è possibile vedere come tali modifiche si traducono in miglioramenti del tempo di caricamento della pagina web reale:

Risultati storici dei test di velocità GTmetrix

Conclusione

Come hai visto, sapere come funziona il tool GTmetrix e conoscere il significato di tutti i grafici può aiutartii a prendere una decisione basata sui dati per quel che riguarda le prestazioni del tuo sito web.

Assicurati di migliorare l’accuratezza del test considerando il numero di test che eseguirai, i luoghi, i soggetti e il tempo.