¿Qué es el TTFB?
TTFB es una métrica que mide el tiempo entre la solicitud de un recurso y el momento en que comienza a llegar el primer byte de una respuesta.
startTime y responseStart.
El TTFB es la suma de las siguientes fases de la solicitud:
- Hora del redireccionamiento
- Tiempo de inicio del service worker (si corresponde)
- búsqueda de DNS
- Conexión y negociación de TLS
- Solicitud, hasta el momento en que llega el primer byte de la respuesta
Reducir la latencia en el tiempo de configuración de la conexión y en el backend puede disminuir tu TTFB.
Otras definiciones de TTFB
La definición anterior es convencional, pero con la introducción de Early Hints, lo que se considera el “primer byte” está en debate. firstInterimResponseStart es una nueva entrada de tiempo adicional en responseStart para diferenciarlos, pero solo es compatible con Chrome y los navegadores basados en Chromium. Por lo tanto, algunos navegadores y herramientas (incluida CrUX) realizan mediciones hasta que se reciben los primeros bytes, lo que incluye Early Hints.
Sugerencias iniciales es solo un nuevo ejemplo de una respuesta temprana. Algunos servidores permiten que se vacíe la respuesta del documento antes de que el cuerpo principal esté disponible, ya sea solo con los encabezados HTTP o con el elemento <head>, que pueden considerarse similares en efecto a Early Hints y, por lo tanto, también pueden nublar la definición de lo que mide TTFB.
Como medida de cuando el navegador recibe los “primeros bytes” de datos procesables para el documento, todas estas definiciones pueden considerarse válidas. Existe un valor real en enviar datos de manera anticipada si la respuesta completa va a llevar un poco más de tiempo. Lo más importante es comprender cuáles son las mediciones de la herramienta que se está usando y cómo la plataforma que se está midiendo afecta eso y cómo eso afecta. Esto hace que sea difícil comparar el TTFB en diferentes plataformas o tecnologías según las funciones que usen y cómo esto afecta la medición del TTFB que se utiliza.
TTFB también se considera a menudo como un indicador del tiempo de respuesta del servidor o del host. Sin embargo, se verá afectada por factores fuera de ese control directo, como el tiempo de redireccionamiento, si se entrega desde un acierto de caché por parte de una CDN o si debe realizar un recorrido potencialmente más largo de regreso al servidor de origen. Esto es particularmente evidente en los datos de campo, ya que, por lo general, las pruebas de laboratorio se ven menos afectadas por estos factores, ya que la URL final suele probarse y, con frecuencia, evitar los cambios de almacenamiento en caché de forma reiterada. Lighthouse informa el tiempo de respuesta del servidor en lugar del TTFB para aclarar esto, pero es posible que otras herramientas del lab no lo hagan.
¿Qué es una buena puntuación de TTFB?
Debido a que TTFB precede a las métricas centradas en el usuario, como First Contentful Paint (FCP) y Largest Contentful Paint (LCP), se recomienda que tu servidor responda a las solicitudes de navegación con la suficiente rapidez para que el 75° percentil de los usuarios experimente un FCP dentro del umbral de "buena". Como guía aproximada, la mayoría de los sitios deben esforzarse por tener un TTFB de 0.8 segundos o menos.
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 las 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 de 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 JavaScript web-vitals también puede medir el TTFB en el navegador de forma más concisa:
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 introducir latencia debido a la necesidad de configurar conexiones a esos servidores. Para medir el TTFB de los recursos en el campo, usa la Resource Timing API dentro de 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
});
El fragmento de código anterior es similar al que se usa para medir el TTFB en una solicitud de navegación, excepto que, en lugar de consultar entradas 'navigation', consultas entradas 'resource'. También tiene en cuenta el hecho de que algunos recursos cargados desde el origen principal pueden mostrar un valor de 0, debido a que la conexión ya está abierta o un recurso se recupera de forma instantánea de una caché.
Cómo mejorar el TTFB
Si deseas obtener orientación para mejorar el TTFB de tu sitio, consulta nuestra guía detallada sobre cómo optimizar el TTFB.