Délai avant le premier octet (TTFB)

Jeremy Wagner
Barry Pollard

Navigateurs pris en charge

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

Source

Qu'est-ce que TTFB ?

Le TTFB est une métrique qui mesure le temps écoulé entre la demande d'une ressource et le début de l'arrivée du premier octet d'une réponse.

Visualisation des délais de requête réseau. Les délais, de gauche à droite, sont les suivants : redirection, initialisation du service worker, événement de récupération du service worker, cache HTTP, DNS, TCP, requête, premiers indices (103), réponse (qui se chevauche avec l'invite de déchargement), traitement et chargement. Les temps associés sont redirectStart et redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart et loadEventEnd.
Diagramme des phases de requête réseau et des délais associés. Le TTFB mesure le temps écoulé entre le startTime et le responseStart.

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

  • Heure de redirection
  • Heure de démarrage du service worker (le cas échéant)
  • résolution DNS
  • Connexion et négociation TLS
  • Requête, jusqu'à l'arrivée du premier octet de la réponse

Réduire la latence au moment de la configuration de la connexion et au niveau du backend peut réduire votre TTFB.

Autres définitions du TTFB

La définition précédente est la définition conventionnelle, mais avec l'introduction des Early Hints (premiers indices), la question de savoir ce qui est considéré comme le "premier octet" est sujette à débat. firstInterimResponseStart est une nouvelle entrée de temps supplémentaire dans responseStart pour les différencier, mais elle n'est compatible qu'avec les navigateurs Chrome et les navigateurs basés sur Chromium. Par conséquent, certains navigateurs et outils (y compris CrUX) mesurent jusqu'à ce que les premiers octets soient reçus, y compris les premiers indices.

Les premiers indices ne sont qu'un exemple plus récent de réponse anticipée. Certains serveurs autorisent le vidage de la réponse du document avant que le corps principal ne soit disponible, que ce soit avec les en-têtes HTTP ou avec l'élément <head>. Ces deux éléments peuvent être considérés comme semblables aux indications précoces, et donc masquer la définition de ce que mesure le TTFB.

Pour mesurer le moment où les "premiers octets" de données exploitables pour le document sont reçus par le navigateur, toutes ces définitions peuvent être considérées comme valides. Il est vraiment utile de renvoyer des données plus tôt si la réponse complète va prendre un peu plus de temps. Le plus important est de comprendre quelle mesure mesure l'outil que vous utilisez et comment cela est affecté par la plate-forme mesurée. Il est donc difficile de comparer le TTFB entre différentes plates-formes ou technologies en fonction des fonctionnalités qu'elles utilisent et de leur impact sur la mesure du TTFB utilisée.

Le TTFB est également souvent considéré comme un indicateur du temps de réponse du serveur ou de l'hôte. Toutefois, elle sera affectée par des facteurs hors de ce contrôle direct, tels que le temps de redirection, qu'elle soit diffusée à partir d'un cache touché par un CDN ou qu'elle doive effectuer un trajet potentiellement plus long vers un serveur d'origine. Cela est particulièrement visible dans les données sur le terrain. Les tests en laboratoire sont généralement moins affectés par ces facteurs, car l'URL de destination est généralement testée et souvent annulée à plusieurs reprises en cas de modification de la mise en cache. Pour clarifier les choses, Lighthouse indique le temps de réponse du serveur plutôt que le TTFB, mais ce n'est pas toujours le cas des autres outils de laboratoire.

Quel est un bon score TTFB ?

Étant donné que le TTFB précède les métriques axées sur l'utilisateur telles que le FCP (First Contentful Paint) et le LCP (Largest Contentful Paint), nous vous recommandons de configurer votre serveur de manière à ce que le 75e centile des utilisateurs bénéficie d'un FCP dans la plage "bon". À titre indicatif, la plupart des sites doivent s'efforcer d'obtenir un TTFB de 0,8 seconde ou moins.

Une valeur TTFB acceptable est de 0,8 seconde ou moins. Une valeur TTFB mauvaise est supérieure à 1,8 seconde. Une valeur TTFB comprise entre ces deux valeurs doit être améliorée.
Une valeur TTFB satisfaisante est de 0,8 seconde ou moins, et une valeur mauvaise est supérieure à 1,8 seconde.

Mesurer le délai avant réponse

Le TTFB peut être mesuré en laboratoire ou sur le terrain de différentes manières.

Outils sur le terrain

Outils de l'atelier

Mesurer le TTFB en JavaScript

Vous pouvez mesurer le TTFB des requêtes de navigation dans le navigateur avec l'API Navigation Timing. L'exemple suivant montre comment créer un PerformanceObserver qui écoute une entrée navigation et la consigne 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 de manière plus succincte:

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, et pas seulement aux requêtes de navigation. En particulier, les ressources hébergées sur des serveurs d'origine différente peuvent introduire une latence en raison de la nécessité de configurer des connexions à ces serveurs. Pour mesurer le TTFB des ressources dans le 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 précédent est semblable à celui utilisé pour mesurer le TTFB d'une requête de navigation, sauf qu'au lieu d'interroger des entrées 'navigation', vous interrogez des entrées 'resource'. Il tient également compte du fait que certaines ressources chargées à partir de l'origine principale peuvent renvoyer une valeur de 0, car la connexion est déjà ouverte ou qu'une ressource est instantanément récupérée à partir d'un cache.

Améliorer le délai avant première réponse

Pour savoir comment améliorer le TTFB de votre site, consultez notre guide détaillé sur l'optimisation de la TTFB.