Analisi Approfondita dello Speed Test di GTmetrix

Avete molte opzioni come proprietari di siti web quando dovete eseguire degli speed test per verificarne le prestazioni. In precedenza abbiamo già analizzato approfonditamente lo Pingdom. Oggi scopriremo come utilizzare e analizzare i dati del popolare tool di test delle prestazioni dei siti web GTmetrix. Strumenti come questo si basano su sistemi di valutazione e punteggi, con messaggi di avvertimento di possibili anomalie del vostro sito. A volte questi messaggi possono essere decisamente complicati da decifrare, quindi, dedicare un po’ di tempo alla comprensione del loro significato effettivo può aiutarvi non solo ad aumentare i vostri punteggi, ma anche a migliorare le prestazioni del vostro sito, che è la cosa che conta davvero.

GTmetrix è stato sviluppato da GT.net, una società con sede in Canada, come strumento per i loro clienti del servizio di hosting per misurare facilmente le prestazioni del proprio sito. A parte Pingdom, è probabilmente uno degli strumenti di speed test più conosciuti e utilizzati oggi sul web! Infatti, la ragione per cui scriviamo questo articolo è che abbiamo molti clienti di Kinsta che ci chiedono sempre come mettere in partica i consigli che vedono nei loro report GTmetrix.

Rispetto ad altri strumenti di sviluppo, GTmetrix è abbastanza facile da usare e, se siete principianti, potete comprenderlo abbastanza velocemente. Usa una combinazione dei Google PageSpeed Insights e YSlow per generare punteggi e raccomandazioni.

Opzioni di Analisi in GTmetrix

La versione base di GTmetrix è completamente gratuita e potete accedere ad una serie di opzioni semplicemente creando un account. Offrono anche piani premium, ma per il post di oggi useremo la versione gratuita. Se avete un account potete specificare un numero di opzioni di analisi aggiuntive.

La prima si riferisce alla possibilità di scegliere la località da cui si desidera testare il proprio URL. La posizione fisica scelta è molto importante in quanto si riferisce alla posizione in cui il vostro sito web è effettivamente ospitato. Minore è la latenza, minore è il tempo di caricamento. Le posizioni attualmente disponibili sono:

• Dallas, USA
• Hong Kong, China
• London, UK
• Mumbai, India
• Sydney, Australia
• São Paulo, Brazil
• Vancouver, Canada

È possibile scegliere il browser che si desidera utilizzare. Potete provare con Chrome (desktop) e Firefox (desktop). Le versioni mobili sono disponibili nei piani premium. Consentono anche di modificare la velocità di connessione, il che significa che è possibile simulare vari tipi di connessione per vedere in che modo influiscono sul caricamento della pagina.

Un’altra opzione è la possibilità di creare un video. Questo può aiutarvi a risolvere delle anoimalie, dato che potete vedere come la pagina esegue il rendering. Adblock Plus è un’altra bella funzionalità. Se utilizzate una rete pubblicitaria di terze parti come Google Adsense, potete abilitare questa opzione per vedere qual è l’impatto complessivo sui tempi di caricamento.

Ulteriori opzioni includono l’arresto del test onload (che vedremo in seguito), la possibilità di inviare un cookie insieme alla richiesta, l’utilizzo dell’autenticazione HTTP, la possibilità di whitelist e blacklist degli URL, la risoluzione dello schermo, il pixel ratio del dispositivo e l’override dello user agent.

Analisi con lo Speed Test Tool di GTmetrix

Una pagina web è composta da diverse risorse, come HTML, JavaScript, CSS e immagini. Ognuna di queste genera richieste per rendere ciò che vedete sul vostro sito web. In genere, più richieste avete, più lento sarà il caricamento del vostro sito. Non è sempre così, ma è vero nella maggior parte dei casi.

Di seguito analizzeremo ogni sezione di GTmetrix e spiegheremo più in dettaglio che cosa significano le informazioni relative alle prestazioni generali del vostro sito e cosa fare in merito alle raccomandazioni. Ricordate di non farvi ossessionare troppo dai punteggi, ma di concentrarvi piuttosto sui miglioramenti reali alle prestazioni del vostro sito.

• Riepilogo di GTmetrix
• Prestazioni
• Struttura
• Grafico a cascata
• Video
• Cronologia

Riepilogo di GTmetrix (Punteggi di Performance e Dettagli)

Quando gestite il vostro sito WordPress attraverso GTmetrix, esso genera un rapporto sulle prestazioni che include il vostro “Punteggio GTmetrix” e i “Web Vitals”.

Il punteggio GTmetrix è calcolato in base a due metriche: prestazioni e struttura.

• Performance GTmetrix: è il punteggio delle prestazioni calcolato dallo strumento di di audit Lighthouse
• Struttura GTmetrix: è una metrica proprietaria che misura le prestazioni complessive di una pagina.

Nel 2020, Google ha introdotto una serie di metriche standardizzate per le prestazioni web e l’esperienza utente chiamate Web Vitals. I Web Vitals sono costituiti da una varietà di metriche, ma quelle che GTmetrix prende in considerazione sono Largest Contentful Paint (LCP), Total Blocking Time (TBT) e Cumulative Layout Shift (CLS).

• Largest Contentful Paint (LCP) è la quantità di tempo necessaria per caricare la maggior parte della pagina. Per alcuni siti, la LCP può essere una hero image di grandi dimensioni, mentre su altri siti, la LCP può fare riferimento al corpo del testo.
• Total Blocking Time (TBT) è la quantità di tempo durante la quale una pagina viene bloccata prima che un utente possa interagire con essa. Il render-blocking CSS e il render-blocking JS possono avere un enorme impatto sul TBT.
• Cumulative Layout Shift (CLS) si riferisce allo spostamento di elementi durante il caricamento di una pagina. Ad esempio, il layout di una pagina contenente tweet incorporati può cambiare drasticamente man mano che la pagina si carica.

Nel nostro esempio, stiamo usando il nostro dominio per i casi studio, kinstalife.com, ospitato su Kinsta. Nel nostro primo test di velocità, il nostro sito ha registrato i seguenti risultati:

• GTmetrix Grade – B
• GTmetrix Performance – 85%
• GTmetrix Structure – 83%
• LCP – 1.0s
• TBT – 0ms
• CLS – 0

Abbiamo poi eseguito un ulteriore test e ora il nostro voto GTmetrix è “A”! Cosa è successo? Potreste notare qualcosa di simile se eseguite più volte un test di velocità GTmetrix sul vostro sito web. Uno dei motivi per cui ciò accade è dovuto al caching, sia il caching DNS che il caching del server. Scopriremo il motivo più avanti, quando parleremo dell’analisi del diagramma a cascata.

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

In fondo alla pagina di riepilogo, ci sono anche le sezioni “Top Issues” e “Page Details”. Sotto “Top Issues”, potete vedere un elenco di voci ad alta priorità da correggere, mentre “Page Details” fornisce le percentuali e le suddivisioni delle dimensioni dei file della vostra pagina.

Performance

Abbiamo poi la scheda “Performance” di GTmetrix, che mostra una serie di utili metriche ricavate dai dati sulle prestazioni di Lighthouse. Oltre alle metriche LCP, TBT e CLS mostrate nella pagina di riepilogo, la sezione “Performance Metrics” mostra anche l’indice di velocità (SI), il tempo di interazione (TTI) e il First Contentful Paint (FCP).

Anche se la sezione “Performance Metrics” non mostra esattamente ciò che è necessario correggere, fornisce una bella panoramica su quali metriche chiave dell’esperienza utente si possono migliorare.

Più in basso nella pagina, GTmetrix mostra anche alcune statistiche più tradizionali del “Browser Timing”, tra cui Onload Time, Time to First Byte, Fully Loaded Time e altro ancora. In passato, queste metriche tradizionali erano molto importanti. Tuttavia, ora che Google ha aperto la strada alle metriche standardizzate come i Web Vitals, consigliamo invece di ottimizzare quelle invece che le metriche tradizionali. Nella maggior parte dei casi, scoprirete che l’ottimizzazione per i Web Vitals si traduce anche in buone metriche sulle tempistiche di navigazione.

Struttura

La scheda “Struttura” di GTmetrix è il punto in cui è possibile visualizzare i problemi specifici che influiscono sulle prestazioni del vostro sito. Questa pagina è molto utile perché vi fornisce informazioni importanti come “eliminare le risorse che bloccano il rendering” e “minificare i CSS” per iniziare a ottimizzare il vostro sito.

Cercheremo di coprire gli avvisi più comuni e popolari che di solito mettono in difficoltà i proprietari di siti WordPress. Assicuratevi di inserire questo articolo tra i preferiti, perché lo aggiorneremo costantemente. In generale, se migliorate questi aspetti sul vostro sito, dovreste vedere un aumento delle prestazioni.

Servite Immagini in Scala

Quando dovete lavorare con le immagini sul vostro sito web, dovete sempre provare a caricarle in scala e non far sì che vengano ridimensionate da CSS. Se non lo fate, finirete col visualizzare la raccomandazione serve scaled images. Se utilizzate WordPress, di default questo ridimensiona le immagini al momento del caricamento nella libreria multimediale. Queste impostazioni sono disponibili in “Impostazioni > Media”. Dovrete assicurarvi che la larghezza massima sia vicina alla larghezza del vostro sito. In questo modo il CSS non cercherà di ridimensionare l’immagine perché si adatti. Potreste anche ridimensionarle automaticamente con un plugin di ottimizzazione delle immagini.

Inserite i Piccoli CSS in Linea

In genere, non è consigliabile inserire il codice CSS in linea, in quanto aumenterà la dimensione complessiva del download della richiesta di pagina. Tuttavia, se il vostro sito è di piccole dimensioni, con richieste minime questa soluzione potrebbe migliorare le vostre prestazioni.

To easily mettere inline il vostro CSS potete usare un plugin gratuito come Autoptimize. Vi basta selezionare l’opzione “Inline all CSS?” e poi assicurarvi di aver escluso i file CSS aggiuntivi che non si trovano inline.

Inserite i Piccoli JavaScript in Linea

Proprio come l’inserimento in linea di piccoli CSS, la stessa cosa vale per l’inserimento in linea di piccoli JavaScript. Di solito non è consigliato, in quanto aumenterà la dimensione complessiva del download della vostra richiesta di pagina. Tuttavia, se il vostro sito è di piccole dimensioni, con richieste minime le prestazioni potrebbero migliorare. Di nuovo, potete usare le impostazioni JavaScript di Autoptimize.

Sfruttare il Caching del Browser

Quella di sfruttare il caching del browser è una delle raccomandazioni con cui la gente ha a che fare più spesso. Viene generata quando sul sito web non ci sono le intestazioni HTTP della cache corrette. Date un’occhiata al nostro post approfondito su come risolvere il problema dell’avviso relativo all’utilizzo della cache del browser. Potete eliminare l’avviso solo sulle risorse di cui avete il controllo. Ad esempio, se lo vedete su reti pubblicitarie di terze parti, non potete farci niente.

Servire le Risorse da un URL Coerente

Se rilevate l’avviso che avverte di servire le risorse da un URL coerente, è molto probabile che abbiate risorse identiche che vengono servite dallo stesso URL. Molto spesso accade quando ci sono di mezzo delle query string. Scoprite come rimuovere le query string dalle risorse statiche. Una volta che sono state eliminate, non dovrebbe più caricarle due volte.

Differire il Parsing JavaScript

JavaScript e CSS sono di default risorse che bloccano il rendering. Ciò significa che possono impedire la visualizzazione della pagina web fino a quando non vengono scaricati ed elaborati dal browser. L’attributo defer dice al browser di attendere il download della risorsa fino al completamento del parsing HTML. Tra i modi più semplici per risolvere questo problema ci sono i plugin gratuiti Autoptimize o Async JavaScript. Non perdete il nostro post approfondito su come eliminare JavaScript e CSS che bloccano il rendering.

Per una spiegazione approfondita, leggere: Come rinviare l’analisi di Javascript Warning in WordPress (4 metodi).

Minimizzare CSS e JavaScript

La minimizzazione consiste essenzialmente nel rimuovere tutti i caratteri non necessari dal codice sorgente senza modificarne la funzionalità. Ciò può riguardare interruzioni di riga, spazi vuot, rientri, ecc. In questo modo è possibile risparmiare byte di dati e accelerare download, analisi e tempi di esecuzione.

Il plugin gratuito Autoptimize è ottimo anche per questo. Assicuratevi semplicemente che sia selezionato “Ottimizza codice JavaScript” e “Ottimizza codice CSS”. Se disponete di un sito di grandi dimensioni, potreste anche voler giocare un po’ con le impostazioni avanzate, in quanto alcune potrebbero danneggiare le prestazioni del vostro sito. In genere non è consigliabile integrare o combinare CSS e JavaScript su siti di grandi dimensioni. È qui che entra in gioco la potenza di HTTP/2.

Se siete clienti Kinsta, potete approfittare della funzione di minificazione del codice che è incorporata direttamente nel cruscotto di MyKinsta. Questo permette ai clienti di attivare rapidamente e facilmente la minificazione automatica di CSS e JavaScript: basta un semplice clic per velocizzare i siti senza alcuno sforzo.

Ottimizzare le Immagini

Secondo HTTP Archive, ad aprile 2017, le immagini rappresentavano in media il 66% del peso totale di una pagina web. Quindi, quando si tratta di ottimizzare il vostro sito WordPress, le immagini sono di gran lunga la prima cosa da affrontare! Più importante degli script e dei font.

In un mondo perfetto, ogni immagine dovrebbe essere compressa e ottimizzata prima di essere caricata in WordPress. Ma, sfortunatamente, questo non è realistico. Per questo motivo, vi consigliamo di utilizzare un buon plugin per l’ottimizzazione delle immagini. Ciò vi aiuterà a comprimere automaticamente le vostre immagini, a ridimensionarle e ad assicurarvi che siano leggere e veloci sul vostro sito. Date un’occhiata al nostro post approfondito su come ottimizzare le immagini per il web.

Ridurre il tempo di risposta iniziale del server

Per WordPress, il principale colpevole della lentezza dei tempi di risposta iniziale del server è la mancanza di caching di pagina. Senza caching di pagina, WordPress usa PHP per costruire dinamicamente le pagine per ogni singola richiesta, il che significa che può essere sommerso rapidamente da richieste. Con il page caching abilitato, il vostro sito può servire file HTML pre-generati, il che è molto più veloce e più scalabile rispetto all’uso di PHP per soddisfare ogni richiesta di pagina.

Se il vostro sito è ospitato su Kinsta, non dovete preoccuparvi del caching di pagina, perché ce ne occupiamo noi per voi con la nostra configurazione Nginx. Se il vostro host WordPress non supporta il caching di pagina, potete installare un plugin per il caching come WP Rocket o W3 Total Cache. Per ridurre ulteriormente i tempi di risposta del server, consigliamo di integrare Cloudflare APO con il vostro sito WordPress. Questo innovativo servizio di ottimizzazione di Cloudflare distribuisce le pagine HTML del vostro sito in tutto il mondo, cosa che può ridurre i tempi di risposta del server a livello globale.

Minimizzare HTML

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

Il plugin gratuito Autoptimize è ottimo anche per questo. Abilitate semplicemente l’opzione “Ottimizza codice HTML”.

Abilitare la compressione GZIP

GZIP è un formato di file e un’applicazione software utilizzata per la compressione e la decompressione dei file. La compressione GZIP è abilitata lato server e consente un’ulteriore riduzione delle dimensioni di HTML, fogli di stile e file JavaScript. Non funzionerà sulle immagini in quanto queste sono già compresse in un modo diverso. Alcuni hanno registrato riduzioni fino al 70% per la compressione. È probabilmente una delle ottimizzazioni più facili da implementare per quel che 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.

# 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

Se utilizzate NGINX, vi basta aggiungere quanto segue al vostro 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;

E ricordate anche di leggere il nostro post approfondito su come abilitare la compressione GZIP.

Ridurre al Minimo i Redirect

Riducendo al minimo i reindirizzamenti HTTP da un URL all’altro, si eliminano ulteriori RTT e tempi di attesa per gli utenti. Date un’occhiata al nostro post sui reindirizzamenti di WordPress, in cui abbiamo scoperto che 2 redirect errati aumentavano i tempi di caricamento del sito del 58%! Chiaro e semplice, i redirect di WordPress rallentano il vostro sito. Ecco perché vale la pena dedicare del tempo a ridurre al minimo il numero dei redirect incontrati dai visitatori del vostro sito.

Specificare un Cache Validator

La raccomandazione di specificare un cache validator appare quando mancano le intestazioni HTTP della cache. Queste dovrebbero essere incluse in ogni risposta del server di origine, in quanto convalidano e impostano la lunghezza della cache. Se le intestazioni non vengono trovate, sarà generata ogni volta una nuova richiesta per la stessa risorsa, il che aumenta il carico sul server. L’utilizzo delle intestazioni di cache garantisce che le richieste successive non debbano essere caricate dal server, risparmiando così la larghezza di banda e migliorando le prestazioni per l’utente. E ricordate, non potete eliminare questo avviso su risorse di terze parti che non controllate.

Esistono diverse intestazioni HTTP della cache che possono essere utilizzate per correggere questa raccomandazione. Leggete il nostro post approfondito su come specificare un cache validator.

Specificare le Dimensioni delle Immagini

Proprio come non dovreste permettere ai CSS di ridimensionare le vostre immagini, dovreste anche specificarne le dimensioni. Ciò significa includere la larghezza e l’altezza nel codice HTML.

Sbagliato

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

Corretto

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

Rimuovere le Query String dalle Risorse Statiche

I file CSS e JavaScript di solito recano la versione del file alla fine dei loro URL, come domain.com/style.css?ver=4.6. Alcuni server e proxy server non sono in grado di memorizzare le query string, anche se è presente un’intestazione cache-control:public. Quindi, rimuovendole, potreste migliorare la memorizzazione nella cache. Questoa operazione può essere fatta facilmente con del codice o con plugin gratuiti di WordPress.

Date un’occhiata al nostro post approfondito su come rimuovere le query string dalle risorse statiche. E ricordate, non puoi eliminare questo avviso su risorse di terze parti su cui non avete controllo.

Specificare un Header Vary: Accept-Encoding

È un’intestazione HTTP che dovrebbe essere inclusa in ogni risposta del server di origine, in quanto indica al browser se il client può gestire le versioni compresse del contenuto. Di solito, quando la compressione GZIP è abilitata, anche questo avviso è rimosso. Ma assicuratevi di dare un’occhiata al nostro post approfondito su come eliminare la raccomandazione di specificare un header vary: accept-encoding. E, ancora, non potete risolvere questo problema con risorse di terze parti.

Diagramma a Cascata di GTmetrix

Il grafico a cascata di GTmetrix mostra tutte le singole richieste presenti sulla vostra pagina web (come mostrato qui sotto). Grsazie a questo diagramma, potrete analizzare ciascuna richiesta per vedere cosa causa ritardi e problemi di prestazioni sul vostro sito. Di seguito sono riportate le definizioni e descrizioni più dettagliate di ciò che significano ciascuno dei colori su ciascuna richiesta.

Bloccante (Marrone)

Quando un browser carica una pagina web, le risorse JavaScript e CSS di solito impediscono la visualizzazione della pagina finché non vengono scaricate ed elaborate dal browser. Questo ritardo si manifesta come bloccante nel grafico a cascata di GTmetrix. Date un’occhiata al nostro post approfondito su come eliminare JavaScript e CSS che bloccano il rendering per maggiori informazioni.

Ricerca DNS (Verde Acqua)

Potete pensare alla ricerca del DNS come a una ricerca in una rubrica telefonica. Ci sono server chiamati Domain Name Servers che contengono le informazioni del vostro sito web e l’IP su cui deve essere indirizzato. Quando eseguite per la prima volta il vostro sito web tramite GTmetrix, questo esegue una nuova ricerca e deve interrogare i record DNS per ottenere le informazioni sugli IP. Ciò si traduce in un maggior tempo di ricerca.

Quando eseguite il vostro sito tramite GTmetrix una seconda volta, questo avrà memorizzato nella cache il DNS perché conosce già le informazioni sull’IP e non deve eseguire nuovamente la ricerca. Questo è uno dei motivi per cui il vostro sito web potrebbe sembrare più veloce dopo averlo eseguito più volte tramite GTmetrix. Come potete vedere nella schermata qui sotto, al 2° test che abbiamo eseguito, il tempo di ricerca del DNS sul caricamento del DOC iniziale è di 0 ms. Questa è un concetto che molti non comprendono bene! Vi consigliamo di eseguire il test più volte e di fare poi la media, a meno che non vogliate che il DNS faccia parte del vostro report, nel qual caso potete prendere per buono il primo test.

Lo stesso vale per le vostre risorse (JavaScript, CSS, immagini) nel caso in cui utilizziate un CDN. Una cache CDN funziona in modo simile al DNS: una volta memorizzata nella cache, è molto più veloce in caricamenti consecutivi. Un altro consiglio su come accelerare il DNS è quello di utilizzare il prefetching del DNS. Ciò consente al browser di eseguire ricerche DNS su una pagina in background. Potete farlo aggiungendo alcune righe di codice all’intestazione del vostro sito WordPress. Ecco alcuni esempi.

<!-- 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">

Oppure, se state utilizzando la versione 4.6 o successiva di WordPress, potreste usare i suggerimenti sulle risorse. Gli sviluppatori possono utilizzare il filtro wp_resource_hints per aggiungere domini e URL personalizzati per dns-prefetch, preconnect, prefetch o prerender.

Connessione (Verde)

Il tempo di connessione in GTmetrix si riferisce alla connessione TCP o al tempo totale necessario per creare una connessione TCP. Non c’è in realtà bisogno di capire come funziona, si tratta semplicemente di un metodo di comunicazione che deve avere luogo tra l’host/client e il server.

Invio (rosso)

Il tempo di invio è semplicemente il tempo impiegato dal browser per inviare i dati al server.

In attesa (Viola)

Il tempo di attesa in GTmetrix si riferisce in realtà al tempo del primo byte, denominato in alcuni strumenti anche come TTFB. Il TTFB è una misura utilizzata come indicatore della reattività di un server web o altra risorsa di rete. Generalmente, qualsiasi valore sotto i 100 ms è accettabile ed è un buon TTFB. Se ci si avvicina all’intervallo di 300-400 ms, è possibile che si sia verificato un errore di configurazione sul server o potrebbe essere il momento di eseguire l’upgrade ad uno stack web superiore. Come potete vedere nel nostro test riportato di seguito, il TTFB è stato di circa 100 ms, che è un risultato ottimo.

Alcuni semplici modi per ridurre il vostro TTFB sono quello di assicurarvi che il vostro host abbia una corretta memorizzazione nella cache e utilizzi un CDN. Date un’occhiata al nostro post approfondito su tutti le soluzioni utili per ridurre il TTFB sul vostro sito WordPress.

Ricezione (Grigio)

Il tempo di ricezione è semplicemente il tempo impiegato dal browser per ricevere dati dal server.

Tempistica degli Eventi

Ogni volta che richiedete una pagina, c’è una tempistica degli eventi durante la quale le risorse vengono caricate e visualizzate.

• First Paint (Linea Verde): il primo punto in cui il browser esegue qualsiasi tipo di rendering sulla pagina, ad esempio la visualizzazione del colore di sfondo.
• DOM Loaded (Linea Blu): il punto in cui il DOM (Document Object Model) è pronto.
• Onload (Linea Rossa): quando l’elaborazione della pagina è completa e tutte le risorse sulla pagina (immagini, CSS, ecc.) hanno completato il download.
• Fully Loaded (Linea Viola): il momento dopo l’attivazione dell’evento Onload senza che vi sia stata attività di rete per 2 secondi.

Header di Risposta HTTP

Potete anche fare clic su una singola richiesta per individuare quelle che vengono definite intestazioni delle risposte HTTP. Questo fornisce informazioni preziose. Nella schermata sottostante possiamo vedere immediatamente se gzip è abilitato sul server web, se è in esecuzione su HHVM, se viene servita dalla cache (HIT, sarebbe MISS altrimenti), gli header cache-control, l’architettura del server (questa non è sempre visibile), gli header expires, il browser user-agent e altro ancora.

Un’altra cosa a cui prestare attenzione è che GTmetrix supporta HTTP/2, a differenza di Pingdom, perché al momento utilizza Chrome 58+ per eseguire i suoi test. Chrome ha aggiunto il supporto HTTP/2 nella versione 49. Quindi tenetelo presente quando scegliete lo strumento di speed test da utilizzare.

Video

Per aiutarvi a eseguire il debug dei glitch visivi e dei problemi di prestazioni del frontend, l’ultima versione di GTmetrix include una scheda “Video”. Con la funzione video abilitata, GTmetrix registrerà automaticamente un video incorporabile che mostra come viene caricata una pagina per ogni test di performance. Questa funzione è molto utile per il debug di problemi visivi che appaiono solo su determinate combinazioni di browser e dimensioni dello schermo.

Storia

Nella scheda Cronologia potete vedere tutti i vostri test di velocità passati. C’è un limite al numero di quelli che possono essere memorizzati negli account gratuiti. È inoltre possibile monitorare un URL, cosa che permette di tenere traccia delle prestazioni nel tempo e vedere eventuali modifiche quando si verificano.

Una funzionalità davvero interessante è quella che vi permette di selezionare i report precedenti e confrontarli fianco a fianco. Questo può essere molto utile, specialmente perché permette di per vedere se ci sono miglioramenti quando si lavora all’ottimizzazione del sito. Ricordate, a volte potete anche ottimizzare troppo.

Case Study della Configurazione del Dominio

Se siete arrivati fin qui nella nostra analisi approfondita di GTmetrix, allora siete pronti per una sorpresa. È sempre fastidioso vedere persone condividere consigli e casi di studio, ma poi non condividere il modo in cui ci sono arrivati. Quindi, qui sotto è riportata la nostra esatta configurazione per il dominio del case study utilizzato sopra! Sentitevi liberi di replicarla.

Architettura

• Il dominio del caso di studio (perfmatters.io) è ospitato su Kinsta su Google Cloud Platform negli USA (Central location). Kinsta utilizza HTTP/2, NGINX, MariaDB, tecnologie che contribuiscono tutte ad ottenere tempi di caricamento rapidi.
• Il sito utilizza HHVM. PHP 7.3 è ora disponibile su Kinsta, che è persino più veloce di HHVM! È possibile passare alle versioni PHP con la semplice pressione di un pulsante.
• Il sito non utilizza alcun plugin di caching. Kinsta memorizza tutto nella cache a livello di server, cosa che semplifica enormemente le cose e nella maggior parte dei casi è più veloce!

Plugin di WordPress

E qui c’è una lista dei plugin usati sul sito di WordPress.

• Il plugin gratuito CDN Enabler è utilizzato per implementare KeyCDN.
• Il plugin gratuito CAOS è utilizzato per sincronizzare Google Analytics localmente.
• Il plugin premium perfmatters plugin è utilizzato per far pulizia delle richieste HTTP non necessarie e disattivare cose come gli Emojis e gli Embeds.
• Il plugin premium Gonzalez è utilizzato per disattivare il caricamento di alcuni script.
• Il plugin premium Imagify è utilizzato per comprimere le immagini.

Tutorial Consigliati per Approfondire:

• Come Velocizzare il Vostro Sito WordPress (Guida Definitiva)
• Come Disabilitare gli Emoji in WordPress
• Come Disabilitare gli Embeds in WordPress
• Identificare e Analizzare i Servizi Esterni sul Vostro Sito WordPress
• Come Ottenere 100/100 in Google PageSpeed ​​Insights con WordPress
• Come Individuare un Alto Utilizzo di Admin-Ajax nel Vostro Sito WordPress
• 7 Consigli per Ridurre i Lookup del DNS e Velocizzarli

Riepilogo

Come potete vedere, sapere come funziona il tool di test della velocità di GTmetrix e conoscere il significato di tutti i grafici può aiutarvi a prendere una decisione basata sui dati per quel che riguarda le prestazioni. Un’analisi a cascata è fondamentale per sapere come vengono caricate le singole risorse. E ricordate, se pensate di metterlo a confronto con Pingdom, che sono strumenti diversi e quindi è meglio utilizzare l’uno o l’altro in quanto effettuano i loro calcoli in modo diverso. Avete altri buoni suggerimenti per GTmetrix?

Se desiderate leggere altri articoli di approfondimento come questo, fatecelo sapere qui sotto nei commenti