Che cos'è TTFB?
TTFB è una metrica che misura il tempo che intercorre tra la richiesta di una risorsa e il momento in cui inizia ad arrivare il primo byte di una risposta.
startTime e responseStart.
TTFB è la somma delle seguenti fasi della richiesta:
- Tempo di reindirizzamento
- Ora di avvio del Service worker (se applicabile)
- ricerca DNS
- Connessione e negoziazione TLS
- Richiesta, fino al momento in cui è arrivato il primo byte della risposta
La riduzione della latenza nei tempi di configurazione della connessione e sul backend può ridurre il tempo TTFB.
Altre definizioni di TTFB
La definizione precedente è quella convenzionale, ma con l'introduzione dei Early Hints, quello che è considerato il "primo byte" è in discussione. firstInterimResponse è una nuova voce di tempo aggiuntiva per responseStart per differenziarli, ma è supportata solo nei browser Chrome e basati su Chromium. Pertanto, alcuni browser e strumenti (tra cui CrUX) misurano la ricezione dei primi byte, compresi i suggerimenti iniziali.
Early Hints è solo un esempio più recente di come rispondere in anticipo. Alcuni server consentono lo svuotamento della risposta del documento prima che sia disponibile il corpo principale, solo con le intestazioni HTTP o con l'elemento <head>, che potrebbero essere considerati simili in termini di effetto agli Early Hints e quindi incapsulare anche la definizione di ciò che misura il TTFB.
Per misurare quando il browser riceve i "primi byte" di dati utilizzabili per il documento, tutte queste definizioni potrebbero essere considerate valide. Esiste un valore reale nel rinviare i dati in anticipo se la risposta completa richiede più tempo. La cosa più importante è capire quale misura viene misurata dallo strumento in uso e in che modo questa misura viene influenzata dalla piattaforma. Ciò rende difficile confrontare il TTFB tra piattaforme o tecnologie diverse a seconda delle funzionalità che utilizzano e di come ciò influisce sulla misurazione del TTFB utilizzata.
Il TTFB viene spesso considerato un indicatore del tempo di risposta del server o dell'host. Tuttavia, sarà influenzato da fattori esterni a questo controllo diretto, come il tempo di reindirizzamento, se viene pubblicato da un successo della cache da una CDN o se deve effettuare un percorso potenzialmente più lungo per tornare a un server di origine. Questo è particolarmente evidente nei dati sul campo: i test di laboratorio in genere sono meno influenzati da questi fattori poiché l'URL finale viene solitamente testato e spesso nega ripetutamente le modifiche alla memorizzazione nella cache. Lighthouse riporta il tempo di risposta del server anziché TTFB per renderlo più chiaro, mentre altri strumenti di lab potrebbero non farlo.
Qual è un buon punteggio TTFB?
Poiché il TTFB precede le metriche incentrate sugli utenti, come First Contentful Paint (FCP) e Largest Contentful Paint (LCP), consigliamo di fare in modo che il server risponda alle richieste di navigazione abbastanza rapidamente, in modo che il 75° percentile degli utenti riscontri un FCP entro la soglia "buona". In linea di massima, la maggior parte dei siti dovrebbe fare in modo che una TTFB non superi i 0,8 secondi.
Come misurare la TTFB
Le TTFB possono essere misurate in laboratorio o sul campo nei seguenti modi.
Strumenti sul campo
Strumenti del lab
- Nel riquadro di rete dei DevTools di Chrome
- WebPageTest
Misurare il TTFB in JavaScript
Puoi misurare la TTFB delle richieste di navigazione nel browser con l'API Navigation Timing. L'esempio seguente mostra come creare una PerformanceObserver che ascolti una voce navigation e la registri nella console:
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
La libreria JavaScript di web-vitals può anche misurare TTFB nel browser in modo più sintetico:
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
Misura le richieste di risorse
La TTFB si applica a tutte le richieste, non solo alle richieste di navigazione. In particolare, le risorse ospitate su server multiorigine possono introdurre latenza dovuta alla necessità di impostare connessioni a questi server. Per misurare il TTFB per le risorse sul campo, utilizza l'API Resource Timing in un PerformanceObserver:
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
for (const entry of entries) {
// Some resources may have a responseStart value of 0, due
// to the resource being cached, or a cross-origin resource
// being served without a Timing-Allow-Origin header set.
if (entry.responseStart > 0) {
console.log(`TTFB: ${entry.responseStart}`, entry.name);
}
}
}).observe({
type: 'resource',
buffered: true
});
Il precedente snippet di codice è simile a quello utilizzato per misurare il TTFB per una richiesta di navigazione, tranne per il fatto che, anziché eseguire query per le voci 'navigation', esegui una query per le voci 'resource'. Inoltre, tiene conto del fatto che alcune risorse caricate dall'origine principale potrebbero restituire un valore 0, poiché la connessione è già aperta o una risorsa viene recuperata istantaneamente da una cache.
Come migliorare TTFB
Per indicazioni su come migliorare la TTFB del tuo sito, consulta la nostra guida approfondita per l'ottimizzazione della TTFB.