Come utilizzare GTmetrix Speed ​​Test Tool + Migliora il tuo punteggio GTmetrix PageSpeed ​​su WordPress

Se vuoi migliorare le prestazioni del tuo sito WordPress, devi sapere dove ti trovi adesso. Questo è ciò che ti aiuta lo strumento di test della velocità GTmetrix.


Con GTmetrix, inserisci l’URL del tuo sito e GTmetrix rispedisce le tue attuali metriche sul rendimento, 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 trarne il massimo vantaggio per velocizzare il tuo sito?

Questo è ciò che tratteremo nel nostro tutorial sui test di velocità GTmetrix. In questo post, dovremo:

  • ✅ Guida a tutto ciò che offre lo strumento di prestazioni GTmetrix
  • ✅ Ti dico come migliorare i tuoi punteggi GTmetrix (e quanta enfasi da porre su quei punteggi in primo luogo)
  • ✅ Mostra alcuni degli strumenti di analisi avanzati, come l’analisi a cascata

Come usare GTmetrix Speed ​​Test Tool

Informazioni di base e domande frequenti su GTmetrix

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

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.

Ad alto livello, ti consente di vedere quanto tempo impiega il tuo sito a caricarsi.

Ma poi ti aiuta anche ad analizzare perché il tuo sito si carica in quel modo e come puoi migliorarlo. A tal fine, esso:

  • Valuta il tuo sito in base a due metriche diverse – Google Page Speed ​​e YSlow.
  • Fornisce un grafico a cascata e un’analisi dei tempi per vedere come vengono caricate le singole richieste e dove sono 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 negli 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. Invece, genera i suoi punteggi utilizzando due metodi di terze parti:

  • Google Page Speed – queste sono una serie 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 (ricordi Yahoo?) Che classifica il tuo sito Web rispetto a 19 regole diverse. Proprio come Page Speed, il tuo punteggio complessivo deriva dal risultato ponderato di tutte quelle singole regole.

I punteggi GTmetrix sono importanti?

sì e no.

Ecco il "sì" parte:

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 il "No" parte:

I tuoi visitatori non si preoccupano dei tuoi punteggi GTmetrix – si preoccupano di quanto tempo impiega il tuo sito Web per caricare e diventare interattivo.

Avere un sito Web WordPress che si carica in meno di due secondi e ha punteggi GTmetrix negli anni ’70 è molto meglio che avere un sito Web WordPress che impiega quattro secondi per caricare ma segna 100’s perfetti.

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 si carica.

Un sito Web con punteggi GTmetrix bassi può ancora essere caricato velocemente?

Si assolutamente.

Ecco uno dei grandi motivi per cui:

Entrambi i punteggi GTmetrix (PageSpeed ​​e YSlow) si occupano principalmente di ottimizzazioni delle prestazioni front-end, ad esempio quanto sono ottimizzate le immagini e l’aspetto del codice.

Tuttavia, l’ottimizzazione delle prestazioni del back-end è altrettanto importante, se non di più. Questo riguarda cose come quanto è buono il tuo provider di hosting e l’architettura del tuo server (ad es. Usando Nginx vs Apache).

Se le tue prestazioni di back-end sono orribili, il tuo sito può ancora caricarsi lentamente anche se hai punteggi GTmetrix perfetti. Allo stesso modo, se scegli un eccellente hosting WordPress, il tuo sito può ancora essere caricato abbastanza velocemente anche se hai punteggi GTmetrix bassi.

Per i migliori risultati, è necessario ottimizzare sia le prestazioni front-end che back-end.

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

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 è JavaScript pesante, potrebbe avere un effetto maggiore sui tempi di caricamento della tua pagina mobile rispetto ai tempi di caricamento del desktop.

Non lo saprai a meno che non provi specificamente per le prestazioni mobili.

Per eseguire i test di velocità mobili GTmetrix, è necessario registrarsi per un account gratuito, ne parleremo di più in un secondo.

Come eseguire un test di velocità GTmetrix

Il modo più semplice per eseguire un test su GTmetrix è semplicemente vai alla homepage di GTmetrix, collega l’URL del tuo sito e fai clic Metti alla prova il tuo sito:

Test anonimo GTmetrix

Tuttavia, raccomanderei che, invece di farlo, ti registri per un gratuito Account GTmetrix 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 sul desktop
  • Connessione non strozzata

Ma se ti registri per a gratuito account, è possibile modificare tutte queste condizioni in base alle proprie esigenze.

Ad esempio, se la maggior parte dei visitatori proviene dal sud-ovest degli Stati Uniti, è possibile modificare la sede del test in Dallas, in Texas, per avere un’idea migliore delle prestazioni per il pubblico di destinazione.

Oltre a modificare le posizioni dei test, è qui che hai la possibilità di utilizzare un dispositivo di test mobile o modificare la velocità di connessione (ad esempio, simulando una connessione 3G più lenta rispetto a una connessione cablata veloce).

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

Opzioni avanzate di configurazione del test

Una volta che GTmetrix ha eseguito il test in base alle tue condizioni, tornerà indietro una pagina dei risultati con:

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

Risultati riassuntivi

Esaminiamo le sei schede …

1. Scheda Page Speed

Il Page Speed tab è la scheda attiva predefinita quando si esegue un test GTmetrix. Valuta il tuo sito Web rispetto alle regole di 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 più dettagli sugli elementi specifici del tuo sito che causano problemi:

Scheda Page Speed ​​Velocità GTmetrix

Ecco alcuni dei problemi più comuni di 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 usare il plugin Optimole:


Ottimizzazione dell'immagine e Lazy Load di Optimole Ottimizzazione delle immagini & Lazy Load di Optimole

Author (s): Optimole

Versione corrente: 2.3.1

Ultimo aggiornamento: 21 aprile 2020

optimole-wp.zip


96% di commenti


50.000 + Installa


WP 4.7 + Richiede

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 pubblicare tali risorse dai computer locali dei visitatori anziché scaricarli ad ogni visita.

Molti plug-in 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 che è perfettamente dimensionata per le dimensioni per cui la stai usando – abbiamo un intero post sul concetto di immagini ridimensionate su ThemeIsle.

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: si desidera specificare la larghezza e l’altezza effettive di un’immagine quando la si incorpora.

Per esempio…

Non ottimale:

Ottimale:

WordPress lo farà per impostazione predefinita quando inserisci immagini nell’editor, ma vorrai assicurarti di specificare le immagini che usi altrove (come in un plugin).

Minimizza HTML, CSS e JavaScript

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

La minimizzazione implica la rimozione di caratteri non necessari nel codice del tuo sito senza modificarne la funzionalità. Ad esempio, la rimozione di spazi bianchi e interruzioni di riga.

Alcuni plugin per le prestazioni di WordPress, come WP Rocket, include la minificazione. Oppure puoi usare il plugin gratuito di ottimizzazione automatica per minimizzare il codice del tuo sito.


Autoptimize Autoptimize

Author (s): Frank Goossens (futtta)

Versione corrente: 2.7.2

Ultimo aggiornamento: 21 maggio 2020

autoptimize.2.7.2.zip


94% di commenti


1.000.000 + Installa


WP 4.9 + Richiede

Evita reindirizzamenti delle pagine di destinazione

I reindirizzamenti URL sono utili per indirizzare il traffico. Tuttavia, vuoi 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 reindirizzamenti per risolvere le cose. Ad esempio, se reindirizzi automaticamente http://yoursite.com a https://yoursite.com per 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 parli 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. Ecco perché lo vedrai spesso chiamato JavaScript con blocco del rendering.

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.

WP Rocket include uno strumento integrato per aiutarti a farlo. Oppure puoi usare il plug-in JavaScript gratuito Async, che proviene dallo stesso sviluppatore del plug-in Autoptimize.


JavaScript asincrono

Author (s): Frank Goossens (futtta)

Versione corrente: 2.20.03.01

Ultimo aggiornamento: 1 marzo 2020

async-javascript.2.20.03.01.zip


92% di commenti


100.000 + Installa


WP 4.6 + Richiede

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 richieste per caricare la tua pagina.

Non dovresti usare gli sprite CSS per tutte le tue immagini perché ci sono implicazioni negative sull’accessibilità e 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 plug-in per impostare automaticamente gli sprite CSS: devi farlo manualmente. Ecco come.

Abilita la compressione

Abbiamo già parlato della compressione delle immagini in precedenza, ma questo "compressione" si riferisce alla compressione di tutti i file del tuo sito Web a livello di server usando qualcosa chiamato compressione Gzip.

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

Molti plug-in per le prestazioni di WordPress possono aiutarti ad abilitare la compressione Gzip, inclusi WP Rocket, WP Super Cache e WP Fastest Cache. Oppure puoi usare il semplice e gratuito Abilita il plugin di compressione Gzip per una soluzione dedicata.


Abilita compressione Gzip

Author (s): Moki-Moki Ios

Versione corrente: 1.0.3

Ultimo aggiornamento: 8 maggio 2020

enable-gzip-compression.1.0.3.zip


86% di commenti


20.000 + Installa


3.0.1Requires

2. Scheda YSlow

Il tuo punteggio YSlow segue un approccio simile al tuo punteggio PageSpeed, usa solo un diverso insieme di regole per testare. L’elenco è un po ‘più piccolo: la scheda YSlow su GTmetrix contiene solo 19 regole.

Come il tuo 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 …

Utilizzare una rete di distribuzione dei contenuti (CDN)

Una CDN accelera i tempi di caricamento della pagina del tuo sito offrendo i 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 un CDN, puoi usare il plug-in Optimole gratuito. Per utilizzare un CDN per tutti i file statici del tuo sito, Cloudflare è anche una buona opzione.

Confronto tra i principali servizi CDN ��

Minimizza JavaScript e CSS

L’ho già trattato nella sezione Page Speed. Puoi minimizzare CSS e JavaScript con un plug-in dedicato come Autoptimize. Oppure, molti plugin di prestazioni di WordPress includono anche le proprie funzionalità di minimizzazione.

Comprimi i componenti

Questo è lo stesso del "Abilita la compressione" raccomandazione dalla scheda Page Speed. Puoi risolverlo abilitando la compressione Gzip.

Molti plug-in per la memorizzazione nella cache di WordPress includono una funzione di compressione Gzip. Oppure puoi usare l’apposito Abilita il plugin di compressione Gzip.

Evita reindirizzamenti URL

Questo è lo stesso del "Evita reindirizzamenti delle pagine di destinazione" in Page Speed.

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

Ridurre le ricerche DNS

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

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.

Due soluzioni sono:

  • Rimuovi il servizio esterno se non è necessario
  • Prova a ospitare autonomamente il contenuto, se possibile, come l’hosting di Google Fonts sul tuo server invece di fare affidamento sul CDN di Google Fonts. Questo plugin può essere d’aiuto.

Fai meno richieste HTTP

Vedrai le richieste HTTP in modo più dettagliato in Cascata sezione tab (che è il prossimo).

3. Scheda Cascata

Il Cascata è un po ‘avanzato, ma è uno strumento molto utile per capire come vengono caricate le diverse parti del tuo sito e dove potrebbero esserci piccoli colli di bottiglia che rallentano l’intero sito.

Quando apri il file Cascata scheda, vedrai un elenco di ogni singola richiesta HTTP per questa pagina (queste sono le "richieste" dal riepilogo dei risultati GTmetrix).

Ogni oggetto sulla tua pagina è 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 almeno 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 vedrai quando guarderai l’elenco, ogni richiesta HTTP impiegherà un tempo diverso per caricarsi e caricarsi in un ordine diverso (alcuni ne bloccheranno altri) – quindi se riesci a trovare e rimuovere il caricamento lento Richieste HTTP, puoi fare una grande differenza nei tempi di caricamento della pagina del tuo sito.

Puoi vedere i dettagli di ogni richiesta HTTP quando ci passi sopra. Ad esempio, questa immagine di ceci marocchina ha impiegato 102,4 ms per caricare:

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 contenuti / plugin wp puoi 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 di wp-content / plugins / elementor genererà tutte le richieste da il plug-in del generatore di pagine Elementor:

Ricerca dell'analisi a cascata

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.

4. Schede Tempi, video e cronologia

Raggrupperò le ultime tre schede del test di velocità GTmetrix perché probabilmente non le userete così spesso e non credo che richiedano una suddivisione profonda.

Tempi

Il Tempi La scheda offre maggiori dettagli su quanto tempo è necessario per raggiungere le varie metriche del tempo di caricamento. Puoi trovare queste informazioni anche nel grafico a cascata – il Tempi scheda rende solo un po ‘più facile la visualizzazione.

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

Scheda Tempi

video

Se hai attivato il caricamento della pagina dei video quando hai iniziato il test, puoi visualizzarli in video linguetta.

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 a "bagliore di contenuto non stilato"? Queste sono cose utili da sapere durante l’ottimizzazione del rendimento del tuo sito.

Storia

Infine, se si esegue il test di una pagina più volte, il Storia scheda 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 negli ultimi 30 giorni. Successivamente, i risultati del test storico vengono eliminati.

Ad esempio, se 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 reale:

Risultati storici dei test di velocità GTmetrix

Ottieni di più dal test di velocità GTmetrix

Se vuoi ottenere il massimo dallo strumento di test della velocità GTmetrix, dovresti andare oltre la casella di riepilogo e scavare nei dettagli di seguito.

Non vuoi essere troppo impiccato sui punteggi delle prestazioni di GTmetrix, ma i suggerimenti che vanno nei punteggi forniscono alcune indicazioni utili su aree in cui potrebbe mancare l’ottimizzazione delle prestazioni del front-end del tuo sito.

Inoltre, il Cascata tab è un ottimo strumento per approfondire aspetti specifici delle prestazioni del tuo sito, come la ricerca di immagini, script o plug-in che hanno un effetto eccessivo sui tempi di caricamento della pagina del tuo sito.

Se vuoi approfondire le prestazioni di WordPress in modo più dettagliato, dai un’occhiata alla nostra raccolta di 11 modi per velocizzare WordPress.

Hai domande persistenti su come testare il tuo sito Web con GTmetrix? Lascia un commento e cercheremo di dare una mano.

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Layout e presentazione di Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map