Tiempo hasta el primer byte (TTFB)

Barry Pollard
Jeremy Wagner

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

Source

¿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.

Una visualización de los tiempos de solicitud de red. Los tiempos de izquierda a derecha son redireccionamiento, inicio del trabajador de servicio, evento de recuperación del trabajador de servicio, caché HTTP, DNS, TCP, solicitud, sugerencias anticipadas (103), respuesta (que se superpone con la solicitud de descarga), procesamiento y carga. Los tiempos asociados son redirectStart y redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart y loadEventEnd.
Un diagrama de las fases de solicitud de red y sus tiempos asociados. El TTFB mide el tiempo transcurrido entre startTime y responseStart.

El TTFB es la suma de las siguientes fases de solicitud:

  • Tiempo de redireccionamiento
  • Tiempo de inicio del service worker (si corresponde)
  • búsqueda de DNS
  • Negociación de conexión y 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.

TTFB y sugerencias iniciales

La introducción de los 103 indicadores anticipados genera cierta confusión sobre qué mide el TTFB del "primer byte". Las 103 sugerencias anticipadas se cuentan como los "primeros bytes". finalResponseHeadersStart es una entrada de tiempo adicional a responseStart que mide el inicio de la respuesta final del documento (por lo general, una respuesta HTTP 200) que se medirá.

Las sugerencias anticipadas son solo un ejemplo más reciente de la respuesta anticipada. Algunos servidores permiten que se borre de forma anticipada 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 podrían considerarse similares en efecto a los indicadores anticipados. Esta es otra razón por la que todo esto se mide como reponseStart y, por lo tanto, como TTFB.

Enviar datos con anticipación tiene un valor real si la respuesta completa llevará un poco más de tiempo. Sin embargo, 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. Lo más importante es comprender qué mide la herramienta que usas y cómo se ve afectada por la plataforma que se mide.

¿Cuál es una buena puntuación 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 procesamiento de imagen con contenido más grande (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.

Los valores buenos de TTFB son de 0.8 segundos o menos, los valores deficientes son superiores a 1.8 segundos y los valores intermedios deben mejorarse.
Los valores buenos de TTFB son de 0.8 segundos o menos, y los valores deficientes son superiores a 1.8 segundos.

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

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 de una solicitud de navegación, excepto que, en lugar de consultar entradas de 'navigation', consultas entradas de '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.