Tempo per primo byte (TTFB)

Jeremy Wagner
Barry Pollard

Supporto dei browser

  • 43
  • 12
  • 31
  • 11

Fonte

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.

Diagramma dei tempi delle richieste di rete. Le fasi da sinistra a destra sono Reindirizzamento (che si sovrappone a Richiesta di scaricamento), Cache, DNS, TCP, Richiesta, Risposta, Elaborazione e Caricamento. I tempi associati sono RedirectStart e RedirectEnd (che si sovrappongono ai comandi di richiesta di unload unloadEventStart e unloadEventEnd), fetchStart, dominioLookupStart, dominioLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, responseStart, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart e loadEventEnd.
Diagramma delle fasi delle richieste di rete e dei tempi associati. TTFB misura il tempo trascorso tra startTime e responseStart.

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.

I valori di TTFB buoni sono pari a 0,8 secondi o meno, i valori scarsi sono maggiori di 1,8 secondi e qualsiasi elemento intermedio deve essere migliorato

Come misurare il TTFB

La TTFB può essere misurata in lab o sul campo nei seguenti modi.

Strumenti da campo

Strumenti di lab

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.