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 críticos.

Kenji Baheux

Barry Pollard

¿Qué es Early Hints?

Los sitios web se han vuelto más sofisticados con el tiempo. Por lo tanto, es normal que un servidor deba realizar un trabajo importante (por ejemplo, acceder a bases de datos o usar CDN que accede al servidor de origen) para producir el código HTML de la página solicitada. Lamentablemente, este "tiempo de pensamiento del servidor" genera latencia adicional antes de que el navegador pueda comenzar a procesar la página. De hecho, la conexión queda inactiva durante el tiempo que le lleve al servidor preparar la respuesta.

Early Hints es 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 críticos (por ejemplo, hojas de estilo para la página, JavaScript crítico) u orígenes que probablemente la página usará, mientras el servidor está ocupado generando el recurso principal. El navegador puede usar esas sugerencias para preparar conexiones y solicitar subrecursos mientras espera al recurso principal. En otras palabras, Early Hints ayuda al navegador a aprovechar ese “tiempo de pensamiento del servidor” haciendo algo de trabajo con anticipación, lo que acelera la carga de la página.

En algunos casos, la mejora en el rendimiento del procesamiento de imagen con contenido más grande puede ser de varios cientos de milisegundos, como lo observaron Shopify y Cloudflare, y hasta un segundo más rápido, como se observa en esta comparación anterior y posterior:

Cómo usar Early Hints

El primer paso para aprovechar las sugerencias iniciales consiste en identificar las principales páginas de destino, es decir, aquellas en las que los usuarios suelen comenzar cuando visitan tu sitio web. Podría ser la página principal o páginas populares de fichas de productos si muchos usuarios provienen de otros sitios web. Estos puntos de entrada son más importantes que otras páginas porque la utilidad de Early Hints 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 causar una buena 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 obtener sugerencias de preconnect o preload. Por lo general, estos son los orígenes y subrecursos que más contribuyen a las métricas clave del usuario, como el Procesamiento de imagen con contenido más grande o el Primer procesamiento de imagen con contenido. Más concretamente, busca subrecursos que bloqueen la representación, como JavaScript síncrono, hojas de estilo o incluso fuentes web. Del mismo modo, busca orígenes que alojen subrecursos que contribuyan mucho a las métricas clave del usuario.

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

Cuando los usas en HTML, por lo general, se recomienda que preconnect o preload los recursos que el Prueba de precarga no descubra en el HTML; por ejemplo, fuentes o imágenes de fondo que, de lo contrario, se descubrirían tarde. En el caso de Sugerencias iniciales, no tendrás el código HTML, por lo que tal vez te convenga preconnect a dominios críticos o preload recursos críticos que quizás podrían descubrirse al principio del HTML, por ejemplo, la precarga de main.css o app.js. Además, no todos los navegadores admiten preload para las sugerencias iniciales. Consulta Compatibilidad con navegadores.

El segundo paso consiste en minimizar el riesgo de usar sugerencias tempranas en orígenes o recursos que podrían quedar obsoletos o que el recurso principal ya no use. Por ejemplo, es posible que los recursos que se actualizan y controlan con frecuencia (como example.com/css/main.fa231e9c.css) no sean la mejor opción. Ten en cuenta que este problema no es específico de Early Hints, sino que se aplica a cualquier preload o preconnect dondequiera que estén presentes. Este es el tipo de detalle que se aborda 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).

A modo de 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 iniciales:

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

Un momento después, se publica la página web, incluido el CSS vinculado. Lamentablemente, este recurso de CSS se actualiza con frecuencia, y el recurso principal ya está a las cinco versiones más adelante (abcd105) del recurso de CSS previsto (abcd100).

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

En general, apunta a recursos y orígenes que sean bastante estables y en gran medida independientes del resultado del recurso principal. Si es necesario, puedes considerar dividir tus recursos clave en dos: una parte estable diseñada para usarse con Early Hints y otra parte más dinámica que se debe 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 enviadas por navegadores conocidos por admitir Early Hints y responde de inmediato con 103 Sugerencias iniciales. En la respuesta 103, incluye las sugerencias relevantes de precarga y de preconexión. Una vez que el recurso principal esté listo, continúa con la respuesta habitual (por ejemplo, 200 OK si la operación se realizó con éxito). Para la retrocompatibilidad, se recomienda que también incluyas encabezados HTTP Link en la respuesta final, incluso realizando un aumento con recursos críticos 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í es como 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 103 Early Hints es compatible con todos los navegadores principales, las directivas que se pueden enviar en un Early Hint varían según el navegador:

Compatibilidad con preconexión:

Asistencia para precarga:

Las Herramientas para desarrolladores de Chrome también tienen compatibilidad con 103 Early Hints y los encabezados Link se pueden ver en los recursos del documento:

Ten en cuenta que, para usar los recursos de Early Hints, no debes marcar Disable cache en Herramientas para desarrolladores, ya que Sugerencia temprana usa la caché del navegador. En el caso de los recursos precargados, initiator se mostrará como early-hints y el size como (Disk cache):

También se requiere un certificado de confianza para las pruebas de HTTPS.

Firefox (a partir de la versión 126) no tiene compatibilidad explícita con 103 Early Hints en Herramientas para desarrolladores, pero los recursos cargados con Early Hints no muestran información del encabezado HTTP, que es un indicador de que se cargaron a través de Consejos iniciales.

Asistencia para servidores

A continuación, se presenta un breve resumen del nivel de compatibilidad con Early Hints entre el software de código abierto popular de servidor HTTP:

• Apache: Es compatible con mod_http2.
• H2O: Compatible.
• NGINX: Módulo experimental.
• Node: Compatible desde la versión 18.11.0 para http y http2

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

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

• Consejos iniciales de Cloudflare
• Obtén sugerencias anticipadas en Fastly.
• Sugerencias iniciales de Akamai.

Cómo evitar problemas para clientes que no admiten Early Hints

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

Emitir solo 103 Early Hints en respuesta a los clientes que envían un encabezado de solicitud HTTP sec-fetch-mode: navigate debe garantizar que esas sugerencias se envíen solo a los clientes más nuevos que deben esperar la respuesta posterior. Además, dado que las sugerencias anticipadas solo se admiten en solicitudes de navegación (consulta las limitaciones actuales), esto tiene el beneficio adicional de evitar el envío innecesario de estos en otras solicitudes.

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

Patrón avanzado

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

Para los visitantes que acceden a la nth página como parte de un recorrido típico del usuario, puedes adaptar la respuesta de Sugerencias tempranas al contenido que se encuentra más abajo y más detallado en la página; es decir, usar Sugerencias anticipadas en recursos de menor prioridad. Esto puede sonar contraintuitivo, ya que recomendamos que te enfoques en orígenes o subrecursos de renderización con alta prioridad. Sin embargo, para cuando el visitante haya navegado por un tiempo, es muy probable que el navegador ya cuente con todos los recursos críticos. A partir de ese momento, podría ser conveniente que dirijas 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 archivos JS/CSS adicionales que solo se necesitan para las interacciones menos comunes de los usuarios.

Limitaciones actuales

Estas son las limitaciones de las Early Hints implementadas en Chrome:

• Solo está disponible para las solicitudes de navegación (es decir, el recurso principal del documento de nivel superior).
• Solo es compatible con preconnect y preload (es decir, prefetch no es compatible).
• Las sugerencias tempranas seguidas de un redireccionamiento de origen cruzado en la respuesta final darán como resultado que Chrome descarte los recursos y conexiones que obtuvo usando Early Hints.
• Los recursos que se precargan con Early Hints se almacenan en la caché HTTP y la página los recupera desde allí más tarde. Por lo tanto, solo los recursos que se pueden almacenar en caché se pueden precargar con Early Hints o el recurso se recuperará dos veces (una vez en las Consejos anticipados y otra vez por el documento). En Chrome, la caché HTTP está inhabilitada para los certificados HTTPS que no son de confianza (incluso si carga la página).

Otros navegadores tienen limitaciones similares y, como se indicó anteriormente, algunas restringen aún más las 103 sugerencias iniciales solo para preconnect.

¿Qué sigue?

Según el interés de la comunidad, es posible que aumentemos nuestra implementación de Early Hints con las siguientes funciones:

• Sugerencias iniciales para los recursos que no se pueden almacenar en caché mediante la memoria caché en lugar de la caché HTTP.
• Se enviaron sugerencias anticipadas en las solicitudes de subrecursos.
• Se enviaron sugerencias iniciales en las solicitudes de recursos principales de iframe.
• Compatibilidad con carga previa en Early Hints

Agradecemos tus comentarios sobre qué aspectos debes priorizar y cómo seguir mejorando las sugerencias iniciales.

Relación con H2/Push

Si conoces la función HTTP2/Push obsoleta, quizás te preguntes en qué se diferencian las Sugerencias iniciales. Si bien Early Hints requiere un recorrido de ida y vuelta para que el navegador comience a recuperar subrecursos críticos, con HTTP2/Push, el servidor podría comenzar a enviar subrecursos junto con la respuesta. Si bien esto suena increíble, esto dio como resultado un inconveniente estructural clave: con HTTP2/Push era extremadamente difícil evitar enviar subrecursos que el navegador ya tenía. Este efecto de “empuje excesivo” tuvo como resultado un uso menos eficiente del ancho de banda de la red, lo que obstaculizó de forma significativa los beneficios de rendimiento. En general, los datos de Chrome mostraron que HTTP2/Push era de hecho un resultado neto negativo para el rendimiento en toda la Web.

Por el contrario, Early Hints funciona mejor en la práctica porque combina la capacidad de enviar una respuesta preliminar con sugerencias que dejan al navegador a cargo de obtener lo que realmente necesita o de conectarse a él. Si bien Early Hints no abarca todos los casos de uso que HTTP2/Push podría abordar en teoría, creemos que Primeros consejos es una solución más práctica para acelerar las navegaciones.

Imagen en miniatura de Pierre Bamin.