103 Early hints

¿Qué son las 103 - early hints?

¿Cómo usa un navegador las 103 - early hints?

Las early hints actualmente solo son compatibles con Google Chrome a partir de la versión 94. Debido a que early hints es todavía una función experimental, necesitarás iniciar Chrome con un llamado Chrome Browser Flag desde la línea de comandos. En mi caso, tengo que iniciar Chrome desde el terminal con el comando:

google-chrome --enable-features=EarlyHintsPreloadForNavigation

Las early hints no funcionan cuando:

• Las early hints se envían desde una fuente distinta al recurso principal (el HTML)
• Las Early Hints se envían desde un iframe
• Las early hints se envían usando HTTP/1.1 o anterior
• Las early hints contienen un dns-prefetch o prefetch hint

Las early hints solo funcionarán para resource hints de preload y preconnect cuando se envíen desde el documento principal a través de HTTP2 o HTTP/3. No está permitido enviar cabeceras de early hints desde, por ejemplo, una imagen o un iframe.

¿Cómo se ven las 103 early hints?

Después de implementar las 103 early hints, tan pronto como un navegador solicita una página web, se devuelve inmediatamente una cabecera 103 early hints. Por ejemplo, esta cabecera indica que image.webp y style.css deben precargarse.

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

Mientras tanto, el servidor puede comenzar a generar la respuesta HTTP "real". Para páginas dinámicas, esto puede tomar un poco de tiempo. Una vez que el servidor está listo para enviarla, se envía la respuesta final.

HTTP/1.1 200 OK
Date: Thurs, 16 Sept 2021 11:30:00 GMT
Content-Length: 1234
[the rest of the response]

Enviar 103 early hints

En términos de PageSpeed, el enfoque más rápido para enviar 103 early hints es a través de tu propio servidor. Usa esta guía para configurar 103 early hints tú mismo en el servidor web Apache o a través del módulo experimental de NGINX. Habilitar 103 early hints no es fácil de hacer y las early hints aún no se integran bien con CMSs populares como WordPress.

Por eso, la forma más fácil ahora mismo es activar las early hints a través de Cloudflare. Regístrate para early hints. Una vez que seas admitido, navega a 'Speed' -> 'Optimization' y activa Early Hints

Cloudflare aceptará las cabeceras de resource hint y las traducirá en una cabecera 103 early resource. Puedes enviar simplemente un early hint enviando una cabecera preload o preconnect. Cloudflare entonces lo traduce en una cabecera 103 early hint.
Con PHP y Cloudflare, las 103 early hints se pueden enviar con este código:

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

Resultados de Lighthouse para 103 early hints

La pregunta más importante es, por supuesto: "¿Qué significan las 103 early resource hints para mis Core Web Vitals?" He probado 2 escenarios comunes.

1. Early resource hint en el elemento LCP

Inmediatamente después de la primera prueba, noté lo efectivas que pueden ser las early hints. El elemento LCP (una imagen) apareció en la pantalla un 35% antes que sin la cabecera 103 early hints presente.

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

2. Early resource hint con una hoja de estilos grande y el elemento LCP

Para la segunda prueba añadí un archivo CSS de 85kb a la página. La diferencia en los resultados de Core Web Vitals es aún más notable. El First Contentful Paint (FCP) mejoró de 1.8 segundos a 1.4 segundos y el Largest Contentful Paint (LCP) mejoró de 3.2 segundos a solo 2 segundos.

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