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 è la definizione convenzionale, ma con l'introduzione dei Early Hints, quello che è considerato il "primo byte" è oggetto di discussione. firstInterimResponseStart è 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, sia con le intestazioni HTTP che con l'elemento <head>, che potrebbero essere considerati simili in termini di effetto ai Early Hints e quindi offuscare anche la definizione di ciò che misura il TTFB.
Per misurare il momento in cui i "primi byte" di dati strategici per il documento vengono ricevuti dal browser, 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 la pubblicazione avviene da un successo della cache da parte di 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 sull'utente, 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 registri un FCP compreso nella condizione "buona" soglia. 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 il 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.