Cargas más rápidas de páginas utilizando el tiempo de reflexión del servidor con Sugerencias iniciales.

Descubre cómo tu servidor puede enviar sugerencias al navegador sobre subrecursos esenciales.

Kenji Baheux

Barry Pollard

Fecha de publicación: 23 de junio de 2022. Última actualización: 10 de julio de 2026

¿Qué son las sugerencias tempranas?

Los sitios web se volvieron más sofisticados con el tiempo. Por lo tanto, no es inusual que un servidor deba realizar un trabajo no trivial (por ejemplo, acceso a bases de datos o CDN que acceden al servidor de origen) para producir el HTML de la página solicitada. Lamentablemente, este "tiempo de procesamiento del servidor" genera una latencia adicional antes de que el navegador pueda comenzar a renderizar la página. De hecho, la conexión permanece inactiva durante el tiempo que tarda el servidor en preparar la respuesta.

Las sugerencias tempranas son un código de estado HTTP (103 Early Hints) que se usa para enviar una respuesta HTTP preliminar antes de una respuesta final. Esto permite que un servidor envíe sugerencias al navegador sobre subrecursos esenciales (por ejemplo, hojas de estilo para la página, JavaScript esencial) o sobre orígenes que probablemente usará la página, mientras el servidor está ocupado generando el recurso principal. El navegador puede usar esas sugerencias para preparar las conexiones y solicitar subrecursos mientras espera el recurso principal. En otras palabras, las sugerencias tempranas ayudan al navegador a aprovechar ese "tiempo de procesamiento del servidor" realizando algunas tareas por adelantado, lo que acelera la carga de la página.

En algunos casos, la mejora del rendimiento del Largest Contentful Paint puede pasar de varios cientos de milisegundos, como lo observaron Shopify y Cloudflare, hasta un segundo más rápido, como se muestra en esta comparación anterior y posterior:

Cómo usar las sugerencias tempranas

El primer paso para aprovechar las sugerencias tempranas consiste en identificar las principales páginas de destino, es decir, las páginas en las que los usuarios suelen comenzar cuando visitan tu sitio web. Podría ser la página principal o las páginas de lista de productos populares si tienes muchos usuarios que provienen de otros sitios web. La razón por la que estos puntos de entrada son más importantes que otras páginas es que la utilidad de las sugerencias tempranas disminuye a medida que el usuario navega por tu sitio web (es decir, es más probable que el navegador tenga todos los subrecursos que necesita en la segunda o tercera navegación posterior). También es una buena idea dar una excelente primera impresión.

Ahora que tienes esta lista priorizada de páginas de destino, el siguiente paso es identificar qué orígenes o subrecursos serían buenos candidatos para las sugerencias preconnect o preload. Por lo general, esos serían orígenes y subrecursos que contribuyen más a las métricas clave del usuario, como Largest Contentful Paint o First Contentful Paint. De manera más concreta, busca subrecursos que bloqueen la renderización, como JavaScript síncrono, hojas de estilo o incluso fuentes web. Del mismo modo, busca orígenes que alojan subrecursos que contribuyen mucho a las métricas clave del usuario.

También ten en cuenta que, si tus recursos principales ya usan preconnect o preload, puedes considerar estos orígenes o recursos entre los candidatos para las sugerencias tempranas. Consulta cómo optimizar el LCP para obtener más detalles. Sin embargo, copiar de forma ingenua las directivas preconnect y preload de HTML a las sugerencias tempranas podría no ser óptimo.

Cuando los usas en HTML, por lo general, quieres preconnect o preload recursos que el escáner de carga previa no descubrirá en el HTML, por ejemplo, fuentes o imágenes de fondo que, de lo contrario, se descubrirían tarde. En el caso de las sugerencias tempranas, no tendrás el HTML, por lo que es posible que quieras preconnect a dominios esenciales o preload recursos esenciales que, de lo contrario, se descubrirían temprano en el HTML, por ejemplo, la carga previa de main.css o app.js. Además, no todos los navegadores admiten preload para las sugerencias tempranas. Consulta la sección Compatibilidad con navegadores.

El segundo paso consiste en minimizar el riesgo de usar sugerencias tempranas en recursos o orígenes que podrían estar obsoletos o que ya no usa el recurso principal. Por ejemplo, los recursos que se actualizan y versionan con frecuencia (por ejemplo, example.com/css/main.fa231e9c.css) podrían no ser la mejor opción. Ten en cuenta que esta preocupación no es específica de las sugerencias tempranas, sino que se aplica a cualquier preload o preconnect donde puedan estar presentes. Este es el tipo de detalle que se maneja mejor con la automatización o las plantillas (por ejemplo, es más probable que un proceso manual genere URLs de hash o de versión no coincidentes entre preload y la etiqueta HTML real que usa el recurso).

Por ejemplo, considera el siguiente flujo:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]

El servidor predice que se necesitará main.abcd100.css y sugiere precargarlo con sugerencias tempranas:

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

Unos momentos después, se entrega la página web, incluido el CSS vinculado. Lamentablemente, este recurso CSS se actualiza con frecuencia, y el recurso principal ya tiene cinco versiones (abcd105) por delante del recurso CSS previsto (abcd100).

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

En general, busca recursos y orígenes que sean bastante estables y, en gran medida, independientes del resultado del recurso principal. Si es necesario, puedes dividir tus recursos clave en dos: una parte estable diseñada para usarse con sugerencias tempranas y una parte más dinámica que se recuperará después de que el navegador reciba el recurso principal:

<html>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

Por último, en el servidor, busca las solicitudes de recursos principales que envían los navegadores que admiten sugerencias tempranas y responde de inmediato con 103 sugerencias tempranas. En la respuesta 103, incluye las sugerencias de preconexión y precarga pertinentes. Una vez que el recurso principal esté listo, continúa con la respuesta habitual (por ejemplo, 200 OK si se realiza correctamente). Para la retrocompatibilidad, es una práctica recomendada incluir también encabezados HTTP Link en la respuesta final, tal vez incluso aumentarlos con recursos esenciales que se hicieron evidentes como parte de la generación del recurso principal (por ejemplo, la parte dinámica de un recurso clave si seguiste la sugerencia de "dividir en dos"). Así se vería:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script

Unos momentos después:

200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">
   <script src="/common.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">

Navegadores compatibles

Aunque las 103 sugerencias tempranas son compatibles con todos los navegadores principales, las directivas que se pueden enviar en una sugerencia temprana difieren según el navegador:

Compatibilidad con preconexión:

Compatibilidad con precarga:

Las Herramientas para desarrolladores de Chrome también admiten 103 sugerencias tempranas, y los encabezados Link se pueden ver en los recursos del documento:

Ten en cuenta que, para usar los recursos de las sugerencias tempranas, no se debe marcar la opción Disable cache en las Herramientas para desarrolladores, ya que las sugerencias tempranas usan la caché del navegador. En el caso de los recursos precargados, el iniciador se mostrará como Early-hints y el tamaño como (Disk cache):

Esto también requiere un certificado de confianza para las pruebas HTTPS.

Firefox no tiene compatibilidad explícita con 103 sugerencias tempranas como iniciador en las Herramientas para desarrolladores, pero los recursos cargados con sugerencias tempranas se muestran como cached en la columna Transferido y, cuando se hace clic en ellos, tienen un encabezado de la solicitud HTTP X-Moz: early hint.

Asistencia para servidores

Aquí tienes un resumen rápido del nivel de compatibilidad con las sugerencias tempranas entre el software de servidor HTTP de software de código abierto popular:

• Apache: compatible con mod_http2.
• H2O: compatible.
• NGINX: compatible.
• Nodo: compatible con http y http2

Habilita las sugerencias tempranas de la manera más fácil

Si usas una de las siguientes CDN o plataformas, es posible que no necesites implementar las sugerencias tempranas de forma manual. Consulta la documentación en línea de tu proveedor de soluciones para saber si admite sugerencias tempranas o consulta la lista no exhaustiva aquí:

• Sugerencias tempranas en Cloudflare
• Sugerencias tempranas en Fastly.
• Sugerencias tempranas en Akamai.

Cómo evitar problemas para los clientes que no admiten sugerencias tempranas

Las respuestas HTTP informativas en el rango 100 forman parte del estándar HTTP, pero algunos clientes o bots más antiguos pueden tener problemas con ellas porque, antes del lanzamiento de 103 sugerencias tempranas, rara vez se usaban para la navegación web general.

Solo emitir 103 sugerencias tempranas en respuesta a los clientes que envían un encabezado de la solicitud HTTP sec-fetch-mode: navigate solo debe enviar esas sugerencias para los clientes más nuevos que comprendan que deben esperar la respuesta posterior. Además, dado que las sugerencias tempranas solo se admiten en las solicitudes de navegación (consulta las limitaciones actuales), esto tiene el beneficio adicional de evitar enviarlas innecesariamente en otras solicitudes.

Además, se recomienda que las sugerencias tempranas solo se envíen a través de conexiones HTTP/2 o HTTP/3, y la mayoría de los navegadores solo las aceptarán a través de esos protocolos.

Patrón avanzado

Si aplicaste por completo las sugerencias tempranas a tus páginas de destino clave y buscas más oportunidades, es posible que te interese el siguiente patrón avanzado.

Para los visitantes que se encuentran en su n-ésima solicitud de página como parte de un recorrido de usuario típico, es posible que desees adaptar la respuesta de las sugerencias tempranas al contenido que se encuentra más abajo y más profundo en la página, es decir, usar sugerencias tempranas en recursos de menor prioridad. Esto puede parecer contradictorio, ya que recomendamos enfocarse en orígenes o subrecursos de alta prioridad que bloquean la renderización. Sin embargo, cuando un visitante navega durante un tiempo, es muy probable que su navegador ya tenga todos los recursos esenciales. A partir de ahí, podría tener sentido cambiar tu atención hacia los recursos de menor prioridad. Por ejemplo, esto podría significar usar sugerencias tempranas para cargar imágenes de productos o JS/CSS adicionales que solo se necesitan para interacciones de usuario menos comunes.

Limitaciones actuales

Estas son las limitaciones de las sugerencias tempranas implementadas en Chrome:

• Solo disponible para solicitudes de navegación (es decir, el recurso principal del documento de nivel superior).
• Solo admite preconnect y preload (es decir, no se admite prefetch).
• Las sugerencias tempranas seguidas de un redireccionamiento de origen cruzado en la respuesta final harán que los navegadores descarten los recursos y las conexiones que obtuvieron con las sugerencias tempranas.
• Los recursos que se precargan con sugerencias tempranas se almacenan en la caché HTTP y la página los recupera más tarde. Por lo tanto, solo se pueden precargar los recursos almacenables en caché con sugerencias tempranas, o el recurso se recuperará dos veces (una vez por las sugerencias tempranas y otra por el documento). En Chrome, la caché HTTP está inhabilitada para los certificados HTTPS no confiables (incluso si continúas cargando la página).
• Es posible que no se admita la precarga de imágenes responsivas (con imagesrcset, imagesizes o media) con encabezados HTTP <link>, ya que el viewport no se define hasta que se crea el documento. En el mejor de los casos, esperarán hasta que se reciba el documento, lo que negará los principales beneficios de las 103 sugerencias tempranas.

Otros navegadores tienen limitaciones similares y, como se mencionó anteriormente, algunos restringen aún más las 103 sugerencias tempranas solo a preconnect.

Relación con H2/Push

Si conoces la función HTTP2/Push obsoleta, es posible que te preguntes en qué se diferencian las sugerencias tempranas. Si bien las sugerencias tempranas requieren un viaje de ida y vuelta para que el navegador comience a recuperar subrecursos esenciales, con HTTP2/Push, el servidor podría comenzar a enviar subrecursos junto con la respuesta. Si bien esto suena increíble, generó una desventaja estructural clave: con HTTP2/Push, era extremadamente difícil evitar enviar subrecursos que el navegador ya tenía. Este efecto de "envío excesivo" generó un uso menos eficiente del ancho de banda de la red, lo que dificultó significativamente los beneficios de rendimiento. En general, los datos de Chrome mostraron que HTTP2/Push era, de hecho, un valor neto negativo para el rendimiento en toda la Web.

Por el contrario, las sugerencias tempranas funcionan mejor en la práctica porque combinan la capacidad de enviar una respuesta preliminar con sugerencias que dejan al navegador a cargo de recuperar o conectarse a lo que realmente necesita. Si bien las sugerencias tempranas no abarcan todos los casos de uso que HTTP2/Push podría abordar en teoría, creemos que las sugerencias tempranas son una solución más práctica para acelerar las navegaciones.

Imagen en miniatura de Pierre Bamin.