103 Early Hints: Precarga recursos críticos durante el tiempo de procesamiento del servidor

Última revisión por Arjen Karel en marzo de 2026

¿Qué son los 103 Early Hints?

Early Hints es un código de estado HTTP (103) enviado antes de que el servidor web envíe la respuesta final. Permite al servidor indicar al navegador, al principio del proceso de carga, que ciertos recursos como una imagen o una hoja de estilos son críticos para renderizar la página.

La mayoría de las páginas dinámicas tardan en generarse. El servidor consulta una base de datos, ejecuta la lógica de la aplicación y ensambla el HTML. Durante ese tiempo de procesamiento, el navegador solo espera. 103 Early Hints llena ese vacío indicando al navegador qué descargar mientras espera la respuesta real.

Early Hints reemplaza al obsoleto HTTP/2 Server Push, que Chrome eliminó en la versión 106. Server Push agrupaba recursos con la respuesta final y frecuentemente enviaba bytes que el navegador ya tenía en caché. Early Hints evita ese problema porque solo son sugerencias; el navegador decide si usarlas.

Soporte en navegadores

103 Early Hints está soportado por el 93% de los navegadores a nivel mundial:

• Chrome 103+ y Edge 103+: soporte completo para preconnect y preload (desde junio de 2022)
• Firefox 123+: soporte completo para preconnect y preload (desde febrero de 2024)
• Safari 17+: solo preconnect. Safari no soporta preload en respuestas 103

La limitación de Safari importa. Si tu estrategia de Early Hints depende completamente de precargar imágenes o fuentes, los usuarios de Safari no se beneficiarán. Incluye sugerencias de preconnect junto a las de preload para que Safari al menos prepare la conexión a los orígenes de tus recursos.

Early Hints solo funciona sobre HTTP/2 o HTTP/3. No funciona sobre HTTP/1.1, desde iframes ni para peticiones que no son de navegación. El navegador procesa sugerencias solo para preload y preconnect; dns-prefetch y prefetch no están soportados en respuestas 103.

¿Qué aspecto tienen los 103 Early Hints?

Cuando un navegador pide una página, el servidor devuelve inmediatamente una respuesta 103 antes de haber terminado de generar el HTML. Esta respuesta indica al navegador que empiece a descargar la imagen LCP y la hoja de estilos:

HTTP/2 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style

Mientras tanto, el servidor genera la página. Una vez lista, envía la respuesta final:

HTTP/2 200 OK
Content-Length: 1234
[el resto de la respuesta]

Para cuando el navegador recibe la respuesta 200, ya ha empezado a descargar la imagen y la hoja de estilos. Esa ventaja inicial es lo que hace que el Largest Contentful Paint sea más rápido.

Cómo enviar 103 Early Hints

Tienes tres opciones principales, desde la más fácil hasta la de mayor control.

Cloudflare (más fácil)

Si ya usas Cloudflare para rendimiento, activar Early Hints es un solo ajuste. Navega a Speed > Settings > Content Optimization y activa Early Hints. Está disponible en todos los planes, incluido el nivel gratuito.

Cloudflare almacena en caché las cabeceras Link de las respuestas 200 de tu origen. En peticiones posteriores, envía esas cabeceras cacheadas como una respuesta 103 antes de reenviar la petición a tu origen. Tú proporcionas las sugerencias enviando cabeceras Link desde tu aplicación:

header("Link: </image.webp>; rel=preload; as=image", false);
header("Link: </style.css>; rel=preload; as=style", false);

NGINX (nativo desde 1.29.0)

NGINX añadió soporte nativo para 103 Early Hints en la versión 1.29.0 (junio de 2025). La directiva early_hints reenvía las respuestas 103 desde tu backend al cliente:

map $http_sec_fetch_mode $early_hints {
    navigate $http2$http3;
}

server {
    location / {
        early_hints $early_hints;
        proxy_pass http://backend.example.com;
    }
}

El mapa sec-fetch-mode asegura que las sugerencias solo se envíen para peticiones de navegación sobre HTTP/2 o HTTP/3. Tu aplicación backend debe generar la respuesta 103; NGINX la deja pasar.

Apache (2.4.58+)

Apache puede generar las respuestas 103 por sí mismo usando mod_http2. Actívalo con la directiva H2EarlyHints y define los recursos a sugerir:

H2EarlyHints on
H2EarlyHint Link "</style.css>;rel=preload;as=style"
H2EarlyHint Link "</image.webp>;rel=preload;as=image"

A diferencia de NGINX, Apache genera la respuesta 103 a nivel de servidor sin necesitar que tu aplicación la produzca.

Cuándo ayudan los Early Hints (y cuándo no)

Los 103 Early Hints son más efectivos cuando tu servidor tarda un tiempo notable en responder: páginas dinámicas que consultan bases de datos, llaman a APIs o renderizan plantillas. Cuanto más lento sea el Time to First Byte, más tiempo tiene el navegador para aprovechar las sugerencias.

Early Hints aportan menos beneficios cuando:

• Tu servidor responde en menos de 100ms. Si el TTFB ya es rápido, no hay un vacío que el navegador deba llenar. Céntrate mejor en la priorización de recursos en tu HTML.
• Las páginas se sirven desde la caché. Una respuesta HTML completamente cacheada carga tan rápido que la respuesta 103 apenas tiene ventaja.
• Sugieres demasiados recursos. Sugerir 10 o más recursos satura la conexión y puede ralentizar la carga. Shopify descubrió que en dispositivos móviles, sugerir de forma agresiva causaba una degradación del rendimiento en el TTFB, el FCP y el LCP. Limítate a entre 2 y 4 recursos críticos.

A pesar del 93% de soporte en navegadores, la adopción sigue siendo baja. Según el Web Almanac de 2025, solo alrededor del 5% de los sitios principales usan 103 Early Hints. La barrera principal es saber qué recursos sugerir para cada página, algo que la mayoría de los CMS no gestionan automáticamente.

Cómo verificar que Early Hints funcionan

Abre las Chrome DevTools, ve al panel Network y recarga la página. Haz clic en la petición del documento y revisa las cabeceras de respuesta. Si los Early Hints funcionan, verás un estado 103 antes del 200 en el desglose de tiempos.

Desde la línea de comandos, puedes verificarlo con curl:

curl -v --http2 https://example.com 2>&1 | grep "< HTTP"

Deberías ver tanto una respuesta 103 como una 200.

Resultados de las pruebas

Probé dos escenarios para medir el impacto en el First Contentful Paint y el Largest Contentful Paint.

1. Early Hints solo en la imagen LCP

La imagen LCP apareció en pantalla un 35% antes con 103 Early Hints en comparación con un preload normal en el HTML.

HTTP/2 103 Early Hints
Link: </image.webp>; rel=preload; as=image

2. Early Hints con una hoja de estilos grande y la imagen LCP

Añadir un archivo CSS de 85kb a las sugerencias hizo la diferencia aún más notable. El FCP mejoró de 1,8 segundos a 1,4 segundos, y el LCP mejoró de 3,2 segundos a 2,0 segundos.

HTTP/2 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style

Estos números coinciden con lo que Cloudflare midió en más de 100.000 clientes: una mejora del LCP del 6% en el percentil 50 y del 16% en el percentil 75 en escritorio. Shopify vio una mejora del LCP de 500ms en el p50 durante el Black Friday y el Cyber Monday. Las mayores ganancias se dan en páginas con tiempos de respuesta del servidor lentos, que es exactamente cuando los Early Hints tienen más tiempo para funcionar.

Early Hints y el TTFB

Hay un matiz de medición a tener en cuenta. Desde Chrome 133, el tiempo responseStart del navegador (usado por la mayoría de las herramientas para reportar el TTFB) incluye la respuesta 103. Esto significa que tu TTFB reportado bajará tras activar Early Hints, aunque el tiempo de procesamiento real de tu servidor no haya cambiado.

Si necesitas medir el tiempo de procesamiento del servidor por separado, Chrome 133 introdujo un nuevo timestamp firstResponseHeadersStart que reporta cuándo llegan las cabeceras de respuesta 200 finales. Las herramientas de Real User Monitoring que registran ambos valores te dan la imagen completa: cuánto tiempo ahorraron los Early Hints al navegador, y cuánto tardó realmente tu servidor en responder.