Guía para entender qué es el TTFB y cómo mejorar los tiempos de carga de una web

Lola Hernandez Caballero/ septiembre 11, 2020/ General, interdominios, Navegadores/ 2 comentarios

En la última Guía de Mantenimiento de WordPress que hemos creado, mencionamos el TTFB (time to first byte) como una métrica importante y queremos explicarte porqué. Se trata de un elemento vital que debes tener en cuenta a la hora de optimizar y acelerar tu página web. Pero ¿Qué es el TTFB (time to first byte)? ¿Cómo podemos mejorarlo? Vamos a ver cómo el TTFB afecta al rendimiento de tu web y cómo puedes reducirlo para obtener una mejor velocidad de carga y mejorar en su posicionamiento SEO.

¿Qué es TTFB?

TTFB es una abreviatura de «tiempo hasta el primer byte». Es una medida del tiempo que un navegador (usuario) tiene que esperar para recibir el primer byte de datos del lado del servidor. Cuanto más tiempo tarde el servidor en procesar la solicitud y responder en consecuencia, más tiempo será TTFB.

Es la medida de cuánto tiempo el navegador tiene que esperar antes de recibir su primer byte de datos del servidor. 

Cuanto más tarda el servidor en responder, más tiempo tarda el navegador en mostrar la página al usuario.

Cuando haces clic en un enlace para acceder una web, al servidor le lleva un tiempo mostrar los contenidos de un web al navegador. Ese tiempo de espera (que suele ser de milisegundos) incluye la ejecución de varios scripts y la ejecución de comandos.

TTFB es el tiempo que debe esperar un navegador para recibir la primera cantidad de datos.

¿Cómo se transfieren los datos?

Para entender bien qué es el TTFB es necesario comprender cómo se transfieren los datos en Internet.

El proceso ocurre en tres pasos:

1. Tiempo de Solicitud: El tiempo que se tarda en enviar la solicitud para abrir una página.
2. Procesamiento: Tiempo en el procesamiento de la solicitud por parte del servidor web.
3. Tiempo de respuesta: El tiempo que tarda en responder el servidor con el primer byte de datos.

 

1. Tiempo de solicitud Http

Cuando un usuario hace clic en una URL en un navegador, el navegador envía la solicitud HTTP al servidor.

El navegador no puede enviar datos directamente al servidor, por lo que utiliza proxies (navegador, medio, lan, WiFi) para crear una conexión.

Algunos factores que ralentizan esta fase pueden ser:

• Tiempos de búsqueda de DNS lentos que contribuyen a aumentar el tiempo de solicitud.
• Si el servidor se encuentra geográficamente lejos, en otro país, y los datos tienen que viajar a grandes distancias.
• Reglas de firewall complejas, esto podría aumentar el tiempo de enrutamiento.
• La velocidad del internet del cliente. 

Después de recibir la solicitud, el servidor procesa la solicitud.

2. Procesamiento de la solicitud

Una vez enviada la solicitud, el servidor tiene que procesarla y generar una respuesta.

El servidor busca los archivos que el navegador ha solicitado y los prepara para enviarlos al navegador.

El tiempo que lleva este proceso puede verse afectado por:

• Consultas a la base de datos lentas
• Demasiados scripts de terceros
• No enviar a la cache su primera respuesta
• Código mal optimizado para el tema de WordPress
• Recursos ineficientes del servidor como disco I/O o memoria.

El servidor comienza a enviar los datos / páginas web al navegador.

3. Tiempo de respuesta al usuario

El servidor responde con los datos solicitados y el navegador los muestra al usuario como una página web. En ese momento recibe el primer byte.

Esta fase puede verse afectada por:

• Velocidad de red del servidor lenta
• Velocidad de red del usuario lenta.  

¿Es importante el TTFB? 

Existe un largo debate sobre si TTFB es importante o no.

Cloudflare tiene un artículo detallado sobre por qué no atienden al TTFB y por qué no debes preocuparte por eso en absoluto.

Cloudflare realizó un experimento. En la prueba, enviaron instrucciones al servidor para enviar la letra ‘H’ como primera respuesta y luego esperar diez segundos antes de enviar cualquier otra cosa. Recibieron la respuesta «H». Más tarde, el navegador recibió el resto del contenido después de diez segundos.

Esto significa que TTFB no busca el primer byte del contenido, sino el primer byte de la respuesta.

Por otro lado, Moz también ha realizado investigaciones relevantes.

Ha probado 100.000 URL y ha descubierto que las páginas que se clasifican bien en Google tienen un TTFB más bajo que las demás.

La publicación de Littlebizzy ofrece una excelente visión del tema.

Aunque TTFB podría tener algo de impacto sobre la velocidad del sitio, no tiene sentido para el usuario final ya que el TTFB sería distinto para cada usuario, que varía en función de su conexión a Internet, el dispositivo desde el que se conecte, la ubicación, etc.

Es una métrica que depende del entorno y cada usuario tiene una configuración única.

Google usa el término Tiempo de respuesta de respuesta del servidor en su documentación, no TTFB.

Independientemente del debate generado, en nuestra opinión, aunque el TTFB puede ser un factor que varía en función de cada usuario, es importante saber medirlo y tenerlo en cuenta a la hora de optimizar y acelerar una web.

Los sitios web con menor TTFB son más rápidos en general, y mejor valorados por Google Page Speed. 

¿Cuál es el TTFB más óptimo?

Que tu web tenga un TTFB por debajo de 100 ms es perfecto.

Google PageSpeed Insights recomienda menos de 200 ms para el tiempo de respuesta del servidor.

Si tu web está en 300-500 ms, es el tiempo TTFB estándar.

Y si tu web tiene más de 600 ms, es posible que tengas algo mal configurado en tu servidor que necesita ser revisado.

Herramientas para medir el TTFB de tu web

Hay varias herramientas que puedes utilizar para medir el TTFB.

1. WebPageTest
2. Geekflare’s Tool
3. Google Chrome DevTools
4. Pingdom
5. GTmetrix
6. KeyCDN
7. DotCom tools

Como ya hemos comentado, el TTFB puede variar dependiendo de cada usuario y esto se nota al utilizar distintas herramientas. Los resultados que arrojan suelen variar unos de otros, aunque las discrepancias son menores.

Te recomendamos que elijas una herramienta y midas siempre con la misma.

1. Medir TTFB con WebPageTest

WebPage Test te brinda muchas herramientas para medir la velocidad de tu web. Solo tienes que introducir la url.

Puede verificar la velocidad desde ordenador/laptop, dispositivos móviles, varios navegadores y desde múltiples ubicaciones.

Ofrece mucha información sobre la velocidad del sitio, entre otros datos también mide el TTFB.

2. Medir el TTFB con la Herramienta Geekflare

Geekflare es, desde nuestro punto de vista, una de las mejores herramientas para medir el TTFB en concreto.

Geekflare es una herramienta muy sencilla, rápida con la que podrás medir el TTFB de tu web desde distintas partes del mundo.

3. Medir TTFB con Google Chrome DevTools

También puedes utilizar Chrome Dev Tools para medir TTFB.

Chrome DevTools es un conjunto de herramientas de creación web y depuración integrado en el navegador Google Chrome.

Pero tiene un inconveniente. Si estás probando TTFB con esta herramienta desde tu computadora, los resultados pueden verse afectados por la latencia de la red y su conexión a Internet. Por lo tanto,  si te decides por esta herramienta, es recomendable que utilices Google Chrome Canary, pensado para desarrolladores web.

Para abrir Chrome Dev Tools debes:

• Ir al menú de Chrome
• Selecciona Más herramientas> Herramientas para desarrolladores
• Haz clic derecho en un elemento de la página
• Elija Inspeccionar. También puede usar las combinaciones de teclas Ctrl + Shift + I (Windows) o Cmd + Opt + I (Mac)
• Abra la ventana de la red
• Verifique el rendimiento de su sitio web

Google Dev Tools te ofrece el TTFB de la siguiente manera:

En lugar de TTFB, Pingdom lo llama tiempo de espera. Pero tiene el mismo significado.

Antes no hacia falta registrarse, pero desde hace un tiempo para acceder a los informes de Pingdom es necesario registrarse y obtener un periodo de prueba de 14 días. Después los servicios de esta herramienta pasan a ser de pago.

Muestra el tiempo necesario para recuperar cada uno de los componentes de la página de forma individual. Permite comprobar qué script o elemento de la página está tardando en cargarse.

La herramienta se ha actualizado y ofrece otros servicios cómo el análisis del comportamiento de los usuarios, velocidad de carga, un simulador de transacciones, etc.

5. Medir TTFB con GTmetrix

GTmetrix es, a día de hoy, una de las herramientas más utilizadas por los desarrolladores web, junto a Google Page Speed, para comprobar la velocidad de carga de una web. Es gratuita y la valoración que hace de las webs analizadas son fácilmente comprensibles para todo el mundo.

Para ver el TTFB debes ir a la pestaña Waterfall – y situar el cursor sobre la primera fila (en all).

6. Medir TTFB con KeyCDN

KeyCDN ofrece pruebas completas de páginas web desde múltiples ubicaciones. La lista muestra el TTFB exclusivamente y también proporciona algún que otro dato interesante.

Cuando El TTFB aceptable (menos de 300 ms) la herramienta lo marca en verde. 

Para usar KeyCDN debes registrarte y activar la cuenta a través del email que llegue a tu bandeja de correo electrónico. Si activas la cuenta, la herramienta no te proporcionará ningún dato.

Maneras de Reducir TTFB en tu Sitio WordPress

Ahora vamos a ver cómo reducir el TTFB desde su sitio desarrollado en WordPress.

1. Utiliza un hosting rápido de WordPress

La primera manera de reducir TTFB es asegurarse de que estás utilizando un hosting preparado y optimizado para WordPress como es el caso de Interdominios.

Contamos con la mejor tecnología SSD y sistemas de compresión GZIP para que nuestros servidores ofrezcan un TTFB óptimo (entre 200 y 300 ms).

2. Mejora la distancia geográfica

Distancia geográfica: La distancia física entre el servidor y el usuario afecta el TTFB. Esto se llama tasa de latencia. Para reducir la tasa de latencia, debe acercar el servidor al visitante.

Si los usuarios de tu web proceden mayoritariamente de España, debes contratar un hosting de este país. Interdominios se ubica en Madrid (España) por lo que supone una buena opción para los websites ubicados en este territorio.

3. Utiliza una CDN

Si tu web es internacional y tu público se encuentra repartido en distintos países debes acudir a una CDN.

CDNsignifica Red de entrega de contenido. Una red de entrega de contenido (CDN) es un sistema de servidores distribuidos (red) que entregan contenido al visitante, según las ubicaciones geográficas del usuario, el origen de la página web y el servidor de entrega de contenido.

Las mejores CDN disponibles son:

• StackPath
• Sucuri
• Cloudflare
• KeyCDN
• CacheFly

4. Habilita el almacenamiento en cache

Una de las maneras más fáciles de reducir su TTFB es utilizar la cache en su sitio WordPress.

La cache ayuda a disminuir TTFB ya que reduciendo la cache se reduce el tiempo de procesamiento del servidor. 

Si no está configurando el almacenamiento en caché correctamente, estarás agregando una carga adicional en tu web. El mismo contenido tiene que recorrer la misma distancia siempre que haya una llamada.

Debes habilitar el almacenamiento en caché del navegador para que el navegador pueda recuperar el archivo de la memoria en lugar de enviar una solicitud al servidor.

Puedes habilitar el almacenamiento en caché en WordPress con estos plugins:

• WP Rocket
• W3 Total Cache
• WP Super Cache
• Sucuri Firewall
• WP Fastest Cache
• Comet Cache

5. Tener un servicio Premium de DNS

El DNS juega un papel en el TTFB también.

Es difícil calcular exactamente cuánto afecta el DNS al TTFB, pero es un elemento a tener en cuenta. Interdominios ofrece un buen servicio de DNS por lo que tu web no se verá afectada por este factor.

Puedes probar la velocidad de DNS con la herrramienta SolveDNS. 

Resumen

Hay muchos más aspectos para reducir el TTFB como: crear cache de base de datos, uso de Swap, RAM, configuración de PHP, configuración de MySQL, configuración de red, sobrecarga TLS, etc. Pero los anteriormente mencionados son bastante fáciles de implementar y darán un impulso al rendimiento de tu web.

Lo más importante para reducir el TTFB de tu web es: un hosting rápido optimizado para WordPress, uso de CDN en sitios webs internacionales, uso de un buen plugin de cache y DNS premium.