Gtmetrix : Guida completa

Al giorno d’oggi, un rallentamento di qualsiasi tipo su un sito web può generare perdite sia in termini di SEO che a livello di fatturato.

La ricerca lo ha anche dimostrato 88% degli utenti di Internet non torna più su un sito quando lo considera troppo lento. Questa statistica riflette le attuali esigenze degli utenti di Internet in termini di esperienza che stanno cercando su un sito web.  

In effetti, non vogliono solo siti che offrano contenuti di qualità, ma anche, e soprattutto, vogliono che questi siti si carichino più velocemente.

Fonte: Google

Pertanto, per sperare di attirare visitatori, convertire potenziali clienti e persino avere un buon posto nei risultati di ricerca, è imperativo interessarsi al tempo di caricamento del tuo sito web. 

Per questo, non devi preoccuparti poiché esistono già strumenti che forniscono ai proprietari informazioni sul tempo di caricamento del loro sito Web.

Questi strumenti offrono loro anche azioni da intraprendere per rimediare alla lentezza osservata.

È il caso ad esempio di Gtmetrix, uno strumento che vi invito a scoprire in questo articolo.

Ma prima di tuffarti nel mondo di questo strumento, ti mostrerò i diversi motivi per cui avere un sito veloce è fondamentale.

Capitolo 1: Quanto è importante la velocità di caricamento del tuo sito per la tua strategia digitale?

Questo primo capitolo mi permetterà di spiegare innanzitutto i motivi per cui è importante interessarsi alla velocità del proprio sito web. Quindi, mostro le cause che potrebbero giustificare il caricamento lento di un sito web.

1.1. Gli effetti positivi della velocità di un sito web sulla tua strategia digitale

Tra gli effetti che la velocità di caricamento della tua pagina web può avere sulla tua strategia digitale, puoi ricordare: 

1.1.1. L’impatto della velocità sulla SEO

Come fattore di misurazione dell’esperienza utente, la velocità di caricamento è un fattore molto importante nella visualizzazione dei siti Web nei risultati di Google dal 2009.

Infatti, poiché gli utenti trascorreranno più tempo su siti Web che si caricano rapidamente, Google ha reso la velocità un criterio di ranking e pertinenza. Pertanto, è più probabile che i siti Web che si caricano più velocemente si posizionino più in alto nei risultati di ricerca.

1.1.2. L’impatto della velocità del sito sulla pubblicità sui social media.

Come gli annunci a pagamento su piattaforme come Google e Facebook, la maggior parte delle piattaforme social dà la priorità alla distribuzione di contenuti a pagamento in base a siti che hanno velocità di caricamento elevate. 

Infatti, i social network garantiscono di fornire agli utenti di Internet contenuti di qualità. Pertanto, preferiscono determinati criteri, inclusa la velocità di caricamento, per visualizzare il contenuto del loro feed di notizie. 

Facebook, ad esempio, ha avuto nell’agosto 2017 a Modifica dell’algoritmo che dà priorità all’esperienza utente e alla velocità di caricamento.

Quindi, mentre molti fattori entrano in gioco per l’algoritmo di Facebook con gli annunci social, il tempo di caricamento veloce influenza il modo in cui i post e gli annunci vengono visualizzati nel feed delle notizie, mentre il tempo di caricamento lento produce l’effetto opposto.

1.1.3. L’impatto della velocità del sito sull’esperienza utente 

La velocità di caricamento è uno dei motivi per cui vediamo un’elevata frequenza di rimbalzo su alcuni siti. il frequenza di rimbalzo si riferisce al numero di persone che lasciano il tuo sito web dopo aver visitato solo una pagina. 

Se un sito ha un tempo di caricamento lento, le persone non rimarranno più a lungo e se ne andranno senza nemmeno cercare di vedere se la pagina potrebbe attrarli o se avrebbero trovato le informazioni di cui hanno bisogno. 

Questa scoperta supporta l’idea che i siti lenti hanno una frequenza di rimbalzo molto alta, mentre i siti più veloci tendono ad avere una frequenza di rimbalzo inferiore.

Fonte: Backlinko

Inoltre, il rapporto tra la frequenza di rimbalzo e il numero di persone che hanno lasciato un sito dopo aver visitato solo la prima pagina, permette di capire che la frequenza di rimbalzo è ciò che permette di misurare la qualità dell’esperienza utente del sito. a livello di sito. 

Tuttavia, tieni presente che anche la frequenza di rimbalzo fa parte dei criteri per fare riferimento a una pagina web. 

Pertanto, più rimbalzi significano uno scarso posizionamento nei risultati di Google, mentre un tasso basso implicherebbe una buona posizione.

1.1.4. L’impatto della velocità di caricamento di un sito sul

tasso di conversione Il tasso di conversione di un sito web è determinato dal rapporto tra il numero di visitatori e il numero di persone che hanno eseguito un’azione. Se ci riferiamo alla vendita, è il numero della percentuale di persone che hanno effettuato un acquisto. 

Anche il tempo di caricamento di una pagina web influenza questo dato poiché rappresenta un elemento importante nel determinare la frequenza di rimbalzo. Se le persone rimbalzano a causa di tempi di caricamento lenti, non si convertiranno.

Ciò è particolarmente vero se il tuo sito Web ha un processo di checkout o conversione più lungo. Allo stesso modo, se il tuo sito è veloce, le persone troveranno rapidamente le informazioni che stanno cercando.

Sebbene questo elenco non sia del tutto esaustivo, ti mostrerò i diversi motivi che giustificano il caricamento lento di un sito web.

1.2. Alcune cause che possono giustificare la lentezza di un sito web

La causa della lentezza del tuo sito web può derivare da: 

1.2.1. L’esistenza di più contenuti flash sul sito

Flash o Adobe Flash è un ambiente di sviluppo web destinato alla creazione di contenuti multimediali e interattivi per Internet.

È stato lanciato dal 1996 e consente di aggiungere contenuti interattivi o multimediali a un sito. Questi contenuti vengono eseguiti utilizzando un player (flash player) integrato nei browser o server web.

Flash, sebbene sia un buon modo per aggiungere contenuti a un sito Web, può essere uno dei motivi per cui quest’ultimo è lento. 

In effetti, il contenuto flash è solitamente voluminoso. Tuttavia, come sai, più volume corrisponde a più richieste HTTP e quindi giustificherebbe un tempo di caricamento elevato.

1.2.2. Scarsa codifica delle varie pagine del sito

I motivi della lentezza di un sito web possono essere dovuti anche alla codifica. Che si tratti dei codici del tuo foglio di stile o dei file JAVA, è possibile che durante la creazione del tuo sito web alcuni elementi non necessari vengano aggiunti ad esso e rendano questi file ingombranti. 

Questi includono, ad esempio: 

• spazi frequenti;
• Righe di commento non necessarie;
• E molti altri.  

1.2.3. Visualizzazione di un gran numero di pubblicità 

Le pubblicità che visualizzi sulle pagine web sono un buon modo per monetizzare un sito web. 

Tuttavia, non dovrebbero essere favoriti a scapito di una buona esperienza utente. Perché rallentano il sito causando diverse richieste HTML.

Fonte : Knowonlineadvertising

La soluzione consigliata quindi non consiste nel non utilizzarli più, ma nell’usarli solo quando se ne presenta realmente la necessità.

1.2.4. Guasti del servizio di hosting 

Il caricamento lento del tuo sito web può essere dovuto alla scarsa capacità dell’host utilizzato. 

Inoltre, se il server su cui ospiti il ​​tuo sito è lento, è probabile che il sito sia ancora più lento.

Questa lentezza può verificarsi anche quando sei su un host gratuito e di scarsa qualità o quando la configurazione del tuo sito richiede un servizio di hosting più efficiente.

1.2.5. Script scritti in modo errato o posizionati in modo errato

Quando si inserisce uno script Java nella pagina HTML, è possibile che quando la pagina viene caricata, il browser del client intercetta prima il codice Java. 

Smetterà quindi di caricare tutti gli altri elementi mentre termina l’analisi, l’interpretazione e l’esecuzione dello script Java.

Fonte : Wikihow

Allo stesso modo, un codice scritto male può entrare in conflitto con altri elementi del tuo sito, con conseguenti tempi di caricamento eccessivi.

1.2.6. L’assenza di una cache

In primo luogo, la cache designa una memoria temporanea. Il suo ruolo è quello di mantenere le informazioni da una fonte per un po’ quando ci si accede per la prima volta. 

Pertanto, durante un secondo o successivo accesso, il tempo di caricamento delle informazioni dalla stessa fonte è più rapido rispetto alla prima volta. 

Questo ti permette di vedere che l’esistenza di una cache permette al tuo server di salvare una versione delle pagine che gli utenti consultano sul tuo sito web. Questa copia salvata verrà caricata, favorendo così il caricamento rapido delle pagine del tuo sito. 

D’altra parte, l’assenza di una cache costringerà il server a riprendere il caricamento da zero. Il che probabilmente richiederebbe più tempo.

1.2.7. Il sovraccarico del database a livello del tuo sito

Il database a livello del tuo sito ha il ruolo di registrare e classificare tutte le informazioni relative al sito. Pertanto, più è vecchio, più è probabile che abbia accumulato informazioni inutili che possono rallentarlo.  

Queste informazioni possono riguardare: file di log, informazioni sui plugin, file di temi e qualsiasi altro elemento che potrebbe causare il sovraccarico del database, con conseguenti lunghi tempi di caricamento.

1.2.8. Cattiva ottimizzazione di JavaScript 

Oltre a queste numerose funzionalità, il linguaggio Java è ciò che consente al tuo sito di essere piacevole da navigare. 

Tuttavia, se non ottimizzato, può causare problemi di latenza del sito Web. Possiamo incontrare ad esempio: “Una Java che blocca il caricamento della pagina”.

Fonte : Interworks

Infatti, quando le tue pagine web tentano di caricarsi e incontrano un codice java, il caricamento della pagina in HTML viene interrotto, consentendo così il caricamento di tutti i file java. 

1.2.9. Non utilizzare una rete CDN 

Le reti di distribuzione dei contenuti (CDN) sono server decentralizzati che consentono di caricare elementi del proprio sito da un server più appropriato. 

Inoltre, grazie alla loro distribuzione in vari luoghi del globo, offrono una certa vicinanza che consente agli utenti di beneficiare di un rapido accesso al tuo sito.

La non esistenza di una rete CDN per il tuo sito presuppone che gli elementi del tuo sito e tutte le richieste di caricamento vengano effettuate da un unico server. 

Questa è la causa del sovraccarico del tuo server che richiederà più tempo per rispondere. 

Anche gli utenti internazionali avranno molte difficoltà prima di accedere al sito.

1.2.10. Utilizzo di più plug-

in I plug-in consentono di aggiungere varie funzionalità a un sito Web. Dato il loro numero e le migliaia di funzionalità che consentono di aggiungere ai siti Web, è certo che stiamo cercando di installarne una moltitudine. 

Tuttavia, lungi dall’aumentare le prestazioni della tua pagina web, i plugin contribuiscono ad aumentare il tempo di caricamento del sito web a causa del lavoro che richiede al server. 

A volte questo problema può essere dovuto al fatto che i plugin non corrispondono alla configurazione dei siti su cui sono installati.

1.2.11. Una home page sovraccarica

La home page è la vetrina del tuo sito, quindi si consiglia di fare una buona impressione per interessare gli utenti di Internet. Ma questa raccomandazione non dovrebbe essere usata come motivo per sovraccaricarla con grafica, immagini o video. 

Se lo fai, potresti perdere il tuo obiettivo di coinvolgere i visitatori. 

Infatti, quando sovraccarichi la tua pagina, ne aumenti le dimensioni, che sarebbero fonte di elevate richieste HTTP e quindi di un caricamento non conforme ai desideri degli utenti di Internet.

Ora che conosci le diverse cause di un sito web lento, scopriamo lo strumento GTMETRIX.

Capitolo 2: Gtmetrix, uno strumento per aumentare le prestazioni del tuo sito web 

In questo capitolo, presento in dettaglio lo strumento Gtmetrix. Scoprirai queste caratteristiche e i motivi per cui te lo consiglio.

2.1. Gtmetrix: Che cos’è?

Gtmetrix è un software che ti permette di analizzare le prestazioni legate alla velocità di caricamento del tuo sito web.

Concretamente, questo strumento fornisce analisi dettagliate sulla velocità di caricamento di una pagina Web e offre ai loro proprietari vie di miglioramento. 

È stato sviluppato dalla società Carbone60 : una società canadese specializzata nel cloud e con sede a Toronto.

Gtmetrix è online dal 2009 e conta oltre 350.000 utenti. È già stato utilizzato per analizzare più di 350 milioni di pagine web. 

L’obiettivo perseguito da Gtmetrix è quello di fornire un’analisi dettagliata delle pagine web ad essa inviate. 

Di conseguenza, produce una serie di report che informano sulle cause della lentezza di un sito web.

In breve, Gtmetrix analizza il tuo sito e fornisce:

• punteggi Pagespeed e Yslow;
• Tempi di caricamento della pagina.

 Lo strumento è offerto in due versioni.

Una versione gratuita che ti dà accesso ai servizi di base e una versione pro che ti consente di accedere ad altri servizi pagando un abbonamento mensile. 

La versione gratuita o base permette di: 

• Monitorare le prestazioni di 3 pagine web;
• Salva fino a 20 archivi di report del sito scansionati;
• Ottieni fino a 20 accessi API al giorno;
• Crea fino a 3 filtri di analisi personalizzati.

La versione pro ti consente di accedere non solo ai vantaggi della versione base, ma anche ad altre funzionalità. 

Hai piani come: 

Il piano Bronze : questo piano costa $ 14,95 al mese e ti consente di accedere a funzioni come:

• Monitoraggio di 10 URL;
• Archiviazione di 100 report;
• Filtri di report illimitati;
• Per vedere ridotto il tempo di caricamento delle tue analisi;
• Monitoraggio orario, remoto e creazione video.

Il piano Silver che costa $ 49,95 al mese e ti consente di:

• Monitorare fino a 20 URL;
• Salva 200 rapporti di analisi;
• 500 crediti per l’accesso all’API;
• Filtri di report illimitati;
• Per vedere ridotto il tempo di caricamento delle tue analisi;
• Monitoraggio orario e remoto, creazione di video di allerta.
• Download di report PDF con i tuoi loghi

Il piano GOLD : il piano Gold del valore di $ 149,95 al mese. Scegliendo questo piano, avrai accesso a:

• 50 URL monitorati. 
• 500 report di analisi registrati 
• 1500 crediti API
• Filtri report illimitati Tempi
• di caricamento ridotti delle tue analisi,
• Monitoraggio orario e remoto, creazione di video di allerta.

Il piano doganale: Questo è un piano gratuito che ti dà la possibilità di scegliere gli elementi del tuo abbonamento. In questo caso, la tariffa è determinata in base ai servizi che ci metti. 

Ciascuno dei piani professionali ti dà diritto Develop Toolkit.

2.2. Le diverse caratteristiche o opzioni di Gtmetrix

Per quanto riguarda le opzioni di Gtmetrix, devono essere classificate in due categorie. 

Il primo riguarda le opzioni semplici.

Questi sono: 

• L’opzione Test Region : questa opzione ti permette di analizzare il tuo sito da diverse località o località: 
  • Dallas (USA); 
  • Hong Kong (Cina); 
  • Londra, Inghilterra); 
  • Mumbai (India); 
  • Sydney, Australia); 
  • San Paolo (Brasile) 
  • e Vancouver (Canada).
• L’opzione Browser : Con questa opzione, hai la possibilità di selezionare il browser da cui desideri effettuare la tua analisi;

• L’opzione di connessione : L’opzione di connessione ti consente di vedere come un tipo di connessione può influenzare la tua pagina web;
• L’opzione AdBlock Plus : questa opzione ti consente di impedire il caricamento di annunci pubblicitari durante l’analisi della tua pagina;
• L’opzione video : questa è una funzione che ti mostra visivamente il comportamento di caricamento della tua pagina.

La seconda categoria include opzioni avanzate. Queste opzioni riguardano:

• Identificazione HTTPS : che permette di connettere il sito che richiede identificatori HTTPS;
• Autorizzazione di un URL : Questa opzione consente di autorizzare solo il caricamento di risorse corrispondenti a un elenco di indirizzi URL (da definire).
• Blocco di un URL: che blocca il caricamento di una selezione di un indirizzo URL (da definire);
• L’opzione Cookies: che permette di analizzare una pagina che richiede l’invio di un cookie per connettersi.

Al di là di tutti questi elementi, lo strumento ti offre la possibilità di confrontare gli URL, di impostare il monitoraggio degli URL con la possibilità di ricevere report via email.

Allo stesso modo, se utilizzi un account pro, Gtmetrix ti dà accesso a funzionalità più avanzate. 

Ad esempio, puoi scegliere la risoluzione di visualizzazione dei risultati per vedere il comportamento della tua pagina su diversi tipi di media: questa è l’ Develop Toolkit.

Un’altra caratteristica di questo strumento riguarda gli avvisi. Ti permettono di ricevere una notifica non appena la pagina che stai monitorando supera un valore che hai impostato. Hai anche la possibilità di scaricare il rapporto di analisi del tuo sito in PDF.

Una volta sul sito Gtmetrix, la prima cosa che consiglio è di iniziare con la registrazione. 

La registrazione è facile poiché è sufficiente inserire nome e cognome, un indirizzo e-mail e una password. Fatto ciò, convalidi il tuo account e inizi a godere dei vantaggi del piano base.

2.3. Perché usare Gtmetrix? 

Tra i motivi che potrebbero giustificare l’utilizzo di Gtmetrix, si hanno:

2.3.1. L’impatto della velocità di caricamento di una pagina web 

Oltre ai motivi citati nel capitolo 1, una ricerca sul sito dareboost mi ha permesso di vedere che la velocità di caricamento di una pagina web ha avuto un impatto sui risultati del sito a vari livelli. Ad esempio, a livello:

Commerciale: quando il tempo di caricamento della tua pagina supera un certo tempo, il tasso di conversione può diminuire fino al 7%. 

Inoltre, il 67% degli acquirenti online ha affermato che il tasso di caricamento di un sito è stato un motivo per l’abbandono del carrello.

Esperienza utente: per quanto riguarda l’esperienza utente, dareboost ti dice che il 60% degli utenti Internet lascia un sito per il suo concorrente quando il tempo di caricamento è superiore a 5 secondi. 

SEO: Dal punto di vista SEO, Google penalizza dal 2010 l’1% dei siti che hanno un tempo di caricamento troppo lungo.

Alla luce di tutte queste statistiche, possiamo dire che la velocità di caricamento di una pagina è molto importante sia per attirare visitatori che per vendere prodotti.

Sembra quindi ovvio che quando speri di avere risultati con il tuo sito, sia necessaria un’analisi delle prestazioni di velocità. Questa analisi ti permetterà di:

• Conoscere la sua velocità di caricamento;
• Identificare i colli di bottiglia;
• Brainstorm idee per migliorare la velocità. 

Questo è esattamente ciò che ottieni con lo strumento Gtmetrix! Il secondo motivo per utilizzare Gtmetrix riguarda:

2.3.2. Le caratteristiche dello strumento stesso

Una rapida visita al sito di Gtmetrix ti permette di vedere che si tratta di una piattaforma intuitiva che si integra perfettamente con il tuo browser. 

È progettato per essere utilizzato da chiunque e si basa su un design semplice. 

Inoltre, con Gtmetrix, puoi accedere allo strumento di analisi ed effettuare le tue analisi anche se non hai ancora creato un account. Il che sembra molto pratico per avere un’idea dello strumento e delle sue diverse possibilità.

Gtmetrix è consigliato anche dal sito Codeinwp come lo strumento più adatto per fare un’analisi dettagliata sulle prestazioni di un sito. 

A differenza di alcuni strumenti, Gtmetrix offre una moltitudine di opzioni di analisi relative alla configurazione:

• Browser;
• Posizione;
• Il tipo di connessione;
• E dispositivi da utilizzare per stimolare l’analisi.

Il terzo motivo per utilizzare Gtmetrix è:

2.3.3. Disponibilità della documentazione

Poiché Gtmetrix è uno strumento accessibile a tutti, fornisce diverse guide per un utilizzo ottimale da parte di chiunque.

Infatti, non appena ti registri, hai accesso a un messaggio di benvenuto in cui Gtmetrix si offre di guidarti durante l’analisi del tuo sito web. 

Tra le altre cose, scoprirai in queste guide:

• Il processo di analisi della tua pagina web;
• Gli elementi per comprendere i tuoi report;
• Come configurare e monitorare i vari URL;
• Eccetera.

Capitolo 3: Quali sono i diversi usi di Gtmetrix?

In questo capitolo vi mostro i diversi modi di usare Gtmetrix.

3.1. Eseguire prove di velocità

3.1.1. Fai una semplice analisi

Per fare un’analisi sulla velocità di caricamento del tuo sito con Gtmetrix nel modo più semplice, devi solo: Vai

• al sito di Gtmetrix quindi accedi o crea un account (creare account è facile e ti dà accesso diretto alle funzioni di base).

• Compila l’URL della pagina: basta un semplice copia-incolla.
• Infine, fai clic su analizza e attendi che appaiano le analisi.

3.1.2. Fai un’analisi impostando le opzioni di Gtmetrix 

Una volta che ti sei registrato, scoprirai che Gtmetrix non ti limita a copiare e incollare e premere un indirizzo. Hai anche la possibilità di fare dei test modificando diversi elementi.

In realtà, non devi fare altro che premere “Opzioni analisi” e scegliere i parametri per i tuoi test. 

Con il parametro location, scegli la posizione del tuo test. Questa è un’opzione molto importante per analizzare le prestazioni del tuo sito web, in quanto riguarda la posizione dei tuoi server. 

Con questo parametro puoi capire efficacemente i problemi di connessione e la velocità del tuo sito da più punti della terra e vedere così le difficoltà di caricamento che i tuoi potenziali utenti potrebbero incontrare. 

Oltre alla posizione, puoi scegliere di eseguire il test utilizzando il browser: Google Chrome o Firefox.

3.1.3. Eseguire un’analisi dalle opzioni avanzate di Gtmetrix

Oltre alla semplice analisi e all’analisi per scelta dei parametri, Gtmetrix ti offre un’analisi avanzata che ti permette, ad esempio, di analizzare le versioni di un sito in fase di creazione.

Inoltre, grazie alle opzioni avanzate, puoi analizzare velocemente i siti protetti da identificazione HTTPS. Infine, lo strumento ti dà la possibilità di accedere a pagine che richiedono l’uso di cookie. 

3.2. Confronta URL 

Per confrontare gli URL, esegui semplicemente una prima scansione o scegli tra le pagine che hai già salvato. 

Quindi fare clic su “Confronta” che appare nel menu a destra dello schermo. Dopo aver fatto clic su questo menu, viene visualizzata una nuova finestra. 

Quindi inserisci l’indirizzo URL della pagina con cui vuoi fare un confronto. E premi Confronta. 

Attendi il caricamento della nuova finestra, che impiegherà solo poco tempo ad apparire, lì troverai i due report affiancati.  

Tale disposizione consente di vedere chiaramente gli elementi di analisi del primo URL e quelli del secondo URL.

Puoi quindi studiarli a tuo piacimento e determinare il sito più ottimizzato. 

3.3. Monitorare uno o più URL 

Nell’opzione di base, hai la possibilità di monitorare fino a 3 URL.

Quando vuoi configurare il monitoraggio per il tuo indirizzo URL, fai semplicemente clic su “Monitoraggio”.

Dopo aver premuto Monitor, puoi vedere nella nuova finestra che si apre, un elenco a discesa. Scegli da questo elenco il monitoraggio che fa per te.

Questo può essere un monitoraggio giornaliero, settimanale o mensile. Se hai un account pro, queste tre forme di monitoraggio sono integrate da un monitoraggio orario.

Puoi programmare più URL da monitorare a intervalli regolari (giornalieri, settimanali o mensili).

3.4. Crea avvisi 

Gtmetrix ti offre in questa parte la creazione di condizioni che, quando vengono raggiunte o superate, attiveranno un avviso che ti sarà notificato via e-mail.

Per fare ciò, devi prima scegliere l’opzione per creare avvisi che troverai nel menu che compare alla tua destra sullo schermo o in alto se stai utilizzando un cellulare. 

Una volta scelto, spunta “Abilita avviso email” e crea le diverse condizioni per le quali vorresti ricevere una notifica.

Fai clic su aggiungi una condizione che si trova quindi in fondo e scegli la natura della tua condizione. Questi possono essere punteggi delle prestazioni, tempo di caricamento o dimensioni della pagina. 

Una volta scelto, definisci nella seconda casella se l’avviso viene inviato quando l’elemento scelto è inferiore o superiore a un valore che devi inserire nell’ultima casella. Infine premi salva.

3.5. Creare un’API 

L’API (Application Programming Interface) è un programma che consente alle funzionalità di un’applicazione di essere utilizzate da un’altra. 

L’API di ripristino di GTmetrix offre un’integrazione dei test delle prestazioni sulle diverse piattaforme di sviluppo o su un’applicazione. Ma prima di usarlo, hai bisogno di una chiave API. 

Questa chiave o password stabilisce la connessione tra le due applicazioni per consentire l’accesso all’utilizzo dei dati da un’altra applicazione.

Per generare i dettagli di questa API non ti resta che andare in fondo alla pagina e scegliere Gtmetrix REST API: cliccaci 

sopra e avrai i dettagli su come ottenere gli elementi identificativi della tua API, ovvero la chiave e l’email indirizzo.

Per ottenere i dettagli completi dell’API Gtmetrix, dovresti prima andare a: https://gtmetrix.com/api/0.1/

Una volta effettuato l’accesso a questo indirizzo, dovrai accedere utilizzando il tuo indirizzo e-mail e password GTMETRIX.

Quindi puoi generare chiavi API semplicemente facendo clic nella casella Chiave API.

Per effettuare richieste di analisi, sono necessari crediti API. I crediti API ti vengono pagati quotidianamente e in base al tuo piano. 

Un credito corrisponde a una richiesta mentre 5 corrisponde a una richiesta video.

Capitolo 4: Come interpretare un’analisi Gtmetrix?

Qui vi presento gli elementi di un’analisi di Gtmetrix.

4.1. Quali sono i diversi elementi di un’analisi Gtmetrix?

Quando esegui la tua analisi su Gtmetrix, che sia un’analisi semplice, personalizzata o avanzata, otterrai nella nuova finestra che compare diversi elementi.

Innanzitutto, hai l’icona di un’anteprima del tuo sito che è seguita dal nome del report:

Puoi leggere sullo schermo informazioni come:

• L’URL analizzato;

• La località o posizione geografica della prova;
• La data e l’ora in cui è stato generato il report;
• Il browser utilizzato per eseguire il test;
• Il tipo di sito che utilizzi;
• Un messaggio che ti dice se il tuo sito è lento o meno.

In fondo a queste prime informazioni, hai i tuoi punteggi PageSpeed ​​e Yslow oltre ai dettagli sulla tua pagina. Questi dettagli includono:

• Il tempo di caricamento;
• La dimensione della pagina;
• Le risorse caricate o richieste dal server per visualizzare la pagina.

A destra dello schermo hai un menu che ti dà accesso alle altre azioni che puoi eseguire di cui abbiamo parlato nel Capitolo 2.

Una volta che scorri verso il basso puoi vedere una tabella con i dettagli 6 colonne. Questi sono i risultati della tua analisi. 

Comprende:

4.1.1. L’analisi PageSpeed

​​L’analisi PageSpeed ​​si basa sullo strumento di analisi Google Page Speed ​​Insights. 

I primi due elementi della tabella forniscono informazioni sui test PageSpeed ​​e Yslow:

I dettagli dell’analisi di questo strumento sono registrati in una tabella in 4 colonne:

• La prima colonna contiene un elenco di buone pratiche : Sono elencate le raccomandazioni delle migliori pratiche dovresti fare per rendere il tuo sito più veloce. Quando si tocca un consiglio, viene visualizzato l’elenco delle azioni da intraprendere.
• La seconda colonna si chiama CLASSE, mostra la percentuale di completamento di una raccomandazione sul tuo sito web.
• La colonna 3 ti informa sulla natura dei file da correggere (CSS, JavaScript, file del server, immagini, ecc.).
• Infine, l’ultima colonna indica la priorità di un’attività. Le priorità possono ad esempio essere alta (ridurre al minimo i reindirizzamenti), Medie (preferire risorse asincrone) o basse (evitare un set di caratteri nel tag META). Il punteggio assegnato è compreso tra 1 e 100.

Le buone pratiche per l’analisi della velocità di pagina sono: Rinviare l’analisi 

• JavaScript;
• Riduci al minimo i reindirizzamenti;
• Approfitta della memorizzazione nella cache del browser;
• Riduci a icona Java;
• Riduci al minimo i CSS;
• Specificare un validatore di cache;
• Ottimizza le immagini;
• Abilita la compressione;
• Evita cattive richieste;
• Evita i reindirizzamenti sulla pagina di destinazione;
• Abilita Keep-Alive;
• Piccolo CSS in linea;
• Integra JavaScript per piccoli siti;
• Ridurre la dimensione della richiesta;
• Metti CSS nell’intestazione della pagina;
• Servire risorse da un URL coerente;
• Servire immagini in scala;

• Combina immagini usando Sprite CSS;
• Evita CSS @import;
• Preferire risorse asincrone;
• Specificare un set di caratteri all’inizio;
• Specificare le dimensioni dell’immagine;
• Evita un set di caratteri nel meta tag.

4.1.2. Yslow

Anche l’analisi Yslow viene fornita nello stesso formato di pagespeed. Vale a dire un sistema di punteggio compreso tra 1 e 100. Hai una visualizzazione di pratiche in diversi colori per informarti del compito da svolgere. 

Quindi, il colore: 

• Verde indica le parti già ottimizzate sul tuo sito;
• Il rosso rappresenta le parti che devi ottimizzare;
• In arancione vengono visualizzate le parti la cui ottimizzazione non è ancora completa.

L’elenco dei consigli di YSlow è:

• Aggiungi intestazioni scadute;
• Utilizzare una rete di trasmissione CDN;
• Evita reindirizzamenti URL;
• Riduci le ricerche DNS;
• Comprimere i componenti;
• Fai meno richieste HTTP;
• Utilizzare domini senza cookie;
• Riduci al minimo JavaScript e CSS;
• Ridurre il numero di elementi DOM;
• Evita il filtro Alphaimageloader;
• cache Ajax;
• Rimuovi JavaScript e CSS duplicati;
• Evita l’errore HTTP 404 non trovato;
• Usa Get per le richieste Ajax;
• Evita le espressioni CSS;
• Ridurre le dimensioni dei biscotti;
• Riduci le dimensioni della favicon e memorizzala nella cache; 
• Configura tag di entità E-tag;
• Rendi JavaScript e CSS esterni.

Tuttavia, vale la pena ricordare che i due parametri, pur essendo relativi alla stessa query, si distinguono per il fatto che analizzano secondo criteri differenti. 

Ciò giustifica indubbiamente la differenza di rating dei due strumenti.

4.1.3. Grafici

a cascata Lo strumento a cascata è lo strumento che ti permette di conoscere con precisione:

• Gli elementi caricati sulla tua pagina;
• Ordine di caricamento e tempo di caricamento.

Così, grazie a questo strumento potrai vedere in modo concreto gli elementi che rallentano il caricamento della tua pagina web. 

Si noti che le informazioni fornite da Gtmetrix possono essere scaricate in formato PDF.

A livello dello strumento a cascata hai 4 colonne:  

• La colonna URLnome del file o della risorsa che viene analizzata. Quando passi il mouse su uno dei file, puoi vedere il percorso completo e l’estensione del file;

• La seconda colonna riguarda lo stato dell’analisi. Con le informazioni visualizzate, possiamo sapere se l’analisi di questo file è andata a buon fine o meno;
• La terza colonna che corrisponde alla dimensione indica il peso del file. Come puoi immaginare, più piccola è questa dimensione, più veloce sarà il tuo sito;
• L’ ultima colonna dei grafici a cascata fornisce informazioni sul caricamento cronologico del file. 

La parte che comprende il caricamento cronologico ti permette di visualizzare il filmato del caricamento dei vari elementi della tua pagina web. 

Infatti, quando punti il ​​cursore sulle bande che si trovano a livello di questa colonna, puoi vedere:

• L’ordine di caricamento degli elementi della tua pagina web;
• I dettagli di una richiesta e il suo tempo di esecuzione;
• Vedrai anche il tempo impiegato per inviare, scaricare e completare una richiesta.

Allo stesso modo, quando ti avvicini ancora di più agli elementi nella colonna di caricamento della sequenza temporale, puoi vedere le barre colorate lì. 

Ovviamente ogni colore ha un significato. 

Infatti, il colore: 

• Maron : Ti informa sul tempo di attesa di una richiesta prima che venga inviata al server.
• colore turchese indica il tempo di ricerca DNS.
• Il verde rappresenta il momento per stabilire la connessione tra l’host (server) e il client (browser).
• Il colore Rosso indica il tempo di invio e download di una richiesta
• Il colore Viola, questo colore ti permette di vedere la durata durante la quale il server ha aspettato prima di risponderti.
• Colore grigio : Il colore grigio corrisponde alla reception. In altre parole, è il tempo durante il quale il browser ha scaricato la risposta dal server.

Oltre a questi diversi colori, il file a cascata mostra anche 4 righe che rappresentano il calendario degli eventi. 

Queste linee includono:

• La linea verde che rappresenta la visualizzazione del primo rendering del tuo sito web.
• La linea blu che rappresenta il tempo di caricamento del DOM.
• La linea rossa che indica quando tutti gli elementi della pagina analizzati sono stati scaricati ed eseguiti dal browser.
• La linea viola significa che la pagina è completamente scaricata ti dice il tempo di inattività della rete.

4.1.4. I tempi di caricamento della tua pagina

La tempistica ti mostra i tempi di caricamento delle pagine. Dall’orientamento alla visualizzazione completa, inclusi i tempi di connessione e il tempo emesso dal server per rispondere. 

In questa parte vedi anche il tempo di caricamento delle prime informazioni sul tuo sito web, il tempo del primo rendering, ecc.

I tempi ti mostrano:

• Il tempo di risposta del tuo server;

• Il tempo di caricamento delle prime informazioni. Sul tuo sito e (primo byte);
• Il tempo di reindirizzamento : il tempo che intercorre tra il passaggio e il caricamento dell’URL da un altro; 
• Il tempo di caricamento complessivo : il tempo per caricare tutte le risorse della tua pagina; 
• Il tuo indice di velocità della pagina : questa è una metrica che mostra la velocità di riempimento della pagina. Più basso è questo indice, migliore sarà il tuo indice;
• Interactive Dom (il tempo necessario per visualizzare e analizzare i dati HTML);
• Primo disegno : segna il tempo di caricamento effettivo del contenuto sulla pagina. Ti dà un’idea dell’esperienza degli utenti di Internet che visitano la tua pagina.

4.1.5. Creazione di un video che mostra il caricamento della tua pagina web

Lo strumento video che consente agli utenti di effettuare una registrazione video del caricamento delle pagine per identificare efficacemente i problemi di caricamento. 

Il video, infatti, ti permette di visualizzare immagine per immagine come caricare la tua pagina in modo da poter vedere in modo concreto i colli di bottiglia della connessione del tuo sito. 

4.1.6. La Cronologia

Lo strumento Cronologia mostra il grafico in relazione al tempo di caricamento degli elementi temporali di una pagina su più giorni.

Con lo storico vedrai:

Il grafico sulla sincronizzazione delle pagine del tuo sito;

Questo grafico ti mostra l’evoluzione dei tempi di caricamento dei diversi elementi della tua pagina in secondi e giorni. Puoi vedere:

Il grafico sulla dimensione della pagina e il numero di richieste delle richieste HTTP a livello della tua pagina;

Questo grafico ti offre una panoramica delle dimensioni della tua pagina e del numero di richieste registrate in un determinato periodo. 

Scoprirai in particolare

• La dimensione dei dati HTML caricati rappresentata in rosso; 
• La dimensione totale della pagina per ogni giorno rappresentata dal colore blu; 
• L’evoluzione del numero di richieste rappresentato dal colore verde. 

Il grafico dei punteggi Pagespeed e Yslow è l’ultimo elemento della scheda della cronologia:

in questo grafico troverai i dettagli sui punteggi Pagespeed e Yslow della tua pagina web in giorni diversi.

I dati di pagespeed sono rappresentati in giallo mentre la curva che mostra l’evoluzione dei punteggi di Yslow è rappresentata in blu.

Lo strumento Cronologia ti consente, tra le altre cose, di aggiungere note a livello di ciascun grafico. Hai anche la possibilità di impostare una data di inizio e di fine per la visualizzazione della cronologia. 

Nota anche che se hai un piano professionale puoi definire e vedere tutti questi grafici in 1 giorno, una settimana, diversi mesi e persino un anno.

La cronologia fornita dall’analisi Gtmetrix può essere scaricata in formato CSV. 

Ora che hai visto le diverse parti dell’analisi Gtmetrix, impara come eseguire la 

lettura del grafico a cascata 4.2. Come interpretare i risultati a cascata?

Lo strumento a cascata è l’elemento che ti illuminerà sulle prestazioni del tuo sito web.

Tra le altre cose, fornisce informazioni che ti permetteranno di riconoscere i problemi e diagnosticare/risolvere problemi di prestazioni sul tuo sito.

Quando si tratta di grafici a cascata, è importante sapere prima che le bande lo sono scalato. Vale a dire che la lunghezza delle strisce è distribuita in base al tempo totale di caricamento della pagina. 

L’assenza di queste informazioni potrebbe distorcere la tua analisi e farti credere di avere un problema, quando non lo hai. 

Per leggere questi risultati, dovresti sempre guardare il tempo a pieno carico e la durata effettiva della domanda, per assicurarti di leggere il grafico nel contesto corretto.

La maggior parte dei problemi segnalati con pagespeed e yslow si trovano a livello di intestazione. Per visualizzare l’intestazione di un file, vai alla scheda a cascata e fai clic su un elemento.

Quando vedi i nomi dei file in rosso, significa che si è verificato un errore durante il tentativo di caricare l’applicazione. Quindi il browser che non può recuperare questa richiesta semplicemente la ignora.

Inoltre, se vedi barre lunghe nel tuo file a cascata, ciò potrebbe indicare la presenza di troppe richieste HTTP e indicare vari problemi.

Ad esempio, quando trovi:

• Una lunga barra grigia, significa che sul tuo sito sono presenti file di grandi dimensioni.
• Una lunga barra viola indicherà che il tuo server sta impiegando molto tempo per rispondere, quindi dovresti cercare i motivi del tuo sito lento da quel lato.
• Una lunga barra marrone indica che il browser ha avviato la richiesta, ma è bloccata o in attesa.
• Se la barra lunga è verde, significa che hai problemi di connessione alla rete e al server.
• Tuttavia, se ci sono lunghi spazi vuoti tra le richieste, significa che sono presenti script che bloccano l’esecuzione di determinate risorse.

Ecco fatto, ora sai come leggere le prestazioni del tuo sito web, ora vedrai come utilizzare i consigli dati da Gtmetrix.

Capitolo 5: Alcune best practices consigliate da Gtmetrix per ottimizzare il tuo sito web

In questo capitolo, ti fornisco un elenco di best practices generalmente consigliate da Gtmetrix e che hanno il potere di ridurre i tempi di caricamento del tuo sito web.

Infatti, Gtmetrix presenta gli elementi dei problemi e le linee guida per migliorare le prestazioni dei siti web dopo ogni analisi: 

vediamo nel dettaglio cosa significano questi consigli e altri suggerimenti per ottimizzare il tuo sito web.

Si noti che per una migliore comprensione, alcuni screenshot di alcune parti sono stati tradotti in francese. 

5.1. Alcune buone pratiche per ottimizzare il tuo sito web

5.1.1. Minimizza il CSS e minimizza lo script Java

Questi due consigli si basano su una tecnica di ottimizzazione del codice. La minimizzazione, poiché è di questo che si tratta, è una tecnica che consiste nel ridurre le dimensioni di un codice per aumentare il tempo di caricamento sui server. 

Concretamente, si tratterà di rimuovere caratteri, margini, interruzioni di riga non necessari. E tutto ciò che può aumentare il traffico di rete.

Quindi, per ridurre al minimo i tuoi file CSS JAVASCRIPT, puoi utilizzare un plug-in o farlo manualmente.

Per farlo manualmente, ecco la procedura da seguire:

• Salva il file e scaricane una copia dal tuo server;
• Apri il file da un editor di codice;
• Rimuovere commenti, spazi; 
• Riduci i nomi delle classi o delle variabili; 
• Trasforma gli array in oggetti; 
• Trova le risposte alle espressioni costanti di base;
• Ottimizza le istruzioni;
• Salva e carica nel tuo settore. 

Questa manipolazione può essere complessa, ti invito a utilizzare gli strumenti di minimizzazione. 

Tra questi hai: 

• Minifier.org : questo è un sito Web che ti consente di copiare e incollare il tuo codice e premere minify per rendere i tuoi file java o CSS leggeri direttamente online

• Better WordPress minify : questo è un plug-in integrato di WordPress che ottimizza direttamente i tuoi file Java e CSS.

Ecco un video che permette di avere maggiori informazioni sull’argomento:

&

5.1.2. Ottimizza le immagini 

Più grandi sono le immagini, più difficile sarà il caricamento del tuo sito web.

Il processo di ottimizzazione dell’immagine consisterà quindi nel ridurne le dimensioni per raggiungere l’equilibrio tra la dimensione più piccola che corrisponde ad un’immagine di qualità. Per eseguire questa operazione, uno dei metodi utilizzati è quello di comprimere le immagini prima di inviarle al proprio sito. 

Per aiutarti, puoi utilizzare l’estensione Minuscolo. Questa è un’estensione gratuita che ti aiuta a ottimizzare rapidamente le tue immagini.

Allo stesso modo, è importante utilizzare un buon formato immagine per il tuo sito. I migliori formati di immagine attuali sono senza dubbio i file: PNG, JPEG e GIF. Hanno il vantaggio di essere accettati dalla maggior parte dei browser.

L’altro requisito è scegliere una buona qualità di compressione rispetto alle dimensioni trovando un equilibrio tra i rapporti di compressione e le dimensioni del file.

5.1.3. Abilita compressione GZIP GZIP 

è sia un formato di file che un’applicazione utilizzata per decomprimere e comprimere i file. 

Una volta attivato, riduce le dimensioni dei tuoi file. 

Per attivarlo, puoi utilizzare: 

• Un plug-in: per attivare la compressione GZIP utilizzando un plug-in, puoi utilizzare i moduli WP ROCKET che aggiunge regole di compressione automatica al tuo file htaccess. Il file Htaccess si trova al livello principale del tuo sito. Questo è un file nascosto a cui puoi accedere tramite un gestore FTP.

• Modifica del file Htaccess : La modifica del file htaccess per abilitare la compressione GZIP comporta l’aggiunta di una riga di codice al file Htaccess.

Ecco le righe di codice da aggiungere al file htaccess:

# Comprime HTML, CSS, JavaScript, Text, XML e font

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application /x

-font AddOutputFilterByType applicazione DEFLATE/x-font-opentype

AddOutputFilterByType applicazione DEFLATE/x-font-

otf AddOutputFilterByType applicazione DEFLATE/x-font-

truetype AddOutputFilterByType applicazione DEFLATE/x-font-ttf

AddOutputFilterByType applicazione DEFLATE/x-javascript

AddOutputFilterByType applicazione DEFLATE /xhtml +xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/

otf AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/

html erByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Rimuove i bug del browser (necessario solo per browser molto vecchi)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Varia User-Agent

Dove trovare il file htaccess? Il file htaccess si trova nella radice del tuo sito. Questo è un file nascosto, ma può essere trovato tramite un file manager FTP come Filezia.

5.1.4. Riduci al minimo i reindirizzamenti 

Il reindirizzamento ti consente di indirizzare i visitatori che hanno inserito l’URL sbagliato, ad esempio, all’indirizzo URL corretto. Possono essere realizzati in modo permanente o temporaneo. 

I reindirizzamenti rendono anche la tua pagina accessibile da più URL. 

Tuttavia, può succedere che tu commetta un errore nella configurazione del tuo indirizzo URL. In modo tale da scrivere l’indirizzo URL in modo errato, il caricamento della pagina potrebbe richiedere più tempo del solito. 

Ciò causerà a Errore 404 ad esempio o data un’esperienza spiacevole ai visitatori. Per questo motivo, è fondamentale prestare attenzione quando si imposta un reindirizzamento. 

Meglio, sarebbe preferibile farlo solo se necessario. Ecco un video per guidarti:

5.1.5. Rinvia l’analisi JavaScript

Quando qualcuno visita il tuo sito web, il suo browser visualizza prima il tuo sito in HTML. Se durante il caricamento, il browser incontra elementi in JavaScript, interromperà il caricamento dell’HTML fino al termine dell’analisi dei dati in java.

Questo processo che può dare una brutta esperienza ai visitatori influisce sul tempo di caricamento della tua pagina. Pertanto, rinviare JavaScript equivale a chiedere ai browser Internet di attendere il caricamento dell’HTML prima di scaricare JAVA. 

Quando uno strumento come Gtmetrix ti chiede di rinviare JavaScript, puoi essere in linea con questa raccomandazione usando le proprietà:

• ASYNC: Async scarica JavaScript mentre analizza ancora l’HTML, ma poi interrompe l’analisi HTML per eseguire JavaScript.
• Oppure DEFER: l’attributo Defer, a differenza di Async, scarica JavaScript mentre continua ad analizzare l’HTML e attende di eseguirlo fino al completamento dell’analisi HTML. 

Per utilizzare queste proprietà su un sito WordPress, è necessario scaricare l’estensione JavaScript Async. 

È un’estensione gratuita per WordPress. Una volta installato, vai su Impostazioni → JavaScript asincrono per configurare l’estensione. Scegliendo Asincrono o Differito.

Come farlo concretamente? Ecco un video:

5.1.6. Evita i set di caratteri nel tag META I tag META 

sono criteri molto essenziali in Google SEO. Consentono di identificare meglio il contenuto della pagina web.

È anche pronto per descrivere una pagina web e aggiungere le parole chiave per le quali tale pagina verrà ottimizzata. 

Questo tag è posizionato in alto dopo il tag title. È importante che rifletta il contenuto del tuo sito web. 

Se necessario, i motori di ricerca potrebbero non tenere conto del tuo sito, causando così una scarsa visualizzazione della pagina. Pertanto, per ottimizzare i meta tag, è necessario evitare di: 

• Inserire parole chiave nel META tag 
• Utilizzare lettere maiuscole, numeri o caratteri speciali 

Consulta il mio Guida all’audit SEO per maggiori dettagli su questo elemento.

5.1.7. Fornisci immagini in scala

Questa raccomandazione si verifica quando non utilizzi le dimensioni effettive delle immagini per lavorare sul tuo sito web e lasci che CSS le ridimensionino. 

Un’immagine in scala presuppone che l’immagine sia stata ridimensionata per adattarla all’uso previsto. 

Per fare questo, ad esempio, puoi usare imageket.io, uno strumento online per ottimizzare le tue immagini. Collega semplicemente il tuo server a questa piattaforma per trasmettere le immagini da una rete di distribuzione dei contenuti. Con funzionalità di modifica basate su URL, questa piattaforma sarà in grado di ridimensionare e ottimizzare le tue immagini.

Puoi anche utilizzare uno strumento come Photoshop poiché modificare un’immagine è molto semplice. 

Con Adobe Photoshop, apri un’immagine:

• Apri un’immagine con Photoshop: 

• Nel menu, fai clic su Immagine: fai

• clic sulla dimensione dell’immagine, apparirà una nuova finestra come segue: 

• Ora modifica la dimensione dell’immagine (larghezza e altezza) e salva quella nuova:

• carica la nuova immagine su WordPress e sostituisci quella vecchia per visualizzare le immagini in scala.

Se desideri pubblicare immagini in scala, puoi ritagliare manualmente un’immagine con WordPress. 

Per fare ciò, prima accedi alla dashboard di WordPress:

• su Media > Libreria Libreria multimediale: 

•  fai clic sull’immagine che desideri ritagliare: fai

• clic su modifica immagine per aprire l’interfaccia di modifica:

• vai    ridimensiona l’immagine ridimensionandola o ritagliando l’immagine utilizzando le opzioni corrispondenti su la destra.

5.1.8. Evita reindirizzamenti sulla pagina di destinazione

Quando hai spostato un elemento del tuo sito, ad esempio, devi reindirizzare il vecchio URL a quello nuovo per consentire agli utenti di Internet di trovare ciò che stanno cercando. 

Tuttavia, questi reindirizzamenti possono causare latenza e quindi una scarsa esperienza utente. 

Infatti, i reindirizzamenti aumentano il numero di richieste da inviare al server così come il numero di risposte che invia. Queste eccedenze di richiesta-risposta devono essere ridotte.

La riduzione consisterà quindi nel ridurre tali reindirizzamenti allo stretto necessario.

Puoi risolvere questo problema:

Eliminando i reindirizzamenti non necessari e per farlo devi:

• Evitare di fare riferimento a URL che reindirizzano ad altri URL.
• Evita di utilizzare più reindirizzamenti per accedere alla stessa risorsa 
• Riduci al minimo il numero di URL che emettono reindirizzamenti ma in realtà non hanno contenuto.

Un’altra soluzione sarebbe utilizzare la riscrittura interna a livello di server per impostare un reindirizzamento. Pertanto, quando il client effettua una richiesta e questa richiesta ritorna a un URL errato, il server lo rimappa immediatamente a quello corretto.

5.1.9. Evita CSS @import

@import è una regola che ti permette di importare un foglio di stile in un altro foglio di stile. 

L’uso di questa proprietà sul tuo sito web, in particolare per quanto riguarda i fogli di stile esterni, comporterà un caricamento più lungo della tua pagina. 

Ad esempio, se il foglio di stile esterno è:

• CSS 
• foglio di stile esterno E questo foglio contiene il comando 
• @import URL (foglio di stile da importare)

Il browser scarica, analizza ed esegue il file style sheet.css prima di contarlo deve scaricare il foglio di stile da importare. Questa è probabilmente la causa di un tempo di caricamento più lungo.

5.1.10. Abilita keep Alive

Questa è una funzione che mantiene il contatto tra due dispositivi. Basata sull’invio di un messaggio, questa funzionalità consente lo scambio di messaggi tra due dispositivi, con lo scopo di verificare l’esistenza di una connessione e garantire il mantenimento di tale connessione.

Come parte del tuo sito web, la funzione keep alive deve essere abilitata tra il server e il client.

Per abilitare la funzione Keep Alice quando si utilizza un server Apache: 

• Basta aggiungere la riga: keep Alive On al file di configurazione httpd.conf.
• Puoi anche chiedere al tuo host 
• Puoi impostarlo dal tuo file htaccess aggiungendo la riga di codice 

<if Module mod_headers.c>

Header set Connections keep-alive

</ifModule>

5.1.11. Sfrutta la memorizzazione nella cache del browser 

Puoi migliorare i tempi di caricamento del tuo sito Web chiedendo ai browser degli utenti di salvare determinati file alla prima visita: questa è la memorizzazione nella cache del browser.

Ciò contribuisce alla riduzione del tempo di caricamento del tuo sito web in quanto il tempo di caricamento delle pagine viene ridotto durante un nuovo utilizzo da parte dello stesso browser. 

Infatti, durante la tua prima visita, il sito dice al tuo browser di caricare determinati file statici dal tuo sito, di archiviarli e di non scaricarli se torni.

Per configurare questa funzione, è necessario modificare le intestazioni HTTP per indicare i timeout per determinati file.

In Apache: 

vai al tuo file htaccess è nella radice del tuo dominio, puoi vederlo usando un client FTP come Filezilla.

Se usi WordPress:

puoi attivare questo file accedendo direttamente al tuo file htaccess. I file htaccess sono file nascosti che puoi trovare nella root del tuo sito nella www.

Utilizzando un editor di testo, modifica questo file aggiungendo le seguenti righe di codice:

# Memorizzazione nella cache dei file nel browser

<IfModule mod_expires.c>

ExpiresActive On

ExpiresDefault “access plus 1 month”

ExpiresByType text/html “access plus 0 seconds”

ExpiresByType text/ xml “accesso più 0 secondi”

ExpiresByType application/xml “accesso più 0 secondi”

ExpiresByType application/json “accesso più 0 secondi”

ExpiresByType application/pdf “accesso più 0 secondi”

ExpiresByType application/rss +xml “accesso più 1 ora”

ExpiresByType application/atom+xml “accesso più 1 ora”

ExpiresByType application/x-font-ttf “accesso più 1 mese”

ExpiresByType font/opentype “accesso più 1 mese”

ExpiresByType application/x-font -woff “accesso più 1 mese”

ExpiresByType application/x-font-woff2 “accesso più 1 mese”

ExpiresByType image/svg+xml “accesso più 1 mese”

ExpiresByType application/vnd.ms-fontobject “accesso più 1 mese”

ExpiresByType image /jpg “accesso più 1 mese”

Scade ByType image/jpeg “accesso più 1 mese”

ExpiresByType image/gif “accesso più 1 mese”

ExpiresByType image/png “accesso più 1 mese”

ExpiresByType video/ogg “accesso più 1 mese”

ExpiresByType audio/ogg “accesso più 1 mese”

ExpiresByType video/mp4 “accesso più 1 mese”

ExpiresByType video/webm “accesso più 1 mese”

ExpiresByType testo/css “accesso più 6 mesi”

ExpiresByType applicazione/javascript “accesso più 6 mesi”

ExpiresByType applicazione/x-shockwave-flash “accesso più 1 settimana”

ExpiresByType image/x-icon “accesso più 1 settimana”

</IfModule>

# Headers

Header unset

ETag FileETag Nessuno

<ifModule mod_headers.c>  

<filesMatch “\.(ico|jpe?g|png|gif |swf )$”>  

    Header set Cache-Control “public”  

</filesMatch>  

<filesMatch “\.(css)$”>  

    Header set Cache-Control “public”  

</filesMatch>  

<filesMatch “\.(js)$ “>  

    Header set Cache-Control “private”  

</filesMatch>  

<filesMatch “\.(x?html?|php)$”>  

    Header set Cache-Control “private, must-revalidate”

</filesMatch>

</ifModule> 

Assicurati per impostare le date di scadenza a seconda dei tempi di aggiornamento dei diversi file sul tuo sito web. Al termine, salva il file.

Puoi anche farlo usando un plugin. Il plug-in WP Rocket o W3 Total cache, ad esempio, consente di sfruttare la memorizzazione nella cache del browser.

5.1.12. Riduci la dimensione della richiesta HTTP

Una dimensione della richiesta HTTP elevata determina un flusso di richieste elevato.

Puoi quindi evitare questo sovraccarico riducendo:

• Cookie : Limita i cookie che devono essere inviati riducendone il più possibile le dimensioni a meno di 1000 byte. Google consiglia che questa dimensione sia inferiore a 400 byte. 
• URL : evita di appesantire gli URL aggiungendo diversi parametri, questo può aumentare la loro dimensione a byte aggiuntivi. È quindi necessario limitarne le dimensioni a poche centinaia di byte.

5.1.13. Preferisci 

risorse asincrone Le risorse asincrone non bloccano il caricamento della pagina poiché questa risorsa viene posticipata fino a quando il browser dell’utente Web non completa il caricamento del codice HTML.

Puoi aggirare questo problema rendendo JavaScript asincrono. Per fare ciò, puoi utilizzare la proprietà Async di HTML su script esterni aggiungendo:

<script async sec=”my.js”>.

Puoi anche utilizzare un elemento script dom per promuovere il caricamento asincrono delle pagine a livello di browser dei tuoi utenti.

https://www.youtube.com/watch?v=Ewa8bTkjbDI

5.1.14. Inserisci CSS nella parte principale del documento 

Lo spostamento degli elementi di stile nel documento HTML consente di scaricarli prima. Ciò consente ai browser di visualizzare gradualmente una pagina.

Il mancato rispetto di questa raccomandazione può comportare il blocco del rendering della pagina da parte del browser e persino lo spostamento del contenuto.

Per inserire CSS nell’intestazione del documento HTTP:

• Devi utilizzare il tag link nella parte <head>   del tuo documento HTML per i fogli di stile esterni.
• È inoltre necessario specificare i fogli di stile nell’ordine corretto. Per questo, devi usare il <style> nella parte <head>.

5.1.15. Specificare un validatore di cache 

Questa nota significa che nel tuo server non è inclusa alcuna intestazione di memorizzazione nella cache HTTP. Per correggere questo problema, puoi utilizzare le seguenti intestazioni: 

Ultima modifica : questa intestazione ti consente di vedere se il file nella cache del browser è stato modificato dall’ultima visita. Per vedere il valore di questa intestazione, puoi utilizzare il 

controllo Chrome dev Tools Cache : è composto da direttive con le quali hai la possibilità di definire la lunghezza della cache. 

Le direttive più utilizzate sono: 

• Max-Age che permette di definire la durata della cache di un elemento;
• Pubblico che consente a una cache di archiviare pubblicamente una risposta;
• Private che consente di memorizzare nella cache un elemento solo con il browser che accede al file.

Scade : per impostare la scadenza dell’intestazione, è necessario aggiungere la seguente riga di codice al file htaccess. 

## EXPIRES HEADER CACHING ##

  ExpiresActive On

 ExpiresByType image/jpg “accesso 1 anno”

 ExpiresByType image/jpeg “accesso 1 anno”

 ExpiresByType image/gif “accesso 1 anno”

 ExpiresByType image/png “accesso 1 anno”

 ExpiresByType text/css ” accedi 1 mese”

 ExpiresByType application/pdf “accedi 1 mese”

 ExpiresByType application/javascript “accedi 1 mese”

 ExpiresByType application/x-javascript “accedi 1 mese”

 ExpiresByType application/x-shockwave-flash “accedi 1 mese”

 ExpiresByType image/x -icon “accesso 1 anno”

 ExpiresDefault “accesso 7 giorni”

  ## EXPIRES HEADER CACHING ##

5.1.16. Definire un set di caratteri

Il set di caratteri viene utilizzato per rappresentare i caratteri tramite numeri. 

Nel set di caratteri ASCII, ad esempio, i numeri da 0 a 127 vengono utilizzati per rappresentare tutti i caratteri inglesi ei controlli speciali. 

La specifica di un set di caratteri è utile in quanto consente di avviare l’analisi HTML e l’esecuzione di script. La non esistenza di un set di caratteri lascia che il browser lo faccia da solo, può richiedere più tempo.

Per specificare un set di caratteri puoi definirlo a livello di server inviando un’intestazione del tipo di contenuto utilizzando la riga di comando:

Text/html; Charest = UTF-8.

5.1.17. Incorpora JavaScript per piccoli siti 

Non è consigliabile incorporare JavaScript in quanto potrebbe aumentare la dimensione di caricamento del tuo sito web. 

Tuttavia, se si tratta di un piccolo sito web, l’integrazione di JavaScript può migliorare le tue prestazioni. 

Per poterlo installare, ti consiglio di utilizzare il plugin Autoptimize :

questo è uno strumento gratuito che ti dà accesso a diverse opzioni per ottimizzare il tuo sito. 

Per usarlo, basta andare nelle opzioni riservate a JavaScript e selezionare “Aggregate JS Files”, che unirà tutti i tuoi file java in uno solo.

5.1.18. Riduci al minimo le richieste HTTP 

Il tempo di caricamento del tuo sito web nel browser di un utente può essere influenzato se ci sono più immagini o media da caricare.

Ciò è giustificato dal fatto che i protocolli HTML/HTTP non trasferiscono contemporaneamente un’elevata quantità di risorse. 

Per ovviare a questo problema che indubbiamente incide sulla velocità del tuo sito e sull’esperienza utente, devi optare per una riduzione del numero di richieste HTTP. 

Per fare ciò, ecco tre soluzioni: 

• File combinati : questo trucco consiste nel combinare tutti gli script in un unico script e tutti i file CSS in un unico foglio di stile CSS. 
• Sprite CSS : questo metodo è il più utilizzato quando si tratta di ridurre il numero di richieste HTTP. Consiste nel mettere più immagini in un unico file immagine. Pertanto, per ottimizzare il sito, è possibile, ad esempio, combinare tutte le immagini di sfondo in un’unica immagine e utilizzare le proprietà CSS background image e CSS background position per visualizzare l’immagine desiderata.

5.1.19. Fai richieste senza cookie

Il contenuto del tuo sito può essere definito in contenuto statico e contenuto con cookie. Se per le richieste statiche vengono richiesti i cookie, ciò provoca più traffico di rete e quindi più tempo di caricamento.

Pertanto, quando al termine della tua analisi delle prestazioni, Yslow ti consiglia di effettuare richieste senza cookie, la soluzione consiste in: 

• Creare un sottodominio e trasferirvi tutti i tuoi contenuti statici, facendo attenzione a non definire alcun cookie;  
• Acquista un nuovo dominio e sposta tutti i tuoi contenuti senza aggiungere cookie. 

5.1.20. Riduci le ricerche DNS

Il DNS (Domain Name System) è una directory. Quindi, una volta che ti connetti a Internet e inserisci l’indirizzo di un sito, il DNS cerca l’indirizzo IP di quel sito e ti consente di accedervi.

Durante la ricerca dell’indirizzo IP, il tuo browser non può scaricare nulla dal sito. Il numero di ricerche DNS quando un utente Internet desidera accedere al tuo sito Web per la prima volta è uguale ai diversi nomi host sulla tua pagina. 

Concretamente, questi sono i nomi host utilizzati nell’URL, nelle immagini, negli script, nei fogli di stile, ecc. 

Poiché la ricerca di tutti questi elementi richiede più tempo, sarebbe meglio dividere i componenti della pagina su due o tre nomi host per creare un compromesso tra ricerche DNS e tempo di risposta.

5.1.21. Evita errori 404 non trovati

L’errore 404 è un messaggio utilizzato dal protocollo HTTP per indicare al browser che per una determinata richiesta non è stata trovata alcuna risorsa. 

Ma sapendo che le richieste HTTP aumentano il traffico del tuo sito sprecando risorse del server e fornendo una cattiva esperienza utente, sarebbe meglio evitarle il più possibile.

5.1.22. Ridurre il numero di elementi DOM

Innanzitutto, il DOM è un elemento che definisce la struttura di una pagina HTML. Secondo Google Page Insights è eccessivo quando la sua dimensione supera i 1500 tag:

un DOM più grande richiederà più memoria sia a livello del tuo browser che a livello dei fogli di stile. Per ridurre il DOM, la soluzione sarebbe quella di ridurre le dimensioni della tua pagina HTML per semplificare gli elementi e quindi il tempo di caricamento. 

Ecco un video per andare oltre:

5.1.23. Configurare i tag di entità E-TAG

I tag di entità E-tag sono un protocollo HTTP coinvolto nel riconoscimento e nella convalida degli elementi archiviati nella cache.

Questi tag, infatti, consentono di sapere se un elemento che si trova nella cache corrisponde a quello del server di origine. Gli elementi convalidati possono essere immagini, codice, script, ecc. 

Quindi se tra due visite è stato modificato un elemento sul tuo sito, il server e il browser dell’utente finale avranno E-tag diversi e il file verrà quindi rispedito. In caso contrario, il file non viene più inviato, il che contribuisce quindi al caricamento rapido della pagina sullo schermo dell’utente Internet.

5.1.24. Utilizzare una rete di distribuzione di contenuti CDN

Si tratta di un insieme di computer collegati in rete e che comunicano per rendere i contenuti disponibili agli utenti. Questi sono in realtà server geograficamente dispersi, offrendo così la vicinanza agli utenti di Internet.

Questa vicinanza favorisce la velocità di caricamento della tua pagina web. La CDN non è solo consigliata per caricare rapidamente i tuoi contenuti, ma anche per consentire una piacevole fruizione del tuo sito a livello globale. 

Akamai è un esempio di provider CDN. 

5.1.25. Aggiungi intestazioni scadute

L’intestazione scaduta chiede al browser se deve inviare un file al server o recuperarlo dalla cache del browser. 

L’obiettivo è impedire al browser di scaricare un file che non è stato modificato e quindi risparmiare tempo di caricamento e caricare velocemente la pagina web.

Per aggiungere intestazioni scadute: 

• puoi fare riferimento all’utilizzo di intestazioni scadute per i dati statistici; 
• Puoi usare la strategia usando l’intestazione Far Future.

Per i componenti dinamici, usa invece l’intestazione di controllo della cache: 

Per impostare l’intestazione di scadenza, puoi aggiungere le seguenti righe di codice al tuo file htaccess:

## EXPIRES HEADER CACHING ##

ExpiresActive On

ExpiresByType image/jpg “access 1 year”

ExpiresByType image/jpeg “accesso 1 anno”

ExpiresByType image/gif “accesso 1 anno”

ExpiresByType image/png “accesso 1 anno”

ExpiresByType text/css “accesso 1 mese”

ExpiresByType applicazione/pdf “accesso 1 mese”

ExpiresByType applicazione/javascript “accesso 1 mese”

ExpiresByType application/x-javascript “accedi 1 mese”

ExpiresByType application/x-shockwave-flash “accedi 1 mese”

ExpiresByType image/x-icon “accedi 1 anno”

ExpiresDefault “accedi 7 giorni”

## CACHING INTESTAZIONE SCADUTO # #

5.1.26. Evita il filtro Alphaimageloader

Questo è un filtro che risolve i problemi con i file PNG nelle versioni di Internet Explorer inferiori a 7. 

Ma a volte questo filtro blocca il rendering del browser durante il download dell’immagine. 

Per evitare questo problema, Yslow consiglia invece di preferire il gradiente PNG8. Tuttavia, se vuoi davvero usare questo filtro, sarebbe meglio se usassi l’hack di sottolineatura “filtro”.

5.1.27. Riduci

le espressioni CSS Le espressioni CSS sono proprietà che ti consentono di aggiungere JavaScript al tuo foglio di stile. 

larghezza: espressione(500 + “px”);

larghezza: espressione(document.body.clientWidth > 600 ? “600px” : “100px”);

Possono creare problemi durante il caricamento della pagina poiché le espressioni vengono valutate frequentemente. Pertanto, per superare questo problema, una soluzione sarebbe quella di utilizzare una singola espressione o un gestore.

5.1.28. Utilizzare Get per le richieste ajax

Le richieste GET e POST sono richieste HTTP utilizzate sia per ricevere che per trasmettere dati. 

Quando si effettua una richiesta di tipo XMLHTTPRequest, è meglio usare Get invece di post. 

Perché post invia intestazioni e dati in due passaggi mentre Get invia insieme dati e intestazioni. 

Tuttavia, l’utilizzo dell’intestazione non è più possibile quando l’URL supera i 2 KB.

5.1.29. Consenti memorizzazione nella cache dei dati AJAX 

Ajax sta per: JavaScript asincrono e XML. Questa forma di richiesta consente di inviare richieste asincrone al server. 

Tuttavia, poiché il loro utilizzo non garantisce che l’utente non debba attendere, sarebbe meglio migliorare le risposte per ottimizzare i tempi di attesa. 

È possibile risolvere questo problema aggiungendo un’intestazione di controllo di scadenza o cache.

5.1.30. Rimuovere i duplicati JavaScript e CSS

Durante la codifica del tuo sito web può capitare di inserire due volte lo stesso codice JavaScript o CSS. Questa potrebbe essere la causa del mancato caricamento del tuo sito. 

Questo perché i file JavaScript e CSS duplicati possono creare richieste HTTP non necessarie nei browser degli utenti. Gli script vengono valutati più volte con conseguente esecuzione ridondante e perdita di tempo.

Per risolvere questo problema, puoi prendere accordi integrando un modulo di gestione degli script nella tua pagina HTML utilizzando il tag script.

<script type=”text/JavaScript”

Puoi farlo anche in PHP creando la funzione insertscript.

<? Inserzioni antisommossa in PHP (“menu.js”) ?>

Ecco un video che mostra come farlo:

5.1.31. Riduci la dimensione dei cookie 

I cookie sono elementi inviati da un server web e memorizzati sul tuo computer. Informano il server delle tue abitudini di navigazione.

 Possono essere utilizzati per:

• registrare le tue abitudini di navigazione;
• Ti colleghi a un sito web;
• Salva le tue preferenze per un sito.

La loro dimensione è importante per le prestazioni del tuo sito poiché i cookie impostati possono accumularsi e aumentare le dimensioni del tuo sito.

Per ridurre le dimensioni dei cookie, è possibile eseguire le seguenti azioni:

• Eliminare i cookie non necessari;
• Imposta la dimensione del cookie sul valore più basso possibile;
• Impostare i cookie nei domini appropriati;

5.1.32. Metti lo script Java in fondo al documento HTML

Come già sai, JavaScript blocca il normale caricamento del tuo sito web. 

Quando lo posizioni nella parte superiore della pagina, i browser lo eseguono prima di caricare il resto della pagina. Puoi quindi rimediare a questo stato di cose spostando i tuoi script in fondo alla pagina.

Puoi farlo usando un plugin: “JavaScript to footer”. Basterà solo attivarlo in modo che i tuoi script vengano spostati verso il basso.

5.1.33. Usa JavaScript e CSS esternamente  

L’utilizzo di file Java e CSS esternamente fa sì che vengano memorizzati nella cache dal browser client, questo riduce la dimensione delle richieste HTML e quindi consente alla tua pagina di caricarsi più velocemente.

L’utilizzo di CSS in un file esterno è più semplice e flessibile, a differenza di inserirlo direttamente in una pagina. Per utilizzare i CSS esternamente, inizia creando un file che porterà il nome degli stili a cui aggiungiamo l’estensione CSS.

Una volta creato il file, deve essere aggiunto alla pagina del tuo sito utilizzando il <link>

Utilizzando la riga di codice:

< Link> rel= “stylesheet” href=” style.css”\>

Per utilizzare Java da un file esterno, devi iniziare creando il tuo file a cui aggiungerai l’estensione Java (.JS)

Quindi a livello della tua pagina HTML, aggiungi questo script usando il tag < script>

Usando la riga di codice:

<Script src=” percorso/per/lo/script.js”></script>

5.1.34. Rendi piccola la favicon e abilita la sua memorizzazione nella cache 

La parola favicon nasce dalla contrazione delle parole inglesi favorite e icon. Designa il file dell’icona. In breve, è l’icona che simboleggia il tuo sito web.

Questa funzionalità è stata introdotta dalla versione 5 del browser Internet Explorer prima di essere presa in considerazione da altri browser. 

Quindi, come funzionalità, viene richiesta dal browser del client al server. Se è assente, provoca a 404 mentre se la sua dimensione è elevata richiede molto sforzo da parte del server che può essere la causa del lento caricamento del tuo sito web.

Per evitare questo problema, dovrai assicurarti che la dimensione non superi 1 KB. Puoi memorizzarlo nella cache impostando l’intestazione di scadenza.

5.1.35. Evitare il ridimensionamento delle immagini in HTML

L’uso dell’HTML per definire la dimensione delle immagini, in particolare gli attributi di altezza e larghezza, non è una buona idea poiché portano ad un aumento delle dimensioni di queste immagini. 

Di conseguenza, una volta scaricate dal browser del cliente, le immagini diventano più grandi, il che aggiunge tempo al caricamento della pagina del browser del visitatore.

5.1.36. Evita vuoto

src o href src e href sono attributi HTML, ti permettono di definire le condizioni di esistenza di un elemento (video, immagini, testi).

attributo src permette di indicare l’origine di un elemento mentre l’ href permette di indicare il percorso attraverso il quale accedere a questo elemento.

Quando lasci questi due elementi vuoti, nella tua pagina, puoi aspettarti il ​​silenzio del browser degli utenti. 

Infatti, quando src e href non sono definiti, i browser inviano diverse richieste al server. Questa è la causa del traffico elevato sui server, bloccando così il caricamento della pagina.

Ecco l’elenco quasi esaustivo di raccomandazioni che generalmente fornisce Gtmetrix. Ecco alcuni suggerimenti aggiuntivi da utilizzare:

5.2. Come ottimizzare il tuo sito WordPress con i plugin?

L’uso del codice per migliorare il tuo sito può diventare imbarazzante perché richiede molto sforzo. È in questa prospettiva che vi suggerisco anche di ottimizzare i vostri siti:

5.2.1. Installa o meno gtmetrix 

Dopo aver analizzato la velocità del tuo sito WordPress, ti rendi conto che il tempo di caricamento è elevato. 

Vediamo come ottimizzare la velocità del tuo sito web utilizzando il plugin Gtmetrix.

Prima di iniziare, dovrai conoscere il tuo: 

• nome di dominio;
• Credenziali al tuo sito WordPress.

Dopo aver effettuato l’accesso alla dashboard, vai al menu a sinistra, trova e fai clic su plug-in e seleziona aggiungi nuovo plug-in. 

Una volta terminato, cerca nella nuova finestra che appare di fronte a te il plugin Gtmetrix. Non appena lo trovi, installalo e attivalo. 

Ora che il tuo sito WordPress ha il plugin WordPress, puoi iniziare il processo di ottimizzazione. Per questo è necessario registrare una chiave API. 

Per farlo è sufficiente andare sul sito gtmetrix e registrarsi inserendo la propria email. Dopo la registrazione, copia e incolla la tua chiave API e inseriscila nel campo indicato a livello di WordPress. 

Salvare le modifiche. Torna indietro e nelle impostazioni del plug-in Gtmetrix ed esegui i test. Se la tua API è installata correttamente, vedrai il tuo punteggio. In caso contrario, riprendere il processo di installazione dell’API.

Inoltre, se la tua API è installata correttamente, vedrai i risultati del test della tua pagina. Dai consigli, ottimizza il tuo sito per renderlo migliore. 

Lo scopo dell’installazione del plugin Gtmetrix è quello di visualizzare i risultati dell’analisi del tuo sito direttamente sulla tua dashboard.

Tuttavia, prima di procedere con le varie modifiche, sarebbe opportuno salvare la versione attuale del proprio sito web.

Per fare ciò, devi solo installare e attivare il plugin Updraft Altro.

Questo plugin ti permette di avere un backup completo dell’ultima versione del tuo sito web, che sia:

• Il database; 
• plugin;
• Temi;
• Dai tuoi download.

Una volta terminato, puoi ripristinare il tuo sito se si verifica un errore durante l’ottimizzazione.

Di conseguenza, puoi vedere nelle tue analisi quali pratiche Gtmetrix consiglia di eseguire per migliorare la velocità di caricamento del tuo sito. 

A seconda di ciascuna linea guida di ottimizzazione, puoi utilizzare i plug-in per ottimizzare completamente il tuo sito.   

5.2.2. Plugin di WordPress per migliorare la velocità del tuo sito web

Ecco alcuni plugin di WordPress che ti aiuteranno a configurare il tuo sito per ottenere risultati di caricamento rapidi. 

Plugin 1: Enabler CDN

Il plug-in Enabler CDN gratuito viene utilizzato per distribuire KeyCDN.

Veloce e leggero, questo plugin ti consente di:

• collegare le risorse da caricare da una CDN;
• Definire le directory;
• Imposta esclusioni (directory o estensioni)
• Abilita o disabilita CDN per HTTPS.

Plugin 2: CAOS

Il plug-in CAOS gratuito viene utilizzato per sincronizzare Google Analytics in locale. Si integra con Analytics Optimization Suite e ti consente di ospitare localmente analytics.js/gtag.js/ga.js e mantenerlo aggiornato.

Inoltre, ogni volta che esegui una scansione del tuo sito web su Google Pagespeed Insights, Pingdom o Gtmetrix ti dice di usare la cache del browser. Il tempo di scadenza della cache è stato impostato su 2 ore. 

Per questo motivo, il plug-in CAOS ti darà un punteggio più alto su Pagespeed e Pingdom e renderà più veloce il caricamento del tuo sito Web perché il browser dell’utente non deve andare avanti e indietro per scaricare il file dal server esterno a Google.

Permette tra l’altro:

• di modificare l’ordine di accodamento;
• Imposta il periodo di scadenza dei cookie;
• Per forzare la disabilitazione delle impostazioni di visualizzazione;
• Aggiungi manualmente il codice di monitoraggio all’intestazione e al piè di pagina.

Plug-in 3: Perf Matters

Il plug-in perfmatters per le prestazioni utilizzato per eliminare le richieste HTTP non necessarie e disabilitare elementi come Emoji e “Incorpora”.

Plugin 4: González 

Gonzales consente di disabilitare condizionalmente CSS, JS e persino plugin a seconda della pagina che stai visitando.

È uno strumento semplice e leggero con il quale puoi sbarazzarti di un sito Web sovraccarico escludendo i file CSS e JS salvati non necessari.

Per usarlo, devi pagare una licenza, il cui prezzo varia tra $ 29 e $ 199.

Plugin 5: Immaginare 

Il plug-in Imgify ti consente di ottimizzare le tue immagini direttamente in WordPress. Una volta abilitate, tutte le tue immagini, comprese le miniature, possono essere ottimizzate automaticamente quando vengono caricate su WordPress. 

Puoi anche utilizzare Imagify per convertire gratuitamente le immagini web.

Non è gratuito però, ti permette di ottimizzare fino a 25 MB di immagine al mese. L’opzione a pagamento consente di ottimizzare tra 1 GB e 50 GB di immagine al mese.

Consente di scegliere un file immagine e ottimizzarlo;

• Supporta file PDF;
• Può rigenerare facilmente le tue miniature;
• Ottimizza le immagini del tema che hai attivato sul tuo sito WordPress;
• Può supportare più chiavi API.

Una volta terminate le varie impostazioni, scansiona nuovamente il tuo sito su gtmetrix.com o con il plugin per vedere le modifiche. 

Questo elenco di plugin non è esaustivo, ce ne sono ancora altri che ti permetteranno di risolvere diversi altri problemi di ottimizzazione. Li completerò man mano che li scoprirò.

Sebbene Gtmetrix sia uno strumento eccezionale e potente per analizzare le prestazioni del tuo sito web, ti presento altri strumenti di analisi.

Capitolo 6: Altri strumenti di analisi delle prestazioni dei siti Web

In questo capitolo, presento alcuni strumenti di analisi delle prestazioni dei siti Web. Farò anche un confronto con lo strumento Gtmetrix.

6.1. Altri strumenti per analizzare le prestazioni del tuo sito web

6.1.1.  Dareboost 

Dareboost è uno strumento di analisi delle prestazioni che può essere utilizzato per analizzare il tuo sito web. Può funzionare correttamente in più browser sia su PC che su dispositivo mobile. 

Analizza il tuo sito web e assegna un punteggio di 100 punti. Visualizza anche le correzioni e le ottimizzazioni che devi apportare al tuo sito.

Dareboost ha diverse caratteristiche e caratteristiche. Soprattutto perché non solo ti consente di testare la velocità del tuo sito, ma anche di monitorare, confrontare e impostare avvisi per i tuoi siti web.

Quando esegui un’analisi con dareboost, hai accesso a diverse informazioni tra cui: 

• le migliori pratiche che dovresti adottare;
• Alcune informazioni sullo stato del tuo sito in relazione al rispetto degli standard web; 
• Informazioni sul tipo di server, CMS o framework che utilizzi sul tuo sito.
• Le pratiche che segui.
• Una tabella riepilogativa che ti fornisce il punteggio della tua pagina, il browser da cui esegui il test, la posizione del server.

Anche se puoi trovare molti dati gratuitamente, lo strumento offre tre piani:

Il piano “performance” del valore di 310 euro al mese questo piano ti consente di:

• Generare report illimitati 
• Monitorare automaticamente 15 pagine Web
• Impostare il monitoraggio dell’analisi a una frequenza di 30 minuti 
• Conserva i tuoi dati per 6 mesi 
• Condividi i tuoi account con 10 persone 
• Accedi a 13 sedi di test
• Esegui consultazioni e analisi utilizzando un’API.

Un business plan: questo piano ha un valore di 49 euro al mese, ti dà accesso a:

• Report di analisi illimitati
• Monitoraggio di 5 pagine web con frequenza giornaliera 
• Conservazione dei tuoi dati per 6 mesi 
• Condivisione dei tuoi dati con tre persone 
• Consultazione e analisi utilizzando un’API
• Accesso a 13 sedi di test 

Un piano personalizzabile che ti consente di configurare le tue scelte. Tuttavia, questo piano predefinito costa 19 euro al mese e ti consente di fare:

• 50 analisi al mese. 
• Monitoraggio automatico con frequenza giornaliera Archiviazione 
• dei tuoi dati per 1 mese 
• Condivisione dei tuoi dati con una sola persona 
• Consultazione tramite API e accesso da 13 postazioni di prova.

 6.1.2.    Pingdom

Pingdom è un sito che offre il monitoraggio dei siti Web per avvertire della loro latenza. Offre azioni come:

• Monitoraggio sintetico: per monitorare l’esperienza utente dei visitatori dei tuoi siti web.
• Monitoraggio di utenti reali: per migliorare le prestazioni del tuo sito in base alle informazioni raccolte su di loro.

Pingdom può anche creare avvisi per informarti dei risultati del tuo sito web tramite e-mail. 

La suite di monitoraggio Pingdom è disponibile a partire da $ 42 al mese. Il sito offre attualmente una prova gratuita con un prezzo di $ 10 al mese per ciascuna opzione di monitoraggio.

Rinomato per la sua facilità d’uso, pingdom ti consente di testare la velocità del tuo sito da sette località:

• Giappone  
• Germania
• Inghilterra
• Brasile
• Washington 
• Australia
• San Francisco.

Quando analizzi le prestazioni del tuo sito con questo strumento, otterrai informazioni su:

• Il punteggio;
• tempo di caricamento;
• La dimensione totale della pagina scansionata;
• Il numero di richieste;
• Il luogo della prova;
• La percentuale di siti per cui il tuo punteggio è più alto. 

Oltre ai punteggi, l’analisi pingdom ti rivela anche i codici di stato HTTP. Questo è un messaggio utilizzato per indicare l’esito positivo o negativo di una richiesta. Esistono tre codici pingdom:

• codice 200 per notificare che la richiesta è andata a buon fine;
• 301 codici per una richiesta la cui risorsa è stata spostata
• 404 codici per una richiesta le cui risorse non sono state trovate.

Dopo i codici di risposta HTTP, ora hai la dimensione del contenuto che può essere:

• Per tipo di contenuto;
• O per tipo di dominio.

Come puoi immaginare, maggiore è questa dimensione, più significherà che il tuo sito web deve essere ottimizzato.

L’ultimo pezzo dell’analisi pingdom sono i grafici a cascata. Questi sono anche elementi a cascata che forniscono informazioni su tutte le query disponibili su un sito web.

6.1.3.    Tendenze rialziste 

Uptrends è uno strumento di analisi delle prestazioni del sito Web che ti consente di ottimizzare il tuo sito Web monitorando: la 

• pagina del tuo sito Web;
• Applicazioni Web;
• prestazioni web;
• API;
• Utenti effettivi;
• Il server.

Offre 5 piani suddivisi in due categorie: 

la prima prevede 3 piani i cui servizi sono già predefiniti. 

Sono:

• Piano di avviamento: costa $ 12,02 al mese e consente di monitorare 10 indirizzi URL;
• Il piano bonus vale $ 34,52 con un’offerta di 50 pagine web da guardare;
• Il piano professionale vale $ 168,27 e ti consente di monitorare 250 pagine web.
• Gli ultimi due piani sono definiti da te. Tuttavia, il piano aziendale parte da $ 28,79 al mese, mentre il piano “impresa” parte da $ 52,08 al mese.

Il software Uptrends consente di analizzare un sito Web in base a diversi criteri. Fornisce quindi un’analisi a cascata degli elementi della pagina.

6.1.4. Google PageSpeed ​​Insight

Questo è uno strumento gratuito offerto da Google per misurare la velocità di caricamento del tuo sito web. Una volta inserito il tuo indirizzo URL, questo software analizza il tuo sito e genera le condizioni per aumentare questa velocità. 

I risultati ottenuti attraverso il pagespeed insight sono ottenuti grazie ai dati forniti da:

• The First contentful Paint: Il momento della comparsa della prima immagine o del primo testo;
• Indice di velocità: quanto velocemente la pagina è disponibile;
• La pittura più ricca di contenuti: quando viene visualizzata l’immagine o il testo più grande;
• Il ritardo prima dell’interattività: il tempo impiegato dalla pagina per diventare completamente interattiva
• Il tempo di blocco totale: la somma di tutti i ritardi tra l’FCP e il ritardo prima dell’interattività;
• Spostamento cumulativo del layout: il movimento degli elementi visibili.

La seconda parte riguarda i suggerimenti che raccolgono tutte le pratiche consigliate per aumentare la velocità del tuo sito.

 6.1.5. pagina web di prova 

Questo è uno strumento gratuito che ti consente di eseguire un test di velocità di caricamento della pagina da più posizioni sulla terra e tramite browser come Internet Explorer e Google Chrome. 

Una volta sul sito hai la possibilità di fare un’analisi semplice o avanzata. Ad ogni modo, hai la possibilità di determinare diverse opzioni come i parametri di navigazione, il luogo del test e molte altre opzioni.

Un’analisi su pagina web test permette di avere tre diversi grafici che rappresentano: 

• I parametri del test ei risultati delle potenziali analisi; 

• La suddivisione delle caratteristiche principali del tuo sito;
• La panoramica della struttura delle tue pagine.

 6.1.6      Prova il mio sito

Questa è una piattaforma per analizzare le prestazioni di caricamento di un sito web mobile. 

Facile da usare, è una soluzione per capire i problemi di visualizzazione di un sito su mobile. 

Sono inclusi i tempi di caricamento della pagina e diversi suggerimenti per ottimizzare il caricamento del sito.

6.1.7. Test del sito web della CDN chiave 

Key CDN è anche uno strumento di analisi della velocità del sito web. Offre una prova gratuita di 14 giorni che ti consente di eseguire i tuoi test di velocità da 10 località diverse, vale a dire:

• Francoforte;
• Amsterdam;
• Londra;
• New York ;
• Dallas;
• Senza Francisco;
• Singapore;
• Sydney;
• Tokio;
• Bengaluru.

Lo strumento consente di eseguire oltre a test di velocità e prestazioni, un controllo dell’intestazione HTTP, un test HTTP/2 e un test brotli.

L’analisi effettuata dà il seguente risultato:

• A punteggio;
• Il tempo di caricamento della pagina; 
• La dimensione di caricamento;
• Il numero di richieste.

Successivamente, lo strumento mostra le migliori pratiche per l’ottimizzazione del sito Web con i gradi di rendimento. 

Hai anche diagrammi che rappresentano i diversi tipi di richieste di contenuto (per tipo, per dominio). Così come la dimensione dei contenuti per dimensione, per tipo e per dominio.

Inoltre, non perderai la visualizzazione dettagliata delle query nello strumento a cascata.

6.2. Confronto di Gtmetrix con alcuni strumenti di analisi

In questa parte, faccio un’analisi tra Gtmetrix e alcuni strumenti presentati in 6.1. per individuare lo strumento più adatto ad un’analisi della velocità dei siti web.

Gli strumenti che prendo in considerazione in questo confronto riguardano lo strumento pingdom, pagespeed insight, webpagetest e gtmetrix.

6.2.1. Gtmetrix vs Pagespeed Insights: per 

quanto riguarda i punti in comune, va notato che: 

• Gtmetrix e Pagespeed insights consentono test mobili;
  Per il prezzo, Gtmetrix è a pagamento mentre Pagespeed Insights è gratuito;
• Non è possibile impostare la posizione del test sullo strumento Pagespeed mentre è possibile impostare una posizione del test su Gtmetrix;
• Pagespeed non limita la connessione o il numero di test a differenza di Gtmetrix.

6.2.2. Gtmetrix vs Pingdom: 

entrambi gli strumenti sono noti per la loro facilità d’uso. Entrambi consentono di impostare una posizione di prova, eseguire scansioni su dispositivi mobili e offrono anche piani gratuiti. 

Mentre il prezzo di abbonamento più basso è $ 14,95 su gtmetrix, è $ 42,12 su pingdom.

6.2.3. Gtmetrix et webpagetest

6.2.3. Gtmetrix e webpagetest

Webpage test è uno strumento completamente gratuito e open source. Autorizza allo stesso modo di Gtmetrix la definizione di un luogo di test, la limitazione della connessione, i test mobili.

Detto questo, Gtmetrix è a pagamento e offre opzioni molto più avanzate.

Ecco fatto, hai finito di ottimizzare la velocità del tuo sito web con Gtmetrix. 

In sintesi  

Gtmetrix è uno strumento per analizzare le prestazioni di velocità del tuo sito che soddisferà le tue aspettative. Ti offre già nella sua versione base una pluralità di funzionalità che ti danno una panoramica dello stato del tuo sito. 

Con tale strumento, puoi, ad esempio, monitorare e impostare un avviso sulla tua pagina in modo che quando le prestazioni dei punteggi diminuiscono, vieni automaticamente avvisato per correggere gli errori. 

Il che sarebbe molto buono nella misura in cui avrai la possibilità di mantenere sempre veloce il tuo sito. E quindi offri ai tuoi clienti un sito che si carica sempre velocemente. 

In questo articolo, hai anche avuto l’opportunità di esaminare i vari consigli di Gtmetrix e i vari suggerimenti per implementarli.

Spero che ti abbiano aiutato a ottimizzare il tuo sito Web e ottenere molto più traffico. 

In caso di difficoltà, puoi sempre contattarmi o utilizzare a Professionista SEO.

A presto !