Time to First Byte (TTFB) è una metrica fondamentale per misurare il tempo di configurazione della connessione e la reattività del server web sia nel lab che sul campo. Misura il tempo che intercorre tra la richiesta di una risorsa e l'arrivo del primo byte di una risposta. Ciò è utile per identificare quando un server web è troppo lento per rispondere alle richieste. Nel caso delle richieste di navigazione, ovvero di richieste di un documento HTML, precedono ogni altra metrica significativa relativa alle prestazioni di caricamento.
startTime e responseStart.
TTFB è la somma delle seguenti fasi della richiesta:
- Ora di reindirizzamento
- Tempo di avvio del service worker (se applicabile)
- ricerca DNS
- Connessione e negoziazione TLS
- Richiesta, fino all'arrivo del primo byte della risposta
La riduzione della latenza nei tempi di configurazione della connessione e sul backend consente di abbassare il TTFB.
Qual è un buon punteggio TTFB?
Poiché il TTFB si verifica prima delle metriche incentrate sull'utente come First Contentful Paint (FCP) e Largest Contentful Paint (LCP), consigliamo che il tuo server risponda alle richieste di navigazione abbastanza rapidamente, in modo che il 75° percentile di utenti registri un FCP entro la soglia "buona". Come guida approssimativa, la maggior parte dei siti dovrebbe avere un TTFB di 0,8 secondi o inferiore.
Punto chiave: poiché il TTFB non è una metrica relativa ai Segnali web essenziali, non è assolutamente necessario che i siti abbiano un TTFB eccellente, purché la durata del TTFB non comprometta al tuo sito di ottenere un buon punteggio per le metriche importanti. Quando ottimizzi i tempi di caricamento, valuta il modo in cui il tuo sito pubblica i contenuti. Un TTFB basso è particolarmente importante se un sito fornisce rapidamente il markup iniziale e poi deve attendere che gli script lo compilino con contenuti significativi, come spesso accade con le applicazioni a pagina singola (APS). D'altra parte, un sito sottoposto a rendering dal server che non richiede molto lavoro lato client può avere valori FCP e LCP migliori rispetto a un sito sottoposto a rendering dal client, anche se il suo TTFB è più elevato.
Come misurare il TTFB
La TTFB può essere misurata nel lab o sul campo nei seguenti modi.
Strumenti da campo
Strumenti di lab
- Nel riquadro di rete di DevTools di Chrome
- WebPageTest
Misurare TTFB in JavaScript
Puoi misurare il TTFB delle richieste di navigazione nel browser utilizzando l'API Navigation Timing.
L'esempio seguente mostra come creare un elemento PerformanceObserver che rimane in ascolto di una voce navigation e la registra nella console:
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
La libreria JavaScript web-vitals
può anche misurare TTFB nel browser con meno complessità:
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
Misurare le richieste di risorse
Il TTFB si applica a tutte le richieste, non solo alle richieste di navigazione. In particolare, le risorse ospitate su server multiorigine possono introdurre latenza durante la configurazione delle connessioni a questi server. Per misurare il TTFB per le risorse nel campo, utilizza l'API Resource Timing in un PerformanceObserver:
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
for (const entry of entries) {
// Some resources might have a responseStart value of 0 if they're being
// cached, or if a cross-origin resource is served without a
// Timing-Allow-Origin header set.
if (entry.responseStart > 0) {
console.log(`TTFB: ${entry.responseStart}`, entry.name);
}
}
}).observe({
type: 'resource',
buffered: true
});
Lo snippet di codice precedente è simile a quello utilizzato per misurare il TTFB per una richiesta di navigazione, tranne per il fatto che, invece di eseguire query per le voci 'navigation', esegui una query per le voci 'resource'. Spiega inoltre che alcune risorse caricate dall'origine principale potrebbero restituire un valore 0 se la connessione è già aperta o se una risorsa viene recuperata istantaneamente da una cache.
Come migliorare la sintesi vocale
Per indicazioni su come migliorare il TTFB del tuo sito, consulta la nostra guida approfondita sull'ottimizzazione della TTFB.