Qu'est-ce que le 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.
Le TTFB correspond à la somme des phases de requête suivantes:
- Durée de la 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 synchronisation supplémentaire dans responseStart
pour les différencier, mais elle n'est compatible qu'avec les navigateurs Chrome et 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 permettent d'effacer la réponse du document avant que le corps principal ne soit disponible, soit uniquement avec les en-têtes HTTP, soit avec l'élément <head>
, qui peuvent tous deux être considérés comme ayant un effet similaire aux premiers indices et qui obscurcissent donc 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. L'essentiel est de comprendre ce que 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 annule à plusieurs reprises les modifications de 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 FCP soit dans la plage "acceptable" pour le 75e centile des utilisateurs. À titre indicatif, la plupart des sites doivent s'efforcer d'obtenir un TTFB de 0,8 seconde ou moins.
Mesurer le délai avant réponse
Vous pouvez mesurer le TTFB en laboratoire ou sur le terrain de différentes manières.
Outils sur le terrain
Outils de l'atelier
- Dans le panneau réseau des outils pour les développeurs Chrome
- WebPageTest
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 concise:
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 multi-origines peuvent entraîner une latence, car il est nécessaire 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 obtenir des conseils sur l'amélioration du TTFB de votre site, consultez notre guide détaillé sur l'optimisation du TTFB.