Tempo per primo byte (TTFB)

Barry Pollard
Jeremy Wagner

Browser Support

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

Source

Che cos'è il TTFB?

Il 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, Service Worker Init, Service Worker Fetch event, HTTP Cache, DNS, TCP, Request, Early Hints (103), Response (che si sovrappone a Prompt for Unload), Processing e Load. 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 nel tempo di configurazione della connessione e nel backend può ridurre il TTFB.

TTFB e suggerimenti iniziali

L'introduzione degli Early Hints 103 genera un po' di confusione su cosa misuri il TTFB del "primo byte". Gli Early Hints 103 vengono conteggiati come "primi byte". finalResponseHeadersStart è una voce di temporizzazione aggiuntiva per responseStart che misura l'inizio della risposta del documento finale (in genere una risposta HTTP 200) da misurare.

Gli indizi precoci sono solo un esempio più recente di risposta anticipata. Alcuni server consentono lo svuotamento anticipato della risposta del documento prima che sia disponibile il corpo principale, solo con le intestazioni HTTP o con l'elemento <head>, entrambi i quali potrebbero essere considerati simili per effetto agli Early Hints. Questo è un altro motivo per cui tutti questi valori vengono misurati come reponseStart e quindi come TTFB.

L'invio anticipato dei dati è molto utile se la risposta completa richiederà un po' più di tempo. Tuttavia, questo rende difficile confrontare il TTFB su piattaforme o tecnologie diverse a seconda delle funzionalità utilizzate e di come ciò influisce sulla misurazione del TTFB utilizzata. L'aspetto più importante è capire cosa misura lo strumento che utilizzi e in che modo questo viene influenzato dalla piattaforma misurata.

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 TTFB

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 tempo di risposta del browser

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