Suscríbete para recibir notificaciones de nuevas publicaciones:

Cloudflare Pages ahora aún más rápido con Early Hints

2022-10-07

4 min de lectura
Esta publicación también está disponible en English, 繁體中文, Français, Deutsch y 简体中文.

El año pasado, demostramos lo que queríamos decir con "ultrarrápido", mostrando el rendimiento extraordinario de Pages en todas las partes del mundo. Hoy nos complace anunciar una integración que acelera aún más este compromiso: el soporte de Pages para Early Hints. Early Hints te permite cargar inmediatamente los recursos críticos de las páginas, incluso antes que las páginas HTML, cuya carga puede ser lenta. Early Hints se puede utilizar para mejorar la experiencia de carga para tus visitantes, reduciendo considerablemente las métricas clave de rendimiento, como Largest Contentful Paint (LCP).

Cloudflare Pages gets even faster with Early Hints

¿Qué es Early Hints?

Early Hints es una nueva función de Internet compatible con Chrome desde la versión 103, y que Cloudflare ha puesto a disposición general de los sitios web mediante nuestra red. Early Hints reemplaza Server Push, y ofrece un mecanismo que permite proporcionar a un navegador indicaciones acerca de recursos críticos en tu página (p. ej., fuentes, archivos CSS e imágenes de la mitad superior de la página). El navegador puede empezar a cargar inmediatamente estos recursos antes de esperar una respuesta HTML completa, lo que le permite aprovechar tiempo que de otra forma se perdería. Antes de Early Hints, ningún trabajo podía empezar hasta que el navegador no hubiera recibido el primer byte de la respuesta. Ahora, el navegador puede aprovechar este tiempo mientras que antes solo podía esperar. Early Hints puede mejorar considerablemente el rendimiento de tu sitio web, especialmente en el caso de métricas como LCP.

Cómo funciona Early Hints

Cloudflare almacena en la caché los encabezados Link de tipo preload y preconnect enviados desde tu respuesta 200 OK y los envía anticipadamente para las solicitudes subsiguientes como una respuesta 103 de Early Hints.

En términos prácticos, una conversación HTTP ahora tiene esta forma:

Solicitud

Respuesta de Early Hints

GET /
Host: example.com

Respuesta

103 Early Hints
Link: </styles.css>; rel=preload; as=style

Early Hints en Cloudflare Pages

200 OK
Content-Type: text/html; charset=utf-8
Link: </styles.css>; rel=preload; as=style

<html>
<!-- ... -->
</html>

Los sitios web alojados en Cloudflare Pages pueden beneficiarse especialmente de Early Hints. Si utilizas Pages Functions para generar páginas dinámicas representadas en el lado del servidor (SSR), es muy probable que Early Hints mejore considerablemente tu sitio web.

Prueba de rendimiento

Hemos creado un sitio web de comercio electrónico de demostración simple para evaluar el rendimiento de Early Hints.

Esta página de inicio contiene el precio de cada artículo, así como el contador de artículos en existencias. La propia página consiste en código HTML y archivos CSS creados a mano, pero estos valores de precios e inventario provienen de plantillas en directo para cada solicitud con Pages Functions. Para simular la carga desde una fuente de datos externa (posiblemente respaldada por KV, Durable Objects, D1 o incluso una API externa como Shopify), hemos añadido un retardo fijo previo a la resolución de estos datos. Incluimos enlaces preload en nuestra respuesta a algunos recursos críticos:

A screenshot of the landing page of a demo Cloudflare e-commerce website selling a t-shirt, cap and keycap. Each item is branded with the Cloudflare logo, and has a price and
  • una hoja de estilo CSS externa,

  • la imagen de la camiseta,

  • la imagen de la gorra

  • y la imagen de la tecla.

La primera solicitud causa una cascada, como se podría esperar. La primera solicitud se mantiene bloqueada bastante tiempo, mientras resolvemos estos datos de precios y de inventario. Una vez que se han cargado, el navegador analiza el código HTML, extrae los recursos externos y realiza las solicitudes subsiguientes de contenido correspondiente. Los archivos CSS y las imágenes alargan considerablemente el tiempo de carga, debido a su gran tamaño y calidad. Se produce Largest Contentful Paint (LCP) cuando se carga la imagen de la camiseta, y el documento finaliza una vez que se han completado todas las solicitudes.

Durante las solicitudes subsiguientes es cuando el asunto se pone interesante. Estos enlaces preload se almacenan en la caché en la red global de Cloudflare, y se envían antes que el documento en una respuesta 103 de Early Hints. Ahora, el aspecto de la cascada es muy distinto. La solicitud inicial se envía de la misma forma, pero ahora las solicitudes de los archivos CSS y de las imágenes se deslizan mucho más a la izquierda, ya que se pueden iniciar tan pronto como se entrega la respuesta 103. El navegador empieza a recuperar estos recursos mientras espera a que la solicitud original finalice la representación del lado del servidor. De nuevo se produce LCP una vez que se ha cargado la imagen de la camiseta, pero, esta vez, se adelanta 530 ms porque su carga se inició 752 ms más rápido, y el documento está completamente cargado 562 ms más rápido, de nuevo porque la carga de todos los recursos externos se ha podido iniciar más rápido.

A network diagnostics waterfall for the page without Early Hints, as described above.

Las cuatro solicitudes finales (resaltadas en amarillo) se han devuelto como respuestas 304 Not Modified utilizando un encabezado If-None-Match. Por defecto, Cloudflare Pages requiere que el navegador confirme que todos los activos son nuevos y, así, en el caso improbable de que se actualicen entre la respuesta de Early Hints y el momento de su uso, el navegador comprueba si han cambiado. Puesto que no han cambiado, no hay ningún contenido para descargar, y la respuesta se completa rápidamente. Esto se puede evitar estableciendo un encabezado Cache-Control personalizado en estos activos mediante un archivo _headers. Por ejemplo, podrías almacenar en la caché estas imágenes durante un minuto con una regla como esta:

A network diagnostics waterfall with Early Hints, as described above.

Podríamos ampliar esta auditoría de rendimiento explorando otras funciones que ofrece Cloudflare, como la minificación automática de CSS, Cloudflare Images y el cambio de tamaño de imagen.

# _headers

/*.png
  Cache-Control: max-age=60

Ya servimos Cloudflare Pages desde una de las redes más rápidas del mundo. Early Hints simplemente permite que los desarrolladores se beneficien aún más de nuestra red global.

Utilización de Early Hints y Cloudflare Pages

Actualmente, la función Early Hints en Cloudflare está restringida al almacenamiento en la caché de encabezados Link en la respuesta de una página web. Normalmente, esto significaría que los usuarios de Cloudflare Pages deberían utilizar el archivo _headers o Pages Functions para aplicar estos encabezados. Sin embargo, para tu comodidad, hemos incluido también la posibilidad de transformar cualquier elemento HTML <link> que incluyas en el cuerpo a los encabezados Link. Esto te permite controlar directamente los datos de Early Hints que envías, desde el mismo documento donde haces referencia a estos recursos, sin necesidad de salir de HTML para beneficiarte de Early Hints.

Por ejemplo, para el siguiente documento HTML, se generará una respuesta de Early Hints:

Documento HTML

Respuesta de Early Hints

<!DOCTYPE html>
<html>
  <head>
    <link rel="preload" as="style" href="/styles.css" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Como hemos mencionado anteriormente, los encabezados Link también se pueden establecer con un archivo _headers si lo prefieres:

103 Early Hints
Link: </styles.css>; rel=preload; as=style

Early Hints (y el análisis HTML automático de <link>) ya está activado automáticamente para todos los dominios pages.dev. Si tienes dominios personalizados configurados en tu proyecto Pages, asegúrate de activar Early Hints en ese dominio en la pestaña "Velocidad" del panel de control de Cloudflare. Puedes encontrar más información en nuestra documentación.

# _headers

/
  Link: </styles.css>; rel=preload; as=style

Además, en el futuro, esperamos ofrecer compatibilidad con las funciones Smart Early Hints. Smart Early Hints permitirá que Cloudflare genere automáticamente Early Hints, incluso cuando no existan encabezados Link o elementos <link>, analizando el tráfico del sitio web e infiriendo los recursos que son más importantes para una página determinada. Pronto proporcionaremos más información sobre Smart Early Hints.

Entretanto, prueba Early Hints en Pages hoy mismo. Haznos saber qué mejora ves en la carga en nuestro servidor Discord.

Síguelas en Cloudflare TV

Protegemos redes corporativas completas, ayudamos a los clientes a desarrollar aplicaciones web de forma eficiente, aceleramos cualquier sitio o aplicación web, prevenimos contra los ataques DDoS, mantenemos a raya a los hackers, y podemos ayudarte en tu recorrido hacia la seguridad Zero Trust.

Visita 1.1.1.1 desde cualquier dispositivo para empezar a usar nuestra aplicación gratuita y beneficiarte de una navegación más rápida y segura.

Para saber más sobre nuestra misión para ayudar a mejorar Internet, empieza aquí. Si estás buscando un nuevo rumbo profesional, consulta nuestras ofertas de empleo.
Early Hints (ES)Cloudflare Pages (ES)Velocidad/fiabilidadNoticias de productos

Síguenos en X

Greg Brimble|@GregBrimble
Cloudflare|@cloudflare

Publicaciones relacionadas

27 de septiembre de 2024, 13:00

AI Everywhere with the WAF Rule Builder Assistant, Cloudflare Radar AI Insights, and updated AI bot protection

This year for Cloudflare’s birthday, we’ve extended our AI Assistant capabilities to help you build new WAF rules, added new AI bot & crawler traffic insights to Radar, and given customers new AI bot blocking capabilities...

26 de septiembre de 2024, 13:00

Zero-latency SQLite storage in every Durable Object

Traditional cloud storage is inherently slow because it is accessed over a network and must synchronize many clients. But what if we could instead put your application code deep into the storage layer, such that your code runs where the data is stored? Durable Objects with SQLite do just that. ...

26 de septiembre de 2024, 13:00

Making Workers AI faster and more efficient: Performance optimization with KV cache compression and speculative decoding

With a new generation of data center accelerator hardware and using optimization techniques such as KV cache compression and speculative decoding, we’ve made large language model (LLM) inference lightning-fast on the Cloudflare Workers AI platform....

25 de septiembre de 2024, 13:00

Introducing Speed Brain: helping web pages load 45% faster

We are excited to announce the latest leap forward in speed – Speed Brain. Speed Brain uses the Speculation Rules API to prefetch content for the user's likely next navigations. The goal is to download a web page to the browser before a user navigates to it, allowing pages to load instantly. ...