Délai avant le premier octet (TTFB)

Jeremy Wagner
Barry Pollard

Navigateurs pris en charge

  • 43
  • 12
  • 31
  • 11

Source

Qu'est-ce que TTFB ?

TTFB est une métrique qui mesure le temps entre la demande d'une ressource et le moment où le premier octet d'une réponse commence à arriver.

Schéma des délais des requêtes réseau. Les phases de gauche à droite sont la redirection (qui chevauche l’invite de déchargement), le cache, DNS, TCP, la requête, la réponse, le traitement et le chargement. Les délais associés sont redirectStart et redirectEnd (qui chevauchent les éléments unloadEventStart et unloadEventEnd de l'invite de Unload), fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, responseStart, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart et loadEventEnd.
Schéma des phases d'une requête réseau et des codes temporels associés. TTFB mesure le temps écoulé entre startTime et responseStart.

TTFB correspond à la somme des phases de requête suivantes:

  • Délai de redirection
  • Temps de démarrage du service worker (le cas échéant)
  • résolution DNS
  • Connexion et négociation TLS
  • requête, jusqu'à ce que le premier octet de la réponse soit arrivé

La réduction de la latence au moment de la configuration de la connexion et sur le backend contribuera à réduire le TTFB.

Qu'est-ce qu'un bon score TTFB ?

Étant donné que la métrique TTFB précède les métriques centrées sur l'utilisateur telles que First Contentful Paint (FCP) et Largest Contentful Paint (LCP), il est recommandé que votre serveur réponde suffisamment rapidement aux requêtes de navigation pour que le 75e centile des utilisateurs présente un FCP dans le seuil "bon". À titre indicatif, la plupart des sites doivent s'efforcer de ne pas dépasser 0,8 seconde.

Les bonnes valeurs TTFB sont inférieures ou égales à 0,8 seconde, les mauvaises valeurs sont supérieures à 1,8 seconde et les valeurs intermédiaires doivent être améliorées

Comment mesurer la TTFB

Le TTFB peut être mesuré en laboratoire ou sur le terrain des manières suivantes.

Outils de terrain

Outils de l'atelier

Mesurer le TTFB en JavaScript

Vous pouvez mesurer la valeur TTFB des requêtes de navigation dans le navigateur à l'aide de l'API Navigation Timing. L'exemple suivant montre comment créer un PerformanceObserver qui écoute une entrée navigation et l'enregistre dans la console:

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

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

La bibliothèque JavaScript web-vitals peut également mesurer le TTFB dans le navigateur avec moins de complexité:

import {onTTFB} from 'web-vitals';

// Measure and log TTFB as soon as it's available.
onTTFB(console.log);

Mesurer les demandes de ressources

Le TTFB s'applique à toutes les requêtes, pas seulement aux requêtes de navigation. En particulier, les ressources hébergées sur des serveurs multi-origines peuvent introduire une latence en raison de la nécessité de configurer des connexions à ces serveurs. Pour mesurer la valeur TTFB des ressources du champ, utilisez l'API Resource Timing dans 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
});

L'extrait de code ci-dessus est semblable à celui utilisé pour mesurer le TTFB pour une requête de navigation, sauf qu'au lieu d'interroger les entrées 'navigation', vous interrogez plutôt les entrées 'resource'. Il tient également compte du fait que certaines ressources chargées à partir de l'origine principale peuvent renvoyer la valeur 0, car la connexion est déjà ouverte ou une ressource est instantanément extraite d'un cache.

Comment améliorer TTFB

Nous avons publié un guide détaillé sur l'optimisation du TTFB pour vous aider à améliorer le TTFB de votre site.