El tiempo hasta el primer byte (TTFB) es una métrica fundamental para medir el tiempo de configuración de la conexión y la capacidad de respuesta del servidor web en el lab y en el campo. Mide el tiempo que transcurre entre la solicitud de un recurso y el momento en que comienza a llegar el primer byte de una respuesta. Esto es útil para identificar cuándo un servidor web es demasiado lento para responder a las solicitudes. En el caso de las solicitudes de navegación, es decir, las solicitudes de un documento HTML, preceden a todas las demás métricas de rendimiento de carga significativas.
startTime y responseStart.
El TTFB es la suma de las siguientes fases de la solicitud:
- Tiempo de redireccionamiento
- Tiempo de inicio del service worker (si corresponde)
- búsqueda de DNS
- Conexión y negociación de TLS
- Solicitud, hasta que llegue el primer byte de la respuesta
Reducir la latencia en el tiempo de configuración de la conexión y en el backend ayuda a disminuir el TTFB.
¿Qué es una buena puntuación de TTFB?
Debido a que el TTFB se produce antes que las métricas centradas en el usuario, como el Primer procesamiento de imagen con contenido (FCP) y el Procesamiento de imagen con contenido más grande (LCP), recomendamos que tu servidor responda a las solicitudes de navegación con suficiente rapidez para que el percentil 75 de los usuarios experimente un FCP dentro del umbral "bueno". Como guía general, la mayoría de los sitios deben esforzarse por tener un TTFB de 0.8 segundos o menos.
Punto clave: Dado que el TTFB no es una métrica de las Métricas web esenciales, no es absolutamente necesario que los sitios tengan un excelente TTFB, siempre que cuanto más largo no dificulte que tu sitio obtenga una buena puntuación en las métricas importantes. Cuando optimices los tiempos de carga, ten en cuenta la forma en que tu sitio entrega el contenido. Un TTFB bajo es especialmente importante si un sitio publica su lenguaje de marcado inicial rápidamente y luego tiene que esperar a que las secuencias de comandos lo propaguen con contenido significativo, como suele suceder con las aplicaciones de una sola página (SPA). Por otro lado, un sitio procesado por el servidor que no requiere mucho trabajo del cliente puede tener mejores valores de FCP y LCP que un sitio procesado por el cliente, incluso si su TTFB es más alto.
Cómo medir el TTFB
El TTFB se puede medir en el lab o en el campo de las siguientes maneras.
Herramientas de campo
Herramientas del lab
- En el panel de red de Herramientas para desarrolladores de Chrome
- WebPageTest
Mide el TTFB en JavaScript
Puedes medir el TTFB de las solicitudes de navegación en el navegador con la API de Navigation Timing.
En el siguiente ejemplo, se muestra cómo crear un PerformanceObserver que escuche una entrada navigation y la registre en la consola:
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
La biblioteca de JavaScript de web-vitals también puede medir el TTFB en el navegador con menos complejidad:
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
Mide las solicitudes de recursos
El TTFB se aplica a todas las solicitudes, no solo a las de navegación. En particular, los recursos alojados en servidores de origen cruzado pueden generar latencia durante la configuración de las conexiones a esos servidores. Si deseas medir el TTFB de los recursos en el campo, usa la API de Resource Timing en un PerformanceObserver:
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
for (const entry of entries) {
// Some resources might have a responseStart value of 0 if they're being
// cached, or if a cross-origin resource is served without a
// Timing-Allow-Origin header set.
if (entry.responseStart > 0) {
console.log(`TTFB: ${entry.responseStart}`, entry.name);
}
}
}).observe({
type: 'resource',
buffered: true
});
El fragmento de código anterior es similar al que se usa para medir el TTFB de una solicitud de navegación, excepto que, en lugar de consultar las entradas 'navigation', consultas las entradas 'resource'. También tiene en cuenta el hecho de que algunos recursos cargados desde el origen principal pueden mostrar un valor 0 si la conexión ya está abierta o si un recurso se recupera de forma instantánea desde una caché.
Cómo mejorar el TTFB
Consulta nuestra guía detallada sobre cómo optimizar el TTFB para obtener orientación sobre cómo mejorar el TTFB de tu sitio.