Analisi approfondita dello speed test di GTmetrix

Chi si occupa di siti web ha a disposizione molte opzioni per eseguire test di velocità per verificarne le prestazioni. In precedenza abbiamo dato uno sguardo approfondito allo strumento Pingdom. Oggi vogliamo approfondire come utilizzare e comprendere meglio i dati del popolare strumento di test di velocità per siti web GTmetrix.

Strumenti come questo si basano su sistemi di valutazione e punteggi, oltre che su avvisi che indicano cosa potrebbe non andare nel tuo sito. A volte questi dati possono essere poco chiari, quindi dedicare un po’ di tempo all’interpretazione del loro significato può aiutarti non solo ad aumentare i punteggi, ma anche le prestazioni del sito, che è ciò che conta davvero.

GTmetrix è stato sviluppato da GT.net, un’azienda con sede in Canada, come strumento per i suoi clienti di hosting per determinare facilmente le prestazioni del loro sito. Oltre a Pingdom, è probabilmente uno degli strumenti di verifica della velocità più conosciuti e utilizzati oggi sul web!

In effetti, il motivo per cui stiamo scrivendo questo articolo è che abbiamo molti clienti di Kinsta che ci chiedono sempre come seguire i consigli che vedono nei loro report di GTmetrix. Rispetto ad altri strumenti per sviluppatori, GTmetrix è piuttosto facile da usare e i principianti possono impararlo molto rapidamente. Utilizza una combinazione di Google PageSpeed Insights e YSlow per generare punteggi e raccomandazioni.

Test di velocità del sito web con GTmetrix — Strumento di test di velocità di GTmetrix

Opzioni di analisi di GTmetrix

La versione base di GTmetrix è completamente gratuita e puoi accedere a numerose opzioni semplicemente registrando un account. Esistono anche piani premium, ma nel post di oggi utilizzeremo la versione gratuita. Se hai un account, puoi utilizzare una serie di opzioni di analisi aggiuntive.

La prima è la possibilità di scegliere il luogo in cui testare il tuo URL. La posizione fisica scelta è molto importante in quanto si riferisce al luogo in cui il sito web è effettivamente ospitato. Minore è la latenza, più veloci saranno i tempi di caricamento. Le località attualmente disponibili sono:

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

Puoi scegliere quale browser utilizzare tra Chrome (Desktop) e Firefox (Desktop). Le versioni mobili sono disponibili nei piani premium. Ti permettono anche di modificare la velocità di connessione, il che significa che puoi simulare vari tipi di connessione per vedere come influiscono sul caricamento delle pagine.

Altre opzioni includono la possibilità di creare un video. Questo può essere utile per il debug dei problemi in quanto è possibile vedere come viene visualizzata la pagina. AdBlock Plus è un’ottima funzione. Se utilizzi un network pubblicitario di terze parti come Google Adsense, puoi attivare questa opzione per vedere l’impatto degli annunci sui tempi di caricamento.

Le opzioni aggiuntive includono l’interruzione del test onload (di cui parleremo più avanti), la possibilità di inviare un cookie insieme alla richiesta, l’utilizzo dell’autenticazione HTTP, la possibilità di inserire URL in whitelist e blacklist, la risoluzione dello schermo e il rapporto di pixel del dispositivo e l’esclusione dello user agent.

Analisi con lo strumento GTmetrix Speed Test

Una pagina web è composta da diverse risorse, come HTML, JavaScript, CSS e immagini. Ognuno di questi genera richieste per il rendering di ciò che vedi sul tuo sito web. In genere, più sono le richieste, più lento sarà il caricamento del sito web. Non è sempre così, ma nella maggior parte dei casi, sì.

Qui di seguito analizzeremo ogni sezione di GTmetrix e vedremo in modo più dettagliato cosa significano le informazioni relative alle prestazioni complessive del sito web e cosa fare per risolvere i problemi. Ricorda di non concentrarti troppo sui punteggi, ma piuttosto di apportare effettivi miglioramenti alla velocità del sito.

Riepilogo di GTmetrix
Performance
Structure
Grafico a cascata
Video
History

Riepilogo GTmetrix (punteggi e dettagli delle prestazioni)

Quando esegui l’analisi di un sito web WordPress attraverso GTmetrix, viene generato un report sulle prestazioni che include il tuo “GTmetrix Grade” e i “Web Vitals”.

Il voto di GTmetrix è calcolato in base a due parametri: prestazioni e struttura.

GTmetrix Performance è il punteggio delle prestazioni ottenuto dallo strumento di verifica del sito Lighthouse
GTmetrix Structure è una metrica proprietaria sulle prestazioni che misura le prestazioni complessive di una pagina.

Nel 2020, Google ha introdotto un insieme standardizzato di prestazioni web e metriche di esperienza utente chiamato Web Vitals. Web Vitals è composto da diverse metriche, ma quelle prese in considerazione da GTmetrix sono Largest Contentful Paint (LCP), Total Blocking Time (TBT) e Cumulative Layout Shift (CLS).

Il Largest Contentful Paint (LCP) è il tempo necessario per caricare la parte più grande della pagina. Per alcuni siti, l’LCP può essere un’immagine principale di grandi dimensioni, mentre in altri siti l’LCP può riferirsi al testo del corpo.
Il Total Blocking Time (TBT) è la quantità di tempo in cui una pagina viene bloccata prima che un utente possa interagire con essa. I CSS e i JS che bloccano il rendering possono avere un impatto enorme sul TBT.
Il Cumulative Layout Shift (CLS) si riferisce allo spostamento degli elementi durante il caricamento di una pagina. Ad esempio, il layout di una pagina contenente dei tweet incorporati può cambiare drasticamente durante il caricamento della pagina.

Nel nostro esempio, stiamo utilizzando il dominio kinstalife.com, ospitato su Kinsta. Nel nostro primo test di velocità, il nostro sito ha registrato le seguenti statistiche.

Voto GTmetrix – B
Prestazioni GTmetrix – 85%
Struttura GTmetrix – 83%
LCP – 1.0s
TBT – 0ms
CLS – 0

Test di velocità GTmetrix per kinstalife.com.

Abbiamo poi eseguito un ulteriore test e ora il nostro voto GTmetrix è “A”! Cosa significa? Potresti notarlo anche tu se esegui più volte il test di velocità di GTmetrix sul tuo sito web. Uno dei motivi per cui questo accade è la cache, sia la cache DNS che la cache del server. Scopri perché più avanti nel grafico a cascata.

Il nostro secondo test di velocità con GTmetrix.

La pagina di riepilogo di GTmetrix contiene anche una visualizzazione della velocità, che mostra una timeline degli eventi chiave durante il caricamento di una pagina. Nella schermata sottostante, puoi vedere TTFB, FCP, LCP, tempo di caricamento, tempo di interattività e tempo di caricamento completo di kinstalife.com.

Nella parte inferiore della pagina di riepilogo sono presenti anche le sezioni — In fondo alla pagina di riepilogo, ci sono anche le sezioni “Top issues” e “Page details”. Sotto la voce “Top issues” puoi vedere un elenco di elementi ad alta priorità da correggere, mentre “Page details” fornisce una ripartizione delle percentuali e delle dimensioni dei file della pagina.

Performance

La scheda “Performance” di GTmetrix mostra una serie di utili metriche ricavate dai dati sulle prestazioni di Lighthouse. Oltre a LCP, TBT e CLS mostrati nella pagina di riepilogo, la sezione “Performance Metrics” mostra anche Speed Index (SI), Time to Interactive (TTI) e First Contentful Paint (FCP).

Metriche delle prestazioni di GTmetrix Lighthouse. — Sezione Performance Metrics in GTmetrix Lighthouse.

Sebbene la sezione “Performance Metrics” non mostri esattamente cosa correggere, offre una buona panoramica sulle principali metriche dell’esperienza utente che si possono migliorare.

Più in basso nella pagina, GTmetrix mostra anche alcune statistiche più tradizionali sul “Browser Timing”, i tempi del browser, come Onload Time, Time to First Byte, Fully Loaded Time e altre ancora. In passato, queste metriche tradizionali erano molto importanti. Tuttavia, dato che Google ha aperto la strada a metriche standardizzate con Web Vitals, ti consigliamo di ottimizzarle. Nella maggior parte dei casi, l’ottimizzazione per i Web Vitals porterà a buoni risultati anche per quanto riguarda i tempi del browser.

Structure

Nella scheda “Structure” di GTmetrix puoi visualizzare i problemi specifici che influiscono sulle prestazioni del sito. Questa pagina è molto utile perché fornisce informazioni utili come “eliminare le risorse che bloccano il rendering” e “minificare il CSS” per iniziare a ottimizzare il tuo sito.

Cercheremo di trattare i problemi più comuni e più diffusi che i proprietari di siti WordPress si trovano ad affrontare. Assicurati di mettere tra i preferiti questo post perché lo aggiorneremo costantemente. In genere, se migliori questi aspetti sul tuo sito, dovresti notare un aumento delle prestazioni.

Serve Scaled Images

Quando si tratta di lavorare con le immagini su un sito web, dovresti sempre cercare di caricarle in scala e non lasciare che il CSS le ridimensioni. Se non lo fai, ti ritroverai con la raccomandazione “Serve scaled images” (Servire immagini in scala). Se utilizzi WordPress, per impostazione predefinita, questo ridimensiona le immagini quando vengono caricate nella libreria multimediale. Queste impostazioni si trovano in “Impostazioni > Media” Dovrai assicurarti che la larghezza massima sia vicina alla larghezza del tuo sito. In questo modo il CSS non cercherà di ridimensionare l’immagine per adattarla al suo interno. Puoi anche ridimensionarle automaticamente con un plugin per l’ottimizzazione delle immagini.

Inline Small CSS

L’integrazione del CSS è solitamente sconsigliata perché aumenta le dimensioni complessive del download della pagina richiesta. Tuttavia, se il tuo sito è piccolo, con richieste minime, potrebbe migliorare le tue prestazioni.

Per inserire facilmente i CSS in linea puoi utilizzare un plugin gratuito come Autoptimize. Basta selezionare l’opzione “Inline all CSS?” e assicurarsi di aver escluso i file CSS aggiuntivi che non si vogliono inserire in linea.

autoptimize inline css — Autoptimize inline CSS

Inline small JavaScript

Come per l’integrazione in linea di CSS di piccole dimensioni, la stessa cosa vale per l’inlining di JavaScript di piccole dimensioni. Di solito è sconsigliato perché aumenta le dimensioni complessive del download della pagina richiesta. Tuttavia, se il tuo sito è piccolo, con richieste minime, potrebbe migliorare le tue prestazioni. Anche in questo caso, puoi utilizzare le impostazioni JavaScript di Autoptimize.

Leverage Browser Caching

Sfruttare la cache del browser è una raccomandazione molto comune con cui le persone hanno difficoltà. Ciò è dovuto al fatto che il server web non dispone delle intestazioni di cache HTTP corrette. Consulta il nostro post di approfondimento su come risolvere l’avviso di sfruttare la cache del browser. Puoi risolvere questo problema solo sulle risorse che controlli. Ad esempio, se lo vedi su network pubblicitari di terze parti, non puoi fare nulla.

Serve Resources From a Consistent URL

Se vedi che le risorse vengono servite da un URL coerente, è molto probabile che ci siano risorse identiche servite dallo stesso URL. Spesso questo può accadere quando ci sono delle stringhe di query. Scopri come rimuovere le stringhe di query dalle risorse statiche. Una volta eliminate, non dovrebbe più essere necessario caricarle due volte.

Defer Parsing of JavaScript

JavaScript e CSS sono di default render-blocking. Ciò significa che possono impedire la visualizzazione della pagina web finché non vengono scaricati ed elaborati dal browser. L’attributo defer indica al browser di rimandare il download della risorsa fino al completamento dell’analisi dell’HTML. Un modo semplice per risolvere questo problema è quello di utilizzare i plugin gratuiti Autoptimize o Async JavaScript. Dai un’occhiata al nostro post approfondito su come eliminare i JavaScript e i CSS che bloccano il rendering.

Per una spiegazione approfondita, leggi: Come posticipare il parsing di Javascript in WordPress (4 metodi).

Minify CSS and JavaScript

La minificazione consiste essenzialmente nel rimuovere tutti i caratteri non necessari dal codice sorgente senza modificarne la funzionalità. Questo può includere interruzioni di riga, spazi vuoti, rientri, ecc. In questo modo si possono risparmiare byte di dati e accelerare i tempi di download, analisi ed esecuzione.

Anche in questo caso, il plugin gratuito Autoptimize è ottimo. Assicurati semplicemente che le voci “Optimize JavaScript Code” e “Optimize CSS Code” siano entrambe selezionate. Se hai un sito di grandi dimensioni, potresti anche giocare con le impostazioni avanzate sottostanti, in quanto alcune potrebbero danneggiare le prestazioni del tuo sito. L’integrazione o la combinazione di CSS e JavaScript su siti di grandi dimensioni è solitamente sconsigliata. Qui entra in gioco la potenza di HTTP/2.

minify css and javascript code — Autoptimize minify CSS and JavaScript

Optimize Images

Secondo HTTP Archive, le immagini rappresentano in media il 66% del peso totale di una pagina web. Quindi, quando si tratta di ottimizzare un sito WordPress, le immagini sono di gran lunga il primo punto da cui partire! Sono più importanti degli script e dei font.

In un mondo perfetto, ogni immagine dovrebbe essere compressa e ottimizzata prima di essere caricata su WordPress. Ma purtroppo questo non è realistico. Per questo motivo, ti consigliamo di utilizzare un buon plugin per l’ottimizzazione delle immagini. Questo ti aiuterà a comprimere automaticamente le immagini, a ridimensionarle e a garantire che siano leggere e veloci da caricare sul tuo sito. Dai un’occhiata al nostro post approfondito su come ottimizzare le immagini per il web.

Reduce Initial Server Response Time

Per WordPress, il principale responsabile dei tempi di risposta iniziali del server è la mancanza di caching delle pagine. Senza il caching delle pagine, WordPress utilizza PHP per creare dinamicamente le pagine per ogni singola richiesta, il che significa che può essere sovraccarico di richieste in tempi brevi. Con il caching delle pagine abilitato, il tuo sito può utilizzare file HTML pre-generati, il che è molto più veloce e scalabile rispetto all’utilizzo di PHP per soddisfare ogni richiesta di pagina.

Se sei cliente Kinsta, non devi preoccuparti del caching delle pagine perché ce ne occupiamo noi con la nostra configurazione Nginx. Se il tuo host WordPress non supporta il caching delle pagine, puoi installare un plugin di caching come WP Rocket o W3 Total Cache. Per ridurre ulteriormente i tempi di risposta del server, ti consigliamo di integrare Cloudflare APO con il tuo sito WordPress. Questo innovativo servizio di ottimizzazione di Cloudflare distribuisce le pagine HTML del tuo sito in tutto il mondo, riducendo così i tempi di risposta del server a livello globale.

Minify HTML

Proprio come i CSS e i JavaScript, anche l’HTML può essere minificato per eliminare i caratteri non necessari e risparmiare byte di dati per accelerare i tempi di esecuzione.

Il plugin gratuito Autoptimize è ottimo anche per questo scopo. Basta attivare l’opzione “Optimize HTML code”.

autoptimize minify html — Autoptimize ottimizza il codice HTML

Enable GZIP Compression

GZIP è un formato di file e un’applicazione software utilizzata per la compressione e la decompressione dei file. La compressione GZIP viene attivata lato server e consente di ridurre ulteriormente le dimensioni dei file HTML, fogli di stile e JavaScript. Non funziona sulle immagini perché queste sono già compresse in modo diverso. Alcuni hanno riscontrato riduzioni fino al 70% grazie alla compressione. Si tratta probabilmente di una delle ottimizzazioni più semplici che si possano fare per quanto riguarda WordPress. Nota: la compressione GZIP è abilitata di default su tutti i server Kinsta.

Per abilitare la compressione GZIP in Apache, è sufficiente aggiungere il seguente codice al file .htaccess.

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/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
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Se utilizzi NGINX, aggiungi semplicemente quanto segue al file nginx.conf.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg xml image/x-icon application/javascript application/x-javascript;

Dai un’occhiata anche al nostro post di approfondimento su come attivare la compressione GZIP.

Minimize redirects

Ridurre al minimo i reindirizzamenti HTTP da un URL all’altro riduce i tempi di attesa e gli RTT aggiuntivi per gli utenti. Dai un’occhiata al nostro post sui reindirizzamenti di WordPress in cui abbiamo scoperto che 2 reindirizzamenti errati aumentavano i tempi di caricamento del sito del 58%! Semplicemente, i reindirizzamenti di WordPress rallentano il tuo sito. Ecco perché vale la pena dedicare un po’ di tempo a ridurre al minimo il numero di reindirizzamenti che i visitatori del sito subiscono.

Specify a cache validator

Il consiglio di specificare un validatore di cache appare quando mancano le intestazioni della cache HTTP. Queste dovrebbero essere incluse in ogni risposta del server d’origine, in quanto convalidano e impostano la lunghezza della cache. Se le intestazioni non vengono trovate, ogni volta verrà generata una nuova richiesta per la risorsa, aumentando il carico sul server. L ‘utilizzo delle intestazioni nella cache fa sì che le richieste successive non debbano essere caricate dal server, risparmiando così banda e migliorando le prestazioni per l’utente. E ricorda che non puoi risolvere questo problema su risorse di terze parti che non controlli.

Esistono diverse intestazioni di cache HTTP che possono essere utilizzate per risolvere questa raccomandazione. Consulta il nostro post di approfondimento su come specificare un validatore di cache.

Specify image dimensions

Così come non dovresti lasciare che i CSS ridimensionino le tue immagini, dovresti anche specificare le dimensioni delle immagini stesse. Ciò significa includere la larghezza e l’altezza nel codice HTML.

Non è corretto

<img src="https://domain.com/images/image1.png">

Corretto

<img src="https://domain.com/images/image1.png" width="200" height="100">

gtmetrix specify image dimensions — Suggerimento Specificy image dimensions

Remove Query Strings From Static Resources

I tuoi file CSS e JavaScript di solito riportano la versione del file alla fine dei loro URL, come ad esempio domain.com/style.css?ver=4.6. Alcuni server e proxy non sono in grado di memorizzare nella cache le stringhe di query, anche se è presente l’intestazione cache-control:public. Per questo motivo, rimuovendole, a volte è possibile migliorare la cache. Questo può essere fatto facilmente con il codice o con i plugin gratuiti di WordPress.

Dai un’occhiata al nostro post di approfondimento su come rimuovere le stringhe di query dalle risorse statiche. E ricorda che non puoi risolvere questo problema su risorse di terze parti che non controlli.

gtmetrix remove query strings from static resources — Suggerimento Remove query strings from static resources

Specifica a Vary: Accept-Encoding header

Si tratta di un’intestazione HTTP che dovrebbe essere inclusa in ogni risposta del server di origine, in quanto indica al browser se il client è in grado di gestire o meno le versioni compresse del contenuto. Di solito, quando la compressione GZIP è abilitata, anche questo viene risolto. Tuttavia, ti invitiamo a leggere il nostro post di approfondimento su come correggere la raccomandazione specify a vary: accept-encoding header. Anche in questo caso, non è possibile risolvere questo problema su risorse di terze parti.

gtmetrix specify a vary: accept-encoding header — Suggerimento Specify a vary: accept-encoding header

Grafico a cascata di GTmetrix

Il grafico a cascata di GTmetrix mostra tutte le singole richieste della tua pagina web (come si vede di seguito). Puoi quindi analizzare ogni richiesta per capire cosa sta causando ritardi e problemi di prestazioni sul tuo sito. Di seguito troverai un riepilogo più approfondito e una definizione del significato di ciascun colore per ogni richiesta.

gtmetrix waterfall chart — Grafico a cascata di GTmetrix

Blocking (marrone)

Quando un browser carica una pagina web, le risorse JavaScript e CSS di solito impediscono la visualizzazione della pagina web finché non vengono scaricate ed elaborate dal browser. Questo ritardo viene visualizzato come blocking nel grafico a cascata di GTmetrix. Per maggiori informazioni, consulta il nostro post approfondito su come eliminare i JavaScript e i CSS che bloccano il rendering.

DNS lookup (verde acqua)

Puoi pensare al DNS lookup come a un elenco telefonico. Esistono dei server chiamati Domain Name Server che contengono le informazioni sul tuo sito web e su quale IP deve essere indirizzato. Quando esegui per la prima volta il tuo sito web su GTmetrix, questo esegue una nuova ricerca e deve interrogare i record DNS per ottenere le informazioni sull’IP. Questo comporta un tempo di ricerca aggiuntivo.

gtmetrix first dns

Quando esegui il tuo sito web su GTmetrix una seconda volta, il DNS viene memorizzato nella cache perché conosce già le informazioni sull’IP e non deve eseguire nuovamente la ricerca. Questo è uno dei motivi per cui potresti notare che il tuo sito web appare più velocemente dopo averlo fatto passare più volte da GTmetrix. Come puoi vedere nella schermata qui sotto, nel secondo test che abbiamo eseguito, il tempo di ricerca del DNS al caricamento iniziale del DOC è di 0 ms. Questo è un aspetto che molte persone interpretano in modo errato! Ti consigliamo di eseguire il test più volte e di prendere la media, a meno che tu non voglia che il DNS faccia parte del tuo report, nel qual caso puoi prendere il primo test.

gtmetrix dns lookup — Secondo DNS Lookup

Lo stesso vale per le tue risorse (JavaScript, CSS, immagini) se utilizzi un CDN. La cache di un CDN funziona come il DNS: una volta memorizzata nella cache, è molto più veloce nei caricamenti successivi. Un altro consiglio per velocizzare il DNS è quello di utilizzare il DNS prefetching. Questo permette al browser di eseguire le ricerche DNS su una pagina in background. Puoi farlo aggiungendo alcune righe di codice all’intestazione del tuo sito WordPress. Vedi alcuni esempi qui sotto.

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//cdn.domain.com">

Se invece utilizzi WordPress versione 4.6 o più recente, potresti voler utilizzare i suggerimenti per le risorse. Gli sviluppatori possono utilizzare il filtro wp_resource_hints per aggiungere domini e URL personalizzati per dns-prefetch, preconnect, prefetch o prerender.

Connection (verde)

Connection in GTmetrix si riferisce alla connessione TCP o al tempo totale necessario per creare una connessione TCP. Non è necessario capire come funziona, ma si tratta semplicemente di un metodo di comunicazione tra l’host/client e il server che deve avvenire.

Sending (rosso)

Sending è semplicemente il tempo necessario al browser web per inviare i dati al server.

Waiting (viola)

Waiting in GTmetrix si riferisce in realtà al tempo al primo byte, noto anche come TTFB in alcuni strumenti. Il TTFB è una misura utilizzata come indicazione della reattività di un server web o di un’altra risorsa di rete. In genere, qualsiasi valore inferiore a 100 ms è accettabile e rappresenta un buon TTFB. Se ti avvicini ai 300-400 ms, potresti avere qualcosa di mal configurato sul tuo server o potrebbe essere il momento di passare a uno stack web migliore. Come puoi vedere nel nostro test qui sotto, il tempo di risposta era di circa 100 ms, il che è ottimo.

Alcuni modi semplici per ridurre il TTFB consistono nell’assicurarsi che il tuo host abbia una cache adeguata e nell’utilizzare un CDN.

Dai un’occhiata al nostro post di approfondimento su tutti i modi per ridurre il TTFB del tuo sito WordPress. È anche una buona idea leggere di più sull’Edge Caching e sul modo in cui fornisce le pagine del tuo sito più velocemente ai tuoi lettori.

Receiving (Grigio)

Receiving è semplicemente il tempo necessario al browser web per ricevere i dati dal server.

Event timing

Ogni volta che richiedi una pagina, questa ha una tempistica di eventi in cui gli elementi vengono renderizzati e caricati.

First Paint (linea verde): il primo momento in cui il browser esegue qualsiasi tipo di rendering della pagina, come ad esempio la visualizzazione del colore di sfondo.
DOM Loaded (linea blu): il momento in cui il DOM (Document Object Model) è pronto.
Onload (linea rossa): quando l’elaborazione della pagina è completa e tutte le risorse della pagina (immagini, CSS, ecc.) sono state scaricate.
Fully Loaded (linea viola): il momento in cui si verifica l’evento Onload e non c’è stata attività di rete per 2 secondi.

gtmetrix event timing — Sezione Event Timing

HTTP Response Headers

Puoi anche cliccare su una singola richiesta per vedere gli header di risposta HTTP. Questo fornisce informazioni preziose. Nella schermata qui sotto possiamo vedere immediatamente cose quali: gzip è abilitato sul server web, è in esecuzione su HHVM, viene servito dalla cache (HIT, altrimenti mostrerebbe MISS ), le intestazioni cache-control, l’architettura del server (non sempre visibile), gli header expires, l’user-agent del browser e altro ancora.

gtmetrix http response header — Header di risposta HTTP in GTmetrix

Un’altra cosa da sapere è che lo strumento GTmetrix supporta HTTP/2, a differenza di Pingdom, perché attualmente utilizza Chrome 58 per eseguire i suoi test. Chrome ha aggiunto il supporto a HTTP/2 nella versione 49. Tienilo presente quando scegli quale strumento di test di velocità utilizzare.

Video

Per aiutarti a debuggare i difetti visivi e i problemi di prestazioni del frontend, l’ultima versione di GTmetrix include una scheda “Video”. Con la funzione video attivata, GTmetrix registrerà automaticamente un video incorporabile che mostra il caricamento di una pagina per ogni test delle prestazioni. Questa funzione è molto utile per il debug di problemi visivi che si presentano solo con determinate combinazioni di browser e dimensioni dello schermo.

History

Nella scheda History puoi visualizzare tutti i tuoi test di velocità passati. Gli account gratuiti hanno un limite al numero di test memorizzati. Puoi anche monitorare un URL che ti permette di tenere traccia delle prestazioni nel tempo e di vedere eventuali cambiamenti.

Una funzione davvero interessante è la possibilità di selezionare i report passati e di metterli a confronto uno accanto all’altro. Questo può rivelarsi molto utile, soprattutto quando stai effettuando delle ottimizzazioni sul tuo sito per vedere se ci sono dei miglioramenti. Ricorda che a volte si può anche esagerare con l’ottimizzazione.

compare gtmetrix reports — Confrontare i report in GTmetrix

Caso di studio – configurazione del dominio

Se hai letto fino a questo punto del nostro approfondimento su GTmetrix, allora ti aspetta una bella sorpresa. È abbastanza frustrante leggere consigli e casi di studio ma poi non avere dettagli specifici su come si è arrivati a quelle conclusioni. Ecco quindi la nostra configurazione esatta per il dominio del caso di studio utilizzato in precedenza!

Architettura

Il dominio del caso di studio (perfmatters.io) è ospitato da Kinsta in un data center situato negli Stati Uniti (posizione centrale). Kinsta utilizza HTTP/2, NGINX e MariaDB, che contribuiscono alla velocità di caricamento.
Il sito utilizza HHVM. PHP 7.3 è ora disponibile su Kinsta ed è ancora più veloce di HHVM! È possibile passare da una versione all’altra di PHP semplicemente cliccando su un pulsante.
Il sito non utilizza alcun plugin di caching. Kinsta memorizza tutto nella cache a livello di server, il che semplifica notevolmente le cose e nella maggior parte dei casi è più veloce!

Plugin WordPress

Ecco un elenco dei plugin utilizzati sul sito WordPress.

Il plugin CDN Enabler (gratuito) viene utilizzato per distribuire KeyCDN.
Il plugin CAOS (gratuito) viene utilizzato per sincronizzare Google Analytics a livello locale.
Il plugin premium perfmatters è utilizzato per eliminare le richieste HTTP non necessarie e per disabilitare elementi come le Emoji e gli Embed.
Il plugin premium Gonzalez serve a disabilitare il caricamento di alcuni script.
Il plugin premium Imagify serve per comprimere le immagini.

Tutorial consigliati e ulteriori letture:

Riepilogo

Come puoi vedere, conoscere un po’ meglio il funzionamento dello strumento di test di velocità di GTmetrix e il significato di tutti i grafici può aiutarti a prendere una decisione più orientata ai dati quando si tratta di prestazioni. Un’analisi a cascata, come la chiamiamo noi, è fondamentale per sapere come vengono caricati i tuoi singoli asset. E ricorda, quando si tratta di fare un confronto con Pingdom, si tratta di strumenti diversi e quindi è meglio attenersi all’uno o all’altro, poiché calcolano le cose in modo diverso. Hai altri fantastici consigli su GTmetrix?

Se vuoi vedere altri articoli di approfondimento come quello qui sopra, faccelo sapere nei commenti!

Brian Jackson

Brian ha una grande passione per WordPress, lo usa da più di dieci anni e sviluppa anche un paio di plugin premium. Brian ama i blog, i film e le escursioni. Entra in contatto con Brian su Twitter.