¿Qué es el TTFB?
El 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 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 punto en el que llegó 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 el 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.
Las sugerencias anticipadas son solo un ejemplo más reciente de la respuesta anticipada. Algunos servidores permiten que se borre la respuesta del documento antes de que esté disponible el cuerpo principal, ya sea solo con los encabezados HTTP o con el elemento <head>, que podrían considerarse similares en efecto a los indicadores anticipados y, por lo tanto, también enturbian la definición de lo que mide el TTFB.
Como medida de cuándo el navegador recibe los "primeros bytes" de datos prácticos para el documento, todas estas definiciones se pueden considerar válidas. Es muy útil enviar datos con anticipación si la respuesta completa llevará un poco más de tiempo. Lo más importante es comprender qué mide la herramienta que usas y cómo se ve afectada por la plataforma que se mide. Esto dificulta la comparación del TTFB entre diferentes plataformas o tecnologías, según las funciones que usen y cómo eso afecte la medición del TTFB que se utiliza.
El TTFB también se suele considerar 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. Por lo general, las pruebas de laboratorio se ven menos afectadas por estos factores, ya que la URL de destino suele probarse y, a menudo, se niegan los cambios de almacenamiento en caché de forma repetida. Lighthouse informa el tiempo de respuesta del servidor en lugar del TTFB para que esto sea más claro, pero es posible que otras herramientas de Lab no lo hagan.
¿Qué es un buen nivel de TTFB?
Debido a que el TTFB precede a las métricas centradas en el usuario, como el primer procesamiento de imagen con contenido (FCP) y el mayor procesamiento de imagen con contenido (LCP), se recomienda que tu servidor responda a las solicitudes de navegación con la suficiente rapidez para que el percentil 75 de los usuarios experimente un FCP dentro del umbral "bueno". 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 laboratorio o en el campo de las siguientes maneras.
Herramientas de campo
Herramientas de 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 detecte 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 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 generar latencia debido a la necesidad de configurar conexiones a esos servidores. Para medir el TTFB de los recursos en el campo, usa la API de Resource Timing 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 se considera el hecho de que algunos recursos cargados desde el origen principal pueden mostrar un valor de 0, ya que la conexión ya está abierta o un recurso se recupera instantáneamente desde una caché.
Cómo mejorar el TTFB
Si deseas obtener orientación para mejorar el TTFB de tu sitio, consulta nuestra guía detallada para optimizar el TTFB.