103 Early Hints: Precarga de 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 indicarle al navegador, al principio del proceso de carga, que ciertos recursos como una imagen o una hoja de estilo son críticos para el renderizado de la página.

La mayoría de las páginas dinámicas tardan tiempo 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 simplemente espera. Los 103 Early Hints llenan ese vacío indicándole al navegador qué obtener mientras espera la respuesta real.

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

Soporte del navegador

103 Early Hints es compatible con 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 admite preload en respuestas 103

La limitación de Safari es importante. Si su estrategia de Early Hints se basa enteramente en la precarga de imágenes o fuentes, los usuarios de Safari no se beneficiarán. Incluya sugerencias de preconnect junto con las de preload para que al menos Safari prepare la conexión con los orígenes de sus recursos.

Early Hints solo funcionan sobre HTTP/2 o HTTP/3. No funcionan sobre HTTP/1.1, desde iframes o para solicitudes que no sean de navegación. El navegador solo procesa sugerencias para preload y preconnect; dns-prefetch y prefetch no son compatibles con las respuestas 103.

¿Cómo se ven los 103 Early Hints?

Cuando un navegador solicita una página, el servidor devuelve inmediatamente una respuesta 103 antes de haber terminado de generar el HTML. Esta respuesta le indica al navegador que comience a obtener la imagen LCP y la hoja de estilo:

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 comenzado a descargar la imagen y la hoja de estilo. Esa ventaja inicial es lo que hace que el Largest Contentful Paint sea más rápido.

Cómo enviar 103 Early Hints

Tiene tres opciones principales, desde la más fácil hasta la que ofrece más control.

Cloudflare (la más fácil)

Si ya utiliza Cloudflare para el rendimiento, habilitar Early Hints es cuestión de un solo interruptor. Navegue a Speed > Settings > Content Optimization y active Early Hints. Está disponible en todos los planes, incluido el gratuito.

Cloudflare almacena en caché las cabeceras Link de las respuestas 200 de su origen. En solicitudes posteriores, envía esas cabeceras almacenadas como una respuesta 103 antes de reenviar la solicitud a su origen. Usted proporciona las sugerencias enviando cabeceras Link desde su 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 de su 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 garantiza que las sugerencias solo se envíen para solicitudes de navegación sobre HTTP/2 o HTTP/3. Su aplicación de backend debe generar la respuesta 103; NGINX la transmite.

Apache (2.4.58+)

Apache puede generar respuestas 103 por sí mismo utilizando mod_http2. Habilítelo con la directiva H2EarlyHints y defina 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 necesidad de que su aplicación la produzca.

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

Los 103 Early Hints son más efectivos cuando su servidor tarda un tiempo perceptible 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 tendrá el navegador para actuar sobre las sugerencias.

Los Early Hints proporcionan menos beneficios cuando:

• Su servidor responde en menos de 100ms. Si el TTFB ya es rápido, no hay un vacío que el navegador deba llenar. Céntrese en la priorización de recursos en su HTML en su lugar.
• Las páginas se sirven desde la caché. Una respuesta HTML totalmente almacenada en caché se carga tan rápido que la respuesta 103 apenas tiene ventaja inicial.
• Sugiere demasiados recursos. Sugerir más de 10 recursos satura la conexión y puede ralentizar las cosas. Shopify descubrió que en dispositivos móviles, las sugerencias agresivas provocaban una degradación del rendimiento en TTFB, FCP y LCP. Limítese a 2 o 4 recursos críticos.

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

Cómo verificar que los Early Hints están funcionando

Abra Chrome DevTools, vaya al panel Network y recargue la página. Haga clic en la solicitud del documento y verifique las cabeceras de respuesta. Si Early Hints está funcionando, verá un estado 103 antes del 200 en el desglose del tiempo.

Desde la línea de comandos, puede verificar con curl:

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

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

Resultados de la prueba

He probado dos escenarios para medir el impacto en First Contentful Paint y 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 regular en el HTML.

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

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

Añadir un archivo CSS de 85kb a las sugerencias hizo que la diferencia fuera 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 observó una mejora del LCP de 500ms en el p50 durante el Black Friday y el Cyber Monday. Las mayores mejoras se producen en páginas con tiempos de respuesta del servidor lentos, que es exactamente cuando los Early Hints tienen más tiempo para trabajar.

Early Hints y TTFB

Hay un matiz de medición a tener en cuenta. Desde Chrome 133, el tiempo de responseStart del navegador (utilizado por la mayoría de las herramientas para informar del TTFB) incluye la respuesta 103. Esto significa que su TTFB informado bajará después de habilitar Early Hints, aunque el tiempo de procesamiento real de su servidor no haya cambiado.

Si necesita medir el tiempo de procesamiento del servidor por separado, Chrome 133 introdujo una nueva marca de tiempo firstResponseHeadersStart que informa cuándo llegan las cabeceras de la respuesta 200 final. Las herramientas de Real User Monitoring que rastrean ambos valores le ofrecen la imagen completa: cuánto tiempo ahorraron los Early Hints al navegador y cuánto tiempo tardó realmente su servidor en responder.