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.
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.
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
- Dans le panneau "network" des outils pour les développeurs Chrome
- WebPageTest
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.