Ver contenido
TTFB (Time to First Byte): Entendiendo el Tiempo de Respuesta del Servidor
Introducción
Time to First Byte (TTFB) mide el tiempo desde que un usuario o cliente hace una solicitud HTTP hasta que el primer byte de la respuesta llega al navegador del cliente. Es una métrica de rendimiento fundamental que impacta directamente todas las demás métricas de tiempo—incluyendo FCP, LCP, y el tiempo total de carga de la página.
TTFB es esencialmente una medida de la capacidad de respuesta de tu servidor. Un TTFB lento significa que los usuarios están esperando antes de ver cualquier cosa, mientras que todo lo demás en tu página—imágenes, scripts y estilos—debe esperar en fila.
¿Qué es TTFB?
TTFB mide el tiempo entre la solicitud de navegación y cuando el navegador recibe el primer byte de la respuesta HTML. Esto incluye varios procesos de red y servidor:
Componentes de TTFB:
├── Búsqueda DNS: Resolver dominio a IP (20-120ms)
├── Conexión TCP: Establecer conexión (20-100ms)
├── Handshake TLS: Configurar conexión segura (30-100ms)
├── Viaje de Solicitud: Solicitud llegando al servidor (variable)
├── Procesamiento del Servidor: Generar respuesta (variable)
└── Viaje de Respuesta: Primer byte retornando (variable)
Qué Mide TTFB
Línea de Tiempo de Carga:
Inicio Navegación → DNS → TCP → TLS → Solicitud → Servidor → Primer Byte → HTML → FCP → LCP
└─────────────────── TTFB ────────────────────┘
↑
Todo espera aquí
Insight clave: TTFB es la base. Cada milisegundo de TTFB retrasa directamente FCP, LCP, y cuándo los usuarios ven el contenido.
Umbrales de TTFB
Según la documentación de web.dev de Google, las puntuaciones de TTFB se categorizan como:
✅ Bueno: ≤ 800 milisegundos
⚠️ Necesita Mejora: 800 - 1800 milisegundos
❌ Pobre: > 1800 milisegundos
Objetivo: Apunta a un TTFB menor a 800ms. Para una experiencia de usuario óptima, intenta lograr menos de 200ms.
¿Por Qué es Importante TTFB?
TTFB importa por varias razones clave:
1. Es el Punto de Partida
Nada puede renderizarse hasta que el navegador reciba el HTML. TTFB determina cuándo puede comenzar el renderizado:
TTFB Lento (1.5s):
[──────────── Espera ────────────][FCP a 2.5s][LCP a 3.5s]
TTFB Rápido (200ms):
[Espera][FCP a 1.0s][LCP a 2.0s]
└── ¡Los usuarios ven contenido 1.5 segundos antes!
2. Impacto Multiplicado
TTFB afecta cada recurso en tu página:
- Documento HTML (impacto principal)
- Hojas de estilo CSS (bloquean renderizado)
- Archivos JavaScript
- Imágenes y fuentes
- Llamadas a API
3. Indicador de Salud del Servidor
Un TTFB alto a menudo indica problemas del servidor:
- Servidor sobrecargado
- Consultas lentas a base de datos
- Código del lado del servidor ineficiente
- Falta de caché
- Infraestructura de hosting pobre
4. Afecta Core Web Vitals
Aunque TTFB no es un Core Web Vital en sí, impacta directamente LCP:
- TTFB alto → LCP tardío → Señal de ranking pobre
- Los problemas del servidor se propagan a la experiencia del usuario
¿Qué Afecta el TTFB?
Varios factores contribuyen al TTFB:
1. Distancia Geográfica
Distancia física entre usuario y servidor:
Usuario en Chile → Servidor en US Este = 180ms+ de latencia
Usuario en Chile → Servidor en Santiago = 20ms de latencia
Solución: Usa una CDN con servidores edge en todo el mundo.
2. Tiempo de Procesamiento del Servidor
Trabajo del backend para generar la respuesta:
Procesamiento lento:
├── Consultas complejas a base de datos
├── Código de servidor no optimizado
├── Renderizado pesado del lado del servidor
├── Llamadas a APIs de terceros
└── Falta de caché del servidor
3. Latencia de Red
Tiempo para que los datos viajen:
Componentes de Red:
├── Resolución DNS (puede ser cacheada)
├── Establecimiento de conexión TCP
├── Negociación TLS (puede optimizarse)
└── Tiempo físico de viaje de datos
4. Infraestructura de Hosting
Hardware y configuración del servidor:
- Hosting compartido (lento, inconsistente)
- VPS (mejor, recursos dedicados)
- Servidores dedicados (mejor rendimiento)
- Edge computing (más rápido, distribuido)
5. Sin Estrategia de Caché
Sin caché, los servidores regeneran respuestas repetidamente:
Sin caché:
Solicitud → Base de Datos → Procesar → Generar HTML → Enviar (500ms cada vez)
Con caché:
Solicitud → Verificar Caché → Enviar Respuesta Cacheada (50ms)
Mejores Prácticas Básicas
1. Usa una CDN
Sirve contenido desde ubicaciones edge cerca de los usuarios:
Beneficios de CDN:
├── Latencia reducida (servidores más cercanos)
├── Contenido cacheado en el edge
├── Carga reducida del servidor origen
├── Mejor disponibilidad
└── A menudo incluye SSL gratuito
Opciones populares de CDN: Cloudflare, Fastly, AWS CloudFront, Vercel Edge.
2. Optimiza el Procesamiento del Servidor
Reduce el trabajo que el servidor necesita hacer:
Optimización del Servidor:
├── Cachear consultas de base de datos
├── Optimizar consultas SQL
├── Usar algoritmos eficientes
├── Reducir llamadas a terceros
└── Perfilar y arreglar cuellos de botella
3. Habilita Caché HTTP
Configura headers de caché apropiados:
Cache-Control: public, max-age=31536000, immutable
Para activos estáticos (CSS, JS, imágenes) y:
Cache-Control: public, max-age=0, must-revalidate
Para páginas HTML que pueden cambiar.
4. Usa HTTP/2 o HTTP/3
Los protocolos modernos reducen la sobrecarga de conexión:
HTTP/1.1: Conexión separada por solicitud
HTTP/2: Conexiones multiplexadas
HTTP/3: Protocolo QUIC (handshakes más rápidos)
5. Optimiza TLS
Reduce el tiempo de handshake TLS:
- Usa TLS 1.3 (handshake más rápido)
- Habilita reanudación de sesión
- Usa OCSP stapling
- Optimiza la cadena de certificados
TTFB vs Otras Métricas
| Métrica | Qué Mide | Relación con TTFB |
|---|---|---|
| TTFB | Tiempo de respuesta del servidor | Métrica base |
| FCP | Primer contenido pintado | Retrasado por TTFB |
| LCP | Contenido más grande pintado | Retrasado por TTFB |
| FID/INP | Interactividad | Indirectamente afectado |
Insight clave: TTFB es una métrica de diagnóstico que ayuda a identificar problemas del lado del servidor. Arregla TTFB para mejorar todas las demás métricas.
Cómo Verificar con UXR SEO Analyzer
La extensión UXR SEO Analyzer te ayuda a monitorear TTFB:
- Instala la extensión UXR SEO Analyzer en Chrome
- Navega a cualquier página de tu sitio web
- Abre la extensión
- Ve a la pestaña “Performance”
- Revisa el evaluador “TTFB”
La extensión mostrará:
- Valor actual de TTFB
- Si cumple el umbral de 800ms
- Indicadores de respuesta del servidor
- Sugerencias de mejora
Próximos Pasos
¿Quieres dominar todas las técnicas avanzadas de optimización de TTFB? Lee nuestra guía completa de optimización de TTFB donde cubrimos:
- Estrategias de configuración de CDN
- Técnicas de caché del servidor
- Optimización de base de datos
- Beneficios de edge computing
- Implementación de HTTP/2 y HTTP/3
- Optimización de renderizado del lado del servidor
Artículos Relacionados:
- FCP Explicado - Fundamentos de First Contentful Paint
- LCP Explicado - Conceptos básicos de Largest Contentful Paint
- Guía de Respuesta del Servidor - Optimizando rendimiento del backend
Referencias
Este artículo cita las siguientes fuentes autorizadas:
[1] web.dev: Time to First Byte (TTFB) https://web.dev/articles/ttfb Documentación oficial de Google que define TTFB. Explica qué contribuye al TTFB (tiempo de redirección, inicio de service worker, búsqueda DNS, conexión/negociación TLS, y solicitud hasta inicio de respuesta), el umbral de 800ms, y cómo TTFB impacta otras métricas.
[2] Chrome Developers: Lighthouse TTFB Audit https://developer.chrome.com/docs/lighthouse/performance/time-to-first-byte Documentación técnica sobre cómo Lighthouse mide y puntúa TTFB. Incluye recomendaciones para reducir TTFB a través de caché, CDNs, y optimización del servidor.
[3] MDN Web Docs: Navigation Timing API
https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
Referencia técnica para medir TTFB usando performance.timing.responseStart - performance.timing.navigationStart en navegadores. Esencial para entender cómo se captura TTFB en el monitoreo de usuarios reales.
Recursos Adicionales
- PageSpeed Insights - Prueba el TTFB de tu página
- WebPageTest - Análisis detallado de tiempos del servidor
- Chrome User Experience Report - Datos de TTFB del mundo real
Nota: Este artículo es parte de nuestra serie de análisis SEO. Explora todos los artículos en el Hub de SEO de Rendimiento.
Fuentes: web.dev (TTFB), Chrome Developers (Lighthouse), MDN Web Docs (Navigation Timing API)