Que es el Time To First Byte (TTFB), importancia y como medirlo

Todos los implicados en la publicación web oímos mencionar cada vez más el término Time To First Byte o sus siglas TTFB, valor tomado en cuenta actualmente para calificar un sitio web como rápido, antes los ojos de Google e imprescindible para el posicionamiento en este buscador.
En este artículo explico en que consiste, su importancia, alternativas para medirlo y cómo podemos reducirlo.

¿En qué consiste el Time To First Byte (TTFB) de un sitio web?

El Time To First Byte, en español tiempo hasta el primer byte, es sencillamente el tiempo que tarda en llegar al navegador, el primer byte de datos de la página solicitada.
Este valor se mide en milisegundos.
Google considera actualmente que en la web moderna, un sitio para que se considere rápido, su valor del Time To First Byte debe ser inferior a 200 milisegundos.
No es un capricho, valores altos del TTFB provocan que gran cantidad de usuarios abandonen la página, antes de que termine de cargar.
Por lo tanto en este momento es imprescindible, para optimizar un sitio web para los buscadores, tratar de reducir en lo posible el valor del Time To First Byte.

Factores que determinan el valor del Time To First Byte

El Time To First Byte de un sitio, es la suma de tres componentes: el tiempo necesario para hacer llegar la solicitud al servidor, más el tiempo que demora este en procesarla y responder, más el tiempo transcurrido hasta que llega la respuesta al navegador.
El primero y el tercer componente, forman la latencia.

¿Qué es la latencia?
Latencia es la cantidad de tiempo que demora en transmitirse, una pieza de datos de una localización a otra.
Depende de la distancia física entre ambos puntos y del número de saltos entre las distintas redes para establecer la conexión.
Mientras más rápido sea este viaje, menor será su valor.
Es decir, que el Time To First Byte de un sitio, depende de los siguientes factores:
Para resumir, la única forma de lograr un TTFB inferior a 200 ms, es usando un servicio de alojamiento con buen rendimiento y situado geográficamente cerca de los lectores del sitio.
Nada de alojamiento compartido (share hosting).
En sitios con WordPress se hace todavía mucho más difícil, porque las consultas a la base de datos ralentizan las respuestas y requieren de recursos más potentes. Actualmente muchos servicios de alojamiento ofrecen la opción de WordPress Hosting, con más recursos, enfocados para este tipo de sitios.

Como medir y conocer el Time To First Byte de un sitio web

Hay dos formas de medir el TTFB de un sitio web, desde un servicio de internet y desde la computadora local.
Servicios de internet como WebPageTest, permiten hacer varias pruebas, desde distintas ubicaciones y es el método ideal, con la desventaja de la demora del test.

Medir el TTFB localmente desde la computadora

Desde nuestra computadora podemos medir y monitorear el TTFB de un sitio rápidamente, aunque no es la opción más exacta y lógicamente solo devuelve el tiempo desde nuestra ubicación, además depende de la calidad de la conexión.
No obstante es el método ideal cuando necesitamos hacer pruebas regularmente, al hacer cambios en nuestro sitio, también para probar distintos proveedores de alojamiento e incluso para saber el que poseen los sitios de nuestra competencia.
Podemos hacerlo de alguna de las siguientes formas:

Medir el TTFB con la Consola de Google Chrome

Con el navegador Google Chrome podemos medir entre otros parámetros, el Time To First Byte de cualquier sitio web.
Hazlo de la siguiente forma.
Medir el TTFB de un sitio web con la Consola de Google Chrome

Medir TTFB con un script en la consola del navegador

Otra forma de medir el TTFB bien sencilla, es usando el siguiente script.
Solo abre la consola del navegador, pega el script y presiona Enter.

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

Calcular y medir el TTFB con la Navigation Timing API

La Navigation Timing API nos permite conocer las principales métricas de carga y rendimiento de las páginas web.
Con Javascript se pueden extraer y escribir los valores de sus atributos, entre ellos el del Time To First Byte.
A continuación se muestra el que corresponde a este sitio web.
En dispositivos con iOS (iPhone) este valor no se muestra correctamente.
Es el mismo método que usa Google Chrome, por lo que los valores son idénticos.
Para mostrar el TTFB de esta página uso el siguiente script.

<script>
window.onload = function(){
document.getElementById("ttfb").innerHTML = "Time To First Byte : " + (window.performance.timing.responseStart - window.performance.timing.requestStart) + " ms";
}
</script>

Lee en otro artículo más información detallada y cómo hacerlo: Como usar la Timing API para ver las métricas de carga y rendimiento de una página

Aplicaciones para medir el TTFB

Existen varias extensiones para el navegador, que permiten conocer el TTFB de un sitio web.
Recomiendo los siguientes.
En todos los casos debemos de comprender que el Time To First Byte no es un parámetro exacto ya que depende de varios factores.
Si hacemos varias pruebas sucesivas, veremos que cada una de ellas indica un valor ligeramente diferente.

Como medir la latencia de un sitio web

La latencia como decía anteriormente, es uno de los intervalos que forma parte del TTFB.
Podemos medirla por separado, para saber el valor correspondiente hasta un servidor web.
Es mucho más sencillo saberla, solo necesitamos usar en Windows el comando PING.
Con el comando Ping se envía un pequeño paquete de datos a un servidor y se mide la suma de la velocidad de ida y vuelta.
No requiere procesamiento por parte del servidor, por lo que su valor indica casi exactamente la latencia.
Para hacer ping solo basta con introducir en el Símbolo del sistema la siguiente instrucción:

PING sitioweb.com
PING dirección IP

Lee más información sobre el uso del comando PING en Windows.

Como reducir el Time To First Byte de un sitio web

De todo lo explicado anteriormente se puede deducir que la solución más lógica para reducir la latencia, es reducir en lo posible la distancia entre el servidor web y los visitantes.
En caso de sitios que den soporte a usuarios de varios países, es imprescindible usar un servicio CDN o Red de Distribución Geográfica, como usan los sitios importantes de internet.
Además es necesario que este CDN sirva desde su cache no solo los recursos estáticos, sino también el contenido HTML.
De lograrlo, para reducir el valor del Time To First Byte en total, solo resta mejorar la calidad del servicio de alojamiento y usar un servicio de resolución de DNS de calidad.
En otro artículo explico cómo usar el servicio de Cloudflare para reducir al máximo, el valor del Time To First Byte de un sitio web.
Como rReducir el Time To First Byte (TTFB) a menos de 200 ms con Cloudflare

Mas información detallada sobre el TTFB en Web.dev: Time to First Byte (TTFB)

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales