Tempo per primo byte (TTFB)

Jeremy Wagner
Barry Pollard

Supporto dei browser

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

Origine

Che cos'è il TTFB?

TTFB è una metrica che misura il tempo che intercorre tra la richiesta di una risorsa e l'inizio dell'arrivo del primo byte di una risposta.

Una visualizzazione dei tempi di richiesta di rete. I tempi da sinistra a destra sono Redirect, Inizializzazione del servizio worker, Evento di recupero del servizio worker, Cache HTTP, DNS, TCP, Richiesta, Indizi iniziali (103), Risposta (che si sovrappone a Prompt per lo scambio), Elaborazione e Caricamento. I relativi tempi sono redirectStart e redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart e loadEventEnd.
Un diagramma delle fasi di richiesta di rete e dei relativi tempi associati. Il TTFB misura il tempo trascorso tra startTime e responseStart.

Il TTFB è la somma delle seguenti fasi di 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. firstInterimResponseStart è una nuova voce di temporizzazione aggiuntiva per responseStart che consente di distinguere tra questi, ma è supportata solo nei browser basati su Chrome e Chromium. Pertanto, alcuni browser e strumenti (tra cui CrUX) misurano la ricezione dei primi byte, compresi i suggerimenti iniziali.

Gli indizi precoci sono solo un esempio più recente di risposta anticipata. Alcuni server consentono di svuotare la risposta del documento prima che il corpo principale sia disponibile, solo con le intestazioni HTTP o con l'elemento <head>, entrambi i quali potrebbero essere considerati simili per effetto agli Early Hints e quindi offuscare anche la definizione di ciò che viene misurato dal TTFB.

Per misurare quando il browser riceve i "primi byte" di dati utilizzabili per il documento, tutte queste definizioni possono essere considerate valide. Esiste un valore reale nel rinviare i dati in anticipo se la risposta completa richiede più tempo. L'aspetto più importante è capire cosa misura lo strumento che utilizzi e in che modo questo viene influenzato dalla piattaforma misurata. Ciò rende difficile confrontare il TTFB su piattaforme o tecnologie diverse, a seconda delle funzionalità utilizzate e dell'impatto che hanno sulla misurazione del TTFB.

Il TTFB viene spesso considerato un indicatore del tempo di risposta del server o dell'host. Tuttavia, sarà influenzato da fattori al di fuori di questo controllo diretto, come il tempo di reindirizzamento, se viene pubblicato da una cache hit da una CDN o se deve fare un percorso potenzialmente più lungo per tornare a un server di origine. Questo è particolarmente evidente nei dati sul campo. I test di laboratorio sono in genere meno interessati da questi fattori, poiché l'URL finale viene solitamente testato e spesso nega ripetutamente le modifiche alla memorizzazione nella cache. Per maggiore chiarezza, Lighthouse riporta il tempo di risposta del server anziché il TTFB, ma altri strumenti del 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), è consigliabile che il server risponda alle richieste di navigazione abbastanza rapidamente in modo che il 75° percentile degli utenti abbia un FCP entro la soglia "buona". Come guida approssimativa, la maggior parte dei siti dovrebbe cercare di avere un TTFB di 0,8 secondi o meno.

I valori TTFB buoni sono pari o inferiori a 0,8 secondi, quelli scadenti sono superiori a 1,8 secondi e quelli intermedi richiedono miglioramenti
I valori TTFB buoni sono pari o inferiori a 0,8 secondi, mentre quelli non buoni sono superiori a 1,8 secondi.

Come misurare il tempo di risposta del browser

Il tempo di risposta del browser può essere misurato in laboratorio o sul campo nei seguenti modi.

Strumenti sul campo

Strumenti del lab

Misurare il tempo di risposta del browser in JavaScript

Puoi misurare il 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

Il tempo di risposta del browser si applica a tutte le richieste, non solo a quelle di navigazione. In particolare, le risorse ospitate su server cross-origin possono introdurre latenza a causa della necessità di configurare le 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'. Tiene inoltre 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 il TTFB

Per indicazioni su come migliorare il TTFB del tuo sito, consulta la nostra guida approfondita all'ottimizzazione del TTFB.