¿Qué es el tiempo hasta el primer byte (TTFB)?

TTFB significa tiempo hasta el primer byte.
Es una métrica temporal que determina el tiempo que tarda en llegar el primer byte de una respuesta del servidor cuando se realiza alguna petición de un recurso.
Un ejemplo perfecto de tiempo hasta el primer byte podría ser que una persona quisiera ver la página principal de un sitio WordPress.
Ahora, se realiza una solicitud de recurso al servidor backend de WP para cargar la página principal del sitio, y el servidor devuelve el primer byte al navegador transcurrido cierto tiempo; supongamos 2 segundos.
Este tiempo entre la solicitud de contenido del navegador y la recepción del primer byte de vuelta del servidor se conoce como ttfb y también se denomina tiempo del primer byte, ya que ambos significan lo mismo.

Componentes TTFB

El proceso de TTFB consta de tres grandes fases de solicitud que se mencionan a continuación:

• Tiempo de solicitud HTTP
• Tiempo de solicitud del proceso
• Tiempo de respuesta HTTP

1. El tiempo de solicitud HTTP se refiere al tiempo que tarda la solicitud de un usuario desde el navegador en llegar al servidor.
Por ejemplo, supongamos que tienes un blog y un visitante abre tu sitio.
Ahora, el navegador del visitante enviará una petición HTTP a tu servidor.
El tiempo que tarda esta petición en llegar al servidor será el tiempo de Petición HTTP.
Hay múltiples factores que pueden ralentizar esta fase, como la lentitud en la búsqueda de DNS (Servidor de Nombres de Dominio), la velocidad de conexión a Internet del visitante, la distancia física entre la ubicación de tu servidor y la ubicación del navegador del visitante, etc. 2. El tiempo de procesamiento de la solicitud se refiere al tiempo necesario para procesar la solicitud y generar una respuesta una vez recibida en el servidor.
Tomando el mismo ejemplo, puedes decir que ahora la solicitud del navegador de tu visitante para ver la página de tu blog ha llegado al servidor, y éste está procesando la solicitud para empezar a devolverte una respuesta como primer byte.
Esta fase puede ralentizarse debido a la lentitud de las llamadas a la base de datos, a la ejecución excesiva de scripts en el servidor, a la insuficiencia de recursos del servidor, etc. 3. El Tiempo de Respuesta HTTP se refiere al tiempo que tarda el primer byte de datos de respuesta en llegar al navegador desde el servidor después de ser procesado.
Considerando el mismo ejemplo, puedes decir que ahora tu servidor está enviando al navegador de tu visitante el primer byte de datos de respuesta.
Un cuello de botella importante que podría ralentizar esta fase podría ser la escasa velocidad de la red, tanto del servidor como del cliente.

¿Cuál es una buena puntuación TTFB?

Una puntuación TTFB es una puntuación o calificación para evaluar los resultados de nuestro TTFB.
Podemos clasificar estas puntuaciones en tres categorías (mala, media y buena): cuanto menor sea la ttfb, mejor será la categoría de puntuación.

• Pobre – 600 ms (0,6 segundos) o superior.
• Media – entre 200 ms (0,2 segundos) y 500 ms (0,5 segundos).
• Bueno: todo lo que sea inferior a 200 ms (0,2 segundos).

¿Cómo medirlo?

Las técnicas para medir el tiempo transcurrido hasta el primer byte pueden clasificarse en tres grandes categorías (Herramientas de campo, Herramientas de laboratorio y Medición en JavaScript).
A continuación se explica detalladamente cada una de ellas.

1. Herramientas de campo

Las herramientas de campo miden los resultados obtenidos de la actividad de los usuarios en tiempo real.
Hay dos herramientas de campo especialmente conocidas para medir la TTFB, que se mencionan a continuación:

• Informe sobre la experiencia del usuario de Chrome. Te proporciona datos de la experiencia del usuario en tiempo real, comprobados en usuarios que han optado por ella.
  Mide las mismas métricas vitales de la web que cualquier herramienta de laboratorio, como la primera pintura de contenido (FCP), el mayor dolor de contenido (LCP), el tiempo hasta el primer byte (TTFB), etc.
  Sin embargo, es diferente porque te ofrece la experiencia del usuario en tiempo real en lugar de sólo resultados de laboratorio.
• Web-vitals es una biblioteca JavaScript muy ligera y modular para medir todas las constantes vitales esenciales de la web en usuarios en tiempo real.
  Es una biblioteca cliente que puede descargarse fácilmente mediante npm (gestor de paquetes node) o mediante yarn (otro localizador de recursos).
  Puedes determinar el TTFB en el navegador utilizando esta biblioteca JavaScript fácil de usar y eficiente, que comprueba la actividad del usuario en tiempo real.

2. Herramientas de laboratorio

A diferencia de las herramientas de campo, las herramientas de laboratorio suelen medir las métricas del sitio web sin ninguna interacción del usuario en tiempo real.
Algunas de las herramientas de laboratorio especialmente conocidas para medir el tiempo hasta el primer byte son:

• Chrome dev tools Es una de las formas más comunes de medir las vitales web centrales o TTFB.
  El único requisito previo para utilizarlo es ser usuario de Chrome.
  En tu navegador, puedes abrir las herramientas de desarrollo de Chrome pulsando la tecla F12 o haciendo clic con el botón derecho en la página y seleccionando inspeccionar en la parte inferior de la opción de herramientas.
  Una vez abiertas las herramientas de desarrollo, busca la pestaña Red, que debería estar entre las pestañas Fuentes y Rendimiento.
  Te mostrará una columna en cascada con las peticiones realizadas.
  Selecciona el elemento que quieras inspeccionar, y encontrarás Esperando (TTFB) en la sección Solicitud/Respuesta.
  Nota: Los resultados de la prueba que obtengas pueden no ser los que experimente el visitante de tu sitio, porque las condiciones específicas de tu red y la latencia de la misma pueden influir en el TTFB.
• WebPageTest Es una herramienta de análisis de sitios web en línea inteligente y fácil de usar, ideal si quieres comprobar rápidamente la velocidad de tu sitio web.
  También puedes obtener un informe detallado que cubre las principales métricas vitales de la web, incluido el TTFB.El uso es bastante sencillo.
  Sólo tienes que visitar la herramienta, pegar o introducir la URL de tu sitio web en el campo de texto y, a continuación, hacer clic en el botón Iniciar prueba para comenzar la prueba.
  Una vez finalizado el proceso de evaluación de la prueba, te mostrará una página de resultados rica en información y detalles sobre diversas métricas.
  También hay allí una puntuación de TTFB, que te ayuda a determinar el TTFB de tu sitio web y a tomar las decisiones pertinentes en consecuencia.
  En general, esta herramienta es asombrosa y te proporciona todas las métricas necesarias del sitio web.
• GTmetrix Funciona igual que WebPageTest, con un campo de URL del sitio web al principio y una página de resultados que muestra diferentes matrículas al final.
• KeyCDN Se trata, de nuevo, de una herramienta muy eficaz que funciona del mismo modo que WebPageTest y GTmetrix.

3. Medir en JavaScript

Si eres un desarrollador al que le gusta utilizar código frente a herramientas, incluso para las analíticas, esta opción es ideal para ti.
Puedes medir el TTFB utilizando algo de código JavaScript.
Para medir el TTFB de las solicitudes de navegación en el navegador, podemos utilizar la Navigation Timing API (una API que proporciona datos utilizados para medir el rendimiento de un sitio web).
Vamos a crear un PerformanceObserver que escuche una entrada de navegación, y luego podemos registrar los resultados en la consola.

new PerformanceObserver((entryList) => { const [pageNav] = entryList.getEntriesByType('navigation'); console.log(`TTFB: ${pageNav.responseStart}`); }).
observe({ type:'navegación', buffered: true }); 

Utilizar PerformanceObserver sólo tiene un inconveniente, y es que no todos los navegadores lo soportan.
Para garantizar la máxima compatibilidad con los navegadores, resulta útil el paquete JavaScript web-vitals.
Un ejemplo básico del uso de la biblioteca web-vitals para medir el TTFB es demostrable mediante el siguiente fragmento de código, donde puedes ver que con sólo 2-3 líneas de código básico, podemos determinar rápidamente el TTFB de nuestro sitio web.

import {onTTFB} from 'web-vitals'; // Mide y registra TTFB en cuanto esté disponible.
onTTFB( console.log);