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 svuotamento), 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 tempo di risposta del browser è 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 nel tempo di configurazione della connessione e nel backend può ridurre il TTFB.

Altre definizioni di TTFB

La definizione precedente è la definizione convenzionale, ma con l'introduzione degli Early Hints, 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 (incluso CrUX) misurano fino alla ricezione dei primi byte, inclusi gli Early Hints.

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.

Come misura del momento in cui i "primi byte" di dati utili per il documento vengono ricevuti dal browser, tutte queste definizioni potrebbero essere considerate valide. È utile inviare i dati in anticipo se la risposta completa richiederà un po' più di 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 è spesso considerato anche 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 annulla 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 scarsi 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 di laboratorio

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 un PerformanceObserver che ascolta 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 web-vitalslibreria JavaScript può anche misurare il TTFB nel browser in modo più conciso:

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 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 precedente è simile a quello utilizzato per misurare il TTFB per una richiesta di navigazione, tranne per il fatto che, anziché eseguire query sulle voci 'navigation', esegui query sulle 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.