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.

Sapere come funziona @GTmetrix è fondamentale per i proprietari dei siti WordPress! ⏱Click to Tweet

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 Web Vitals di Google insieme a metriche di performance proprietarie per generare punteggi e raccomandazioni.

Speed test di GTmetrix

Speed test di GTmetrix

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:

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

Opzioni formato test in GTmetrix

Opzioni formato test in GTmetrix

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.

Opzioni aggiuntive di GTmetrix

Opzioni aggiuntive di GTmetrix

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

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

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:

 Test di velocità GTmetrix per kinstalife.com.

Test di velocità GTmetrix per kinstalife.com.

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.

 Il nostro secondo test di velocità con GTmetrix.

Il nostro secondo test di velocità con GTmetrix.

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.

At the bottom of the summary page, there are also “Top Issues” and “Page Details” sections. Under “Top Issues”, you can see a list of high priority items to fix, while “Page Details” provides percentage and file size breakdowns of your page.

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.

I problemi più importanti di GTmetrix e i dettagli della pagina.

I problemi più importanti di GTmetrix e i dettagli della 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).

Metriche delle prestazioni Lighthouse su GTmetrix.

Metriche delle prestazioni Lighthouse su GTmetrix.

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.

Metriche sulle tempistiche di navigazione in GTmetrix.

Metriche sulle tempistiche di navigazione in GTmetrix.

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.

Punteggi PageSpeed su GTmetrix

Punteggi PageSpeed su GTmetrix

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.

Servire immagini ridotte (Serve scaled images)

Servire immagini ridotte (Serve scaled images)

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.

Inserite CSS piccoli in linea

Inserite CSS piccoli in linea

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.

CSS in linea con Autoptimize

CSS in linea con Autoptimize

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.

Inserite JavaScript piccoli in linea

Inserite JavaScript piccoli in linea

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.

Sfrutta il caching del browser

Sfrutta il caching del browser

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.

Servire le risorse da un URL coerente

Servire le risorse da un URL coerente

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. Alcune semplici soluzioni per risolvere questo problema sono quelle di utilizzare i plugin gratuiti Autoptimize o Async JavaScript. Non perdete il nostro post approfondito su come eliminare JavaScript e CSS che bloccano il rendering.

Rinviare il parsing di JavaScript

Rinviare il parsing di JavaScript

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.

Minimizzare CSS e JavaScript

Minimizzare CSS e JavaScript

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.

Minimizzare CSS e JavaScript in Autoptimize

Minimizzare CSS e JavaScript in Autoptimize

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.

Ottimizzare le immagini

Ottimizzare le immagini

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.

Ridurre il tempo di risposta iniziale del server.

Ridurre il tempo di risposta iniziale del server.

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.

Minimizzare HTML

Minimizzare HTML

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

Ottimizzare il codice HTML in Autoptimize

Ottimizzare il codice HTML in Autoptimize

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.

Abilitare la compressione GZIP

Abilitare la compressione GZIP

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.

Minimizzare i redirect

Minimizzare i redirect

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.

Important

Nota: le intestazioni HTTP della cache vengono automaticamente aggiunte su tutti i server Kinsta.

Specificare un cache validator

Specificare un cache validator

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">
Specificare le dimensioni delle immagini

Specificare le dimensioni delle immagini

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.

Rimuovere le query string dalle risorse statiche

Rimuovere le query string dalle risorse statiche

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.

Alle prese con i tempi di inattività e problemi di WordPress? Kinsta è la soluzione di hosting progettata per farvi risparmiare tempo! Scopri i nostri servizi
Specificare un header Vary: Accept-Encoding

Specificare un header Vary: Accept-Encoding

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.

Diagramma a cascata di GTmetrix

Diagramma a cascata di GTmetrix

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.

Bloccante

Bloccante

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.

Primo lookup del DNS in GTmetrix

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.

Secondo lookup del DNS in GTmetrix

Secondo lookup del DNS in GTmetrix

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.

Connessione

Connessione

Invio (rosso)

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

Invio

Invio

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.

Attesa

Attesa

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.

Ricevimento

Ricevimento

Tempistica degli Eventi

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

Calcolo tempi degli eventi

Calcolo tempi degli eventi

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.

Header risposta HTTP in GTmetrix

Header risposta HTTP in GTmetrix

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.

Registrazione video su GTmetrix.

Registrazione video su GTmetrix.

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.

Storico

Storia

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.

Confronto report in GTmetrix

Confronto report in GTmetrix

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

Plugin di WordPress

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

Tutorial Consigliati per Approfondire:

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


Risparmia tempo e costi e massimizza le prestazioni del sito con:

  • Aiuto immediato dagli esperti dell’hosting WordPress, 24/7.
  • Integrazione di Cloudflare Enterprise.
  • Copertura globale del pubblico con 28 data center in tutto il mondo.
  • Ottimizzazione del sito con il nostro Monitoraggio delle Prestazioni delle Applicazioni integrato.

Tutto questo e molto altro, in un piano senza contratti a lungo termine, con migrazioni assistite e una garanzia di 30 giorni di rimborso. Scopri i nostri piani o contattaci per trovare il piano che fa per te.