Tempo per primo byte (TTFB)

Jeremy Wagner
Barry Pollard

Supporto dei browser

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

Origine

Che cos'è TTFB?

TTFB è una metrica che misura il tempo che intercorre tra la richiesta di una risorsa e il momento in cui inizia ad arrivare il primo byte di una risposta.

Una visualizzazione delle tempistiche delle richieste di rete. Le tempistiche da sinistra a destra sono Reindirizzamento, Init del service worker, Evento di recupero del Service worker, Cache HTTP, DNS, TCP, Richiesta, Early Hints (103), Risposta (che si sovrappone a Richiesta di unload), Elaborazione e Caricamento. Le tempistiche associate sono RedirectStart e RedirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart e loadEventEnd.
. Diagramma delle fasi delle richieste di rete e delle relative tempistiche associate. TTFB misura il tempo trascorso tra startTime e responseStart.

TTFB è la somma delle seguenti fasi della 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 è la definizione convenzionale, ma con l'introduzione dei Early Hints, quello che è considerato il "primo byte" è oggetto di discussione. firstInterimResponseStart è una nuova voce di tempo aggiuntiva per responseStart per differenziarli, ma è supportata solo nei browser Chrome e basati su Chromium. Pertanto, alcuni browser e strumenti (tra cui CrUX) misurano la ricezione dei primi byte, compresi i suggerimenti iniziali.

Early Hints è solo un esempio più recente di come rispondere in anticipo. Alcuni server consentono lo svuotamento della risposta del documento prima che sia disponibile il corpo principale, sia con le intestazioni HTTP che con l'elemento <head>, che potrebbero essere considerati simili in termini di effetto ai Early Hints e quindi offuscare anche la definizione di ciò che misura il TTFB.

Per misurare il momento in cui i "primi byte" di dati strategici per il documento vengono ricevuti dal browser, tutte queste definizioni potrebbero essere considerate valide, esiste un valore reale nel rinviare i dati in anticipo se la risposta completa richiede più tempo. La cosa più importante è capire quale misura viene misurata dallo strumento in uso e in che modo questa misura viene influenzata dalla piattaforma. Ciò rende difficile confrontare il TTFB tra piattaforme o tecnologie diverse a seconda delle funzionalità che utilizzano e del modo in cui ciò influisce sulla misurazione del TTFB utilizzata.

Il TTFB viene spesso considerato un indicatore del tempo di risposta del server o dell'host. Tuttavia, sarà influenzato da fattori esterni a questo controllo diretto, come il tempo di reindirizzamento, se viene pubblicato da un successo della cache da una CDN o se deve effettuare un percorso potenzialmente più lungo per tornare a un server di origine. Questo è particolarmente evidente nei dati sul campo: i test di laboratorio in genere sono meno influenzati da questi fattori poiché l'URL finale viene solitamente testato e spesso nega ripetutamente le modifiche alla memorizzazione nella cache. Lighthouse riporta il tempo di risposta del server anziché TTFB per renderlo più chiaro, mentre altri strumenti di lab potrebbero non farlo.

Qual è un buon punteggio TTFB?

Poiché il TTFB precede le metriche incentrate sugli utenti come First Contentful Paint (FCP) e Largest Contentful Paint (LCP), consigliamo di fare in modo che il server risponda alle richieste di navigazione abbastanza rapidamente, in modo che il 75° percentile degli utenti registri un FCP compreso nella condizione "buona" soglia. In linea di massima, la maggior parte dei siti dovrebbe fare in modo che una TTFB non superi i 0,8 secondi.

I valori TTFB efficaci sono pari o inferiori a 0,8 secondi, quelli più bassi sono maggiori di 1,8 secondi e tutti i valori intermedi devono essere migliorati
I valori di TTFB efficaci sono pari o inferiori a 0,8 secondi, mentre quelli più bassi sono superiori a 1,8 secondi.

Come misurare la TTFB

Le TTFB possono essere misurate in laboratorio o sul campo nei seguenti modi.

Strumenti sul campo

Strumenti del lab

Misurare il TTFB in JavaScript

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

La 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 impostare 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'. Inoltre, tiene 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 TTFB

Per indicazioni su come migliorare la TTFB del tuo sito, consulta la nostra guida approfondita per l'ottimizzazione della TTFB.