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