Che cos'è TTFB?
TTFB è una metrica che misura il tempo che intercorre tra la richiesta di una risorsa e l'arrivo del primo byte di una risposta.
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 al punto in cui è arrivato il primo byte della risposta
La riduzione della latenza nei tempi di configurazione della connessione e sul backend contribuirà a un abbassamento del TTFB.
Qual è un buon punteggio TTFB?
Poiché il TTFB è precedente alle metriche incentrate sull'utente, come First Contentful Paint (FCP) e Largest Contentful Paint (LCP), ti consigliamo di far sì 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 tempo per il primo byte pari o inferiore a 0,8 secondi.
Come misurare il TTFB
La TTFB può essere misurata in 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 con l'API Navigation Timing. Nell'esempio seguente viene illustrato come creare una risorsa 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 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);
Misurazione delle 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 dovuta alla necessità di configurare le 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 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
});
Lo snippet di codice riportato sopra è simile a quello utilizzato per misurare il TTFB per una richiesta di navigazione, tranne per il fatto di eseguire query per le voci 'navigation'
, ma per le voci 'resource'
. Spiega inoltre 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 la sintesi vocale
È stata pubblicata una guida approfondita sull'ottimizzazione del TTFB per fornirti ulteriori indicazioni su come migliorare il TTFB del tuo sito web.