Cloudflare Early Hints: Cómo cargar tus imágenes antes de que el navegador las pida

En el mundo del rendimiento web, cada milisegundo cuenta. Tradicionalmente, un navegador tiene que descargar el HTML, procesarlo y solo entonces descubrir que necesita una imagen pesada o un archivo CSS crítico. Este proceso secuencial es ineficiente por naturaleza. Cloudflare Early Hints rompe este paradigma utilizando el código de estado 103, permitiendo que el navegador empiece a trabajar mientras tu servidor aún está terminando de preparar la respuesta.

No estamos ante un simple truco de caché; es una mejora en la arquitectura del protocolo de comunicación que optimiza el «pipeline» de carga de forma radical.

#El tiempo muerto del servidor

Desde que un usuario solicita una página hasta que tu servidor envía el primer byte (TTFB), existe un intervalo de tiempo donde el navegador del visitante no hace nada más que esperar. En sitios dinámicos como WordPress, este tiempo se dedica a consultas SQL y ejecución de PHP. Es un tiempo muerto desperdiciado.

Early Hints (Pistas Tempranas) aprovecha este hueco. Cloudflare envía una respuesta preliminar (el código 103) que contiene una lista de recursos que el navegador «seguramente» necesitará, como la imagen de cabecera o el CSS principal. El navegador, al recibir esta pista, inicia la descarga inmediatamente, ganando una ventaja competitiva de varios cientos de milisegundos.

#Configuración de las pistas tempranas

Cloudflare ha simplificado esto hasta el punto de hacerlo automático. Al activar Early Hints en el panel de control, Cloudflare «aprende» qué recursos son críticos para cada página analizando las cabeceras de enlace (`Link headers`) que envía tu servidor o analizando el tráfico histórico.

Para encenderlo, ve a Speed > Settings en tu dashboard de Cloudflare y busca el interruptor de Early Hints. Una vez activo, el servicio empezará a inyectar estas pistas en las conexiones compatibles (Chrome, Edge y otros navegadores basados en Chromium lo soportan nativamente).

#Mi caso: El «Héroe» que no cargaba

Hace poco analicé una landing page donde el Largest Contentful Paint (LCP) era un desastre. El culpable era una imagen «Hero» de 200KB que el navegador solo descubría después de leer 1500 líneas de HTML y CSS. Esto era una brecha enorme entre el primer pintado y el pintado del contenido principal.

Mi Intento Fallido consistió en usar el atributo fetchpriority="high" y añadir un <link rel="preload"> en el HTML. Aunque ayudó un poco, el navegador seguía teniendo que esperar a que el servidor PHP terminara su trabajo para leer esas etiquetas. No estábamos atacando la raíz del retraso.

La solución fue activar Cloudflare Early Hints y especificar la imagen Hero como recurso prioritario. Al monitorizar la carga con WebPageTest a las 3 AM, vi cómo la descarga de la imagen empezaba antes incluso de que el primer byte del HTML llegara al navegador. El LCP bajó de 2.8s a 1.9s sin cambiar una sola línea de código en la web.

#¿Cuándo NO usar Early Hints?

Aunque parezca magia, abusar de las pistas puede ser contraproducente. Si marcas demasiados archivos como prioritarios, saturarás el ancho de banda del usuario con recursos que quizás no sean tan críticos, retrasando otros elementos vitales.

• Pros: Mejora drástica del LCP, reduce la percepción de carga y es totalmente gratuito en Cloudflare.
• Contras: Si se configura mal (demasiados recursos), puede causar contención de red. No es compatible con todos los navegadores antiguos.

#Protocolo de rescate

Si activas Early Hints y notas comportamientos extraños (como recursos que se descargan dos veces o errores 404 en la consola), sigue estos pasos:

1. Comprueba que las rutas de los archivos en tus cabeceras Link sean absolutas o relativas a la raíz correcta.
2. Asegúrate de no estar usando Early Hints para archivos que cambian de nombre con cada despliegue (como archivos JS con hash de versión) si no tienes un sistema de purga de caché sincronizado.
3. Como último recurso, desactiva la función en Cloudflare y utiliza el panel de **Network** de las DevTools para comprobar si las peticiones 103 están llegando correctamente.

Escribo esto en marzo de 2026. Early Hints es ahora mismo una de las herramientas más potentes y menos utilizadas para ganar la guerra del rendimiento. Si tienes un sitio que depende de PHP o bases de datos lentas, esta es la tirita técnica más eficaz que puedes aplicar hoy mismo.