TTF: Come Ottimizzare Time To First Byte. Guida Completa

Il tempo al primo byte (TTFB) è una metrica fondamentale per misurare il tempo di configurazione della connessione e la reattività del server Web sia in laboratorio che sul campo. Aiuta a identificare quando un server Web è troppo lento per rispondere alle richieste. Nel caso delle richieste di navigazione, ovvero richieste di un documento HTML, precede ogni altra metrica significativa delle prestazioni di caricamento.

Cos’è TTFB? #

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

TTFB è la somma delle seguenti fasi di richiesta:

• Tempo di reindirizzamento
• Tempo di avvio dell’operatore di servizio (se applicabile)
• Ricerca DNS
• Connessione e negoziazione TLS
• Richiesta, fino al punto in cui è arrivato il primo byte della risposta

La riduzione della latenza nel tempo di configurazione della connessione e sul back-end contribuirà a ridurre il TTFB.

Qual è un buon punteggio TTFB? #

Poiché TTFB precede 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 sperimenti un FCP entro la soglia “buona” . Come guida approssimativa, la maggior parte dei siti dovrebbe cercare di avere un tempo per il primo byte di 0,8 secondi o meno.

TTFB non è una metrica di 

Core Web Vitals , quindi non è assolutamente necessario che i siti soddisfino la soglia “buona” TTFB, a condizione che non ostacoli la loro capacità di ottenere un buon punteggio nelle metriche che contano.

Come misurare TTFB #

Il TTFB può essere misurato in laboratorio o sul campo nei seguenti modi.

Strumenti sul campo #

• Rapporto sull’esperienza utente di Chrome
• web-vitalsLibreria JavaScript

Strumenti di laboratorio #

• Nel pannello di rete di DevTools di Chrome
• Pagina WebTest

Misura TTFB in JavaScript #

Supporto browser:43311211Fonte

Puoi misurare il TTFB delle richieste di navigazione nel browser con l’ API Navigation Timing . L’esempio seguente mostra come creare un PerformanceObservermessaggio che ascolti una navigationvoce e la registri sulla console:

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

AttenzioneNon tutti i browser supportano 

PerformanceObservero il relativo 

bufferedflag. Per ottenere il massimo supporto possibile per il browser, prendi in considerazione l’adozione del 

web-vitalspacchetto, discusso di seguito.

La web-vitalslibreria JavaScript 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);

Misurare le richieste di risorse #

TTFB si applica a tutte le richieste, non solo alle richieste di navigazione. In particolare, le risorse ospitate su server multiorigine possono introdurre latenza a causa della necessità di impostare connessioni a tali server. Per misurare il TTFB per le risorse sul campo, utilizza l’ API Resource Timing all’interno di 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 frammento di codice sopra è simile a quello utilizzato per misurare il TTFB per una richiesta di navigazione, tranne per il fatto che invece di eseguire query per 'navigation'le voci, esegui invece una query per le 'resource'voci. Tiene inoltre conto del fatto che alcune risorse caricate dall’origine primaria possono restituire un valore di 0, poiché la connessione è già aperta o una risorsa viene recuperata istantaneamente da una cache.

TrabocchettiTTFB per le richieste multiorigine non sarà misurabile sul campo se i server multiorigine non riescono a impostare 

Timing-Allow-Originun’intestazione .

Come migliorare TTFB #

Il miglioramento di TTFB dipende in gran parte dal tuo provider di hosting e dallo stack di applicazioni back-end. Valori TTFB elevati potrebbero essere dovuti a uno o più dei seguenti problemi:

• Servizi di hosting con infrastruttura inadeguata per gestire carichi di traffico elevati
• Server Web con memoria insufficiente che può causare thrashing
• Tabelle di database non ottimizzate
• Configurazione del server di database non ottimale

La riduzione al minimo di TTFB viene spesso eseguita scegliendo un provider di hosting adatto con un’infrastruttura per garantire tempi di attività e reattività elevati. Questo, in combinazione con un CDN, può aiutare.Utilizza l’ 

API di temporizzazione del server per raccogliere dati di campo aggiuntivi sulle prestazioni dei processi di back-end dell’applicazione. Questo può aiutare a identificare opportunità di miglioramento che altrimenti potrebbero passare inosservate.

Altre opportunità per migliorare i tempi TTFB elevati e i relativi ritardi percettivi includono:

• Evita reindirizzamenti di più pagine .
• Preconnettersi alle origini richieste per le risorse tra origini diverse.
• Invia la tua origine all’elenco di precaricamento HSTS per eliminare la latenza di reindirizzamento da HTTP a HTTPS.
• Usa HTTP/2 o HTTP/3 .
• Prendi in considerazione il prelettura predittiva per la navigazione veloce delle pagine per gli utenti che non hanno specificato una preferenza per l’utilizzo ridotto dei dati .
• Utilizzare la generazione lato server (SSG) per il markup anziché SSR ove possibile e appropriato.