Immagine TTFB – Time to first byte – Tempo di caricamento del primo Byte

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.

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 

Misura TTFB in JavaScript 

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
});

La web-vitalslibreria JavaScript può anche misurare TTFB nel browser con meno complessità:

import {getTTFB} from 'web-vitals';

// Measure and log TTFB as soon as it's available.
getTTFB(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.

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.

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.
pattern-lines

Prova Gratis Hosting corewebvitals Veloce, Ottimizzato, Sicuro

Passa a Bhoost con 30 giorni gratis e migrazione inclusa

Prova gratis 30 giorni
macbook