Hoy nos complace anunciar cómo estamos automatizando las funciones Early Hints y Fetch Priorities gracias a la potencia de la red de Cloudflare. Hace casi un año lanzamos Early Hints, un método que permite a los servidores web enviar instrucciones de forma asíncrona al navegador mientras el servidor web prepara la respuesta completa. Esto proporciona sugerencias proactivas al navegador sobre cómo cargar la página web más rápido para el visitante, en lugar de esperar pasivamente a recibir la respuesta de toda la página.
En los experimentos iniciales en el laboratorio, observamos que las mejoras de la carga de páginas superaban el 30 %. Desde entonces, hemos enviado aproximadamente dos billones de sugerencias en nombre de más de 150 000 sitios web que utilizan el producto.
Para utilizar eficazmente Early Hints en un sitio web, los encabezados de los enlaces HTTP o los elementos de los enlaces HTML deben estar configurados de manera que especifiquen qué activos se deben precargar o qué servidores de terceros se deben conectar previamente. Estas decisiones requieren comprender cómo interactúa tu sitio web con los navegadores, así como identificar los activos que bloquean la representación a fin de proporcionar sugerencias que no implementen estrategias de priorización que saturen el ancho de banda de la red con activos no críticos (es decir, no puedes simplemente aplicar Early Hint a todo y esperar buenos resultados).
Para los usuarios con estos conocimientos que pueden configurar Early Hints en el origen (o mediante un Worker), esto funciona sin problemas. Sin embargo, para aquellos que no tienen acceso a su servidor de origen (por ejemplo, las plataformas SaaS) o que tienen dudas acerca de cuáles son los activos óptimos que se deberían precargar/priorizar, o bien que simplemente prefieren centrar su atención en desarrollar su propia aplicación, surge la pregunta: "Como servidor intermediario, ¿no debería Cloudflare saber cuál es la mejor manera de priorizar mi sitio web para lograr el mejor rendimiento?".
La respuesta es sí. Por este motivo, nos complace empezar a hablar sobre cómo Smart Hints determinará la mejor prioridad de los activos web sin que los desarrolladores tengan que configurar nada. Si te interesa ayudarnos a probar la versión beta de esta función, puedes registrarte aquí y nos pondremos en contacto contigo con instrucciones acerca de cómo puedes ayudarnos a probar Smart Hints más adelante este año.
Antecedentes
Cuando visitas una página web, tu navegador realmente solicita numerosos recursos individuales al servidor. Estos recursos incluyen, entre otros, los elementos visibles como las imágenes, el texto y los vídeos, pero también la lógica subyacente (Javascript, etc) que posibilita los análisis del sitio web o las funciones. El orden en el que se cargan estos recursos desempeña un papel fundamental a la hora de determinar la rapidez con la que los usuarios pueden visualizar e interactuar con la página.
Cuando tu navegador recibe una respuesta del servidor, analiza la respuesta HTML secuencialmente, de principio a fin. Cuando la respuesta HTML llega al navegador, esta se divide en dos partes: el encabezado (<head>) y el cuerpo (<body>).
La sección <head> aparece al principio de la respuesta HTML y contiene elementos básicos como las hojas de estilo, los scripts y otras instrucciones para el navegador. Las hojas de estilo definen el aspecto que debe tener la página, mientras que los scripts proporcionan la lógica necesaria para las funciones y funcionalidades interactivas.1
Es importante que las hojas de estilo se carguen con rapidez, ya que los navegadores las están esperando para saber cómo mostrar el contenido al visitante. No obstante, los scripts son interesantes porque su comportamiento puede variar en función de las instrucciones proporcionadas al navegador. Si un script no contiene instrucciones específicas (por ejemplo, defer/async/inline), puede convertirse en un recurso "de bloqueo". Cuando el navegador encuentra un recurso de script de bloqueo, detiene el proceso de la página web y espera hasta que el script se ha cargado en su totalidad y ejecutado por completo. Esto garantiza que la funcionalidad del script está disponible para que la utilice el visitante. Sin embargo, este comportamiento de bloqueo puede retardar la visualización del contenido para el usuario, ya que el navegador debe esperar a que el script finalice para poder continuar.
Hasta que el navegador llega a la sección <body> del documento, no se muestra nada el visitante. Por este motivo, es fundamental optimizar al máximo el proceso de carga de la sección <head>. Al minimizar el tiempo necesario para la carga de las hojas de estilo y los script de bloqueo, el navegador puede empezar a representar antes el contenido de la página, lo que permite a los visitantes ver e interactuar con la página web más rápido.
Lograr el rendimiento web óptimo puede resultar complejo. Aunque los navegadores suelen encargarse de determinar el orden en que se deben cargar los distintos recursos necesarios para crear una página, recientemente hemos lanzado diversas herramientas (Early Hints, Fetch Priority, Lazy-Loading, H2 Priorities) para ayudar a los desarrolladores a especificar prioridad de recursos únicos a fin de que los navegadores mejoren el rendimiento de carga de los sitios web. Aunque estos métodos y herramientas para especificar la prioridad de los recursos pueden ser eficaces, requieren tareas de implementación y pruebas para garantizar su correcta aplicación.
Herramientas de prioritización
Dos métodos que han alcanzado gran popularidad para mejorar el rendimiento de los sitios web han sido Early Hints y Fetch Priorities. Estas herramientas ayudan a proporcionar a los navegadores información acerca de cómo deben cargar los recursos en el orden correcto a fin de mejorar el rendimiento de los recursos críticos.
Early Hints
Early Hints permite que el servidor proporcione información al cliente antes de que la respuesta final esté disponible.
Cuando un cliente envía una solicitud al servidor, este puede responder con una "sugerencia temprana" (en inglés, "early hint") para proporcionar una pista sobre la respuesta final. Esta sugerencia temprana es una respuesta aparte que incluye encabezados relacionados con la respuesta final, como por ejemplo objetos estáticos importantes que se pueden obtener de forma temprana, así como enlaces a ubicaciones donde obtener recursos relacionados.
La finalidad de Early Hints es permitir que el cliente empiece a procesar la información recibida mientras espera la respuesta final. El cliente puede utilizar Early Hints para iniciar antes la precarga de recursos, y conectarse previamente a los servidores que tienen información para la respuesta final, lo que puede reducir los tiempos de carga de las páginas.
Fetch Priority
Otra herramienta eficaz para la optimización de la carga de recursos es Fetch Priorities, anteriormente conocida como Priority Hints.
Al analizar una página web, los navegadores web a menudo priorizan la obtención de recursos como por ejemplo los scripts y las hojas de estilo a fin de optimizar la secuencia de descarga y utilizar eficazmente el ancho de banda. Los navegadores determinan las prioridades asignadas a estos recursos en función de factores como el tipo de recurso, la colocación en la página web y su ubicación en la respuesta HTML. Por ejemplo, se debe otorgar una prioridad mayor a las imágenes en el área visible para el visitante, mientras que los scripts básicos cargados pronto en la sección <head> pueden tener asignada una prioridad muy alta. Aunque los navegadores normalmente gestionan con eficacia la asignación de prioridades, se debería tener en cuenta que es posible que estas no siempre sean las más adecuadas en todas las situaciones.
Con Fetch Priorities, los desarrolladores controlan mejor la carga de los recursos y pueden asignar una prioridad mayor o menor a los distintos recursos en su página web, lo que puede optimizar el rendimiento general de las páginas web.
Early Hints y Fetch Priorities son extremadamente útiles para optimizar el rendimiento de las páginas web, pero a menudo requieren el acceso a los recursos HTML a fin de cambiar sus prioridades, así como saber cómo priorizar mejor los recursos. Aunque la combinación de estas herramientas permite a los desarrolladores implementar estrategias de rendimiento cada vez más complejas, estas herramientas también requieren tareas exhaustivas de pruebas, configuración y gestión a medida que las páginas web cambian con el tiempo. Smart Hints simplificará la utilización de estas herramientas mediante nuestras balizas de datos RUM y heurística a fin de implementar mejor las estrategias de priorización sin que los desarrolladores deban levantar ni un dedo.
¿Cómo priorizaremos los activos?
Smart Hints de Cloudflare aprovechará las capacidades de las funciones Early Hints y Fetch Priority para optimizar la entrega de recursos mediante nuestra enorme cantidad de datos RUM de sitios web en Internet. Optimizaremos la priorización de recursos sobre la marcha. Smart Hints determinará dinámicamente las sugerencias y prioridades adecuadas en función de una respuesta específica, sobre la marcha.
¿Pero cómo?
Cloudflare utiliza dos métodos para recopilar los datos de rendimiento: las pruebas sintéticas y las mediciones de usuarios reales (RUM). Las pruebas sintéticas recopilan los datos de rendimiento cargando una página web en un navegador automatizado en un entorno controlado. RUM también recopila datos de rendimiento, pero de los usuarios reales que visitan la página web en navegadores reales. RUM opera inyectando un pequeño fragmento de JavaScript, o baliza, en la página web. Cloudflare recopila una gran cantidad de datos RUM de miles de sitios.
A partir de estas dos fuentes de datos de rendimiento, Cloudflare puede analizar de forma inteligente los cuellos de botella de la carga de las páginas web. Si su causa es la descarga de recursos que bloquean la representación, Cloudflare puede generar Smart Hints para que el navegador priorice la descarga de estos recursos.
A medida que implementemos Smart Hints, analizaremos el uso de modelos de aprendizaje para buscar patrones que puedan convertirse en heurística. A continuación, esta heurística podría utilizarse para mejorar el rendimiento de sitios similares que no utilicen RUM o pruebas sintéticas.
Con Smart Hints, Cloudflare puede revolucionar la entrega de sitios web y de aplicaciones, y proporcionar una experiencia de navegación más rápida, más fluida y más agradable. Al inferir la prioridad adecuada para un cliente determinado, Cloudflare ayudará a los clientes a encontrar la mejor prioridad para el rendimiento de sus sitios web, al mismo tiempo que minimiza el tiempo necesario para optimizar una página web en constante cambio.
¿Cómo puedo ayudar a Cloudflare en este cometido?
Antes de realizar una implementación más general, realizaremos pruebas beta a gran escala de nuestros sistemas para garantizar que tomamos las mejores decisiones de rendimiento para todo tipo de contenido.
Durante los próximos meses crearemos un grupo beta y trabajaremos con los participantes para garantizar que todos tienen una experiencia satisfactoria con Smart Hints. Si quieres ayudarnos en este cometido, regístrate para participar en la versión beta cerrada aquí (en la pestaña Speed del panel de control) y nos pondremos en contacto contigo cuando estemos listos para que la actives y acerca de cómo hacernos llegar tus comentarios.
Conclusión
Estamos deseando trabajar con nuestra comunidad para crear y optimizar esta experiencia sin código/de configuración a fin de ofrecer a todo el mundo mejoras importantes de la carga de páginas.
1Sí, los scripts y las hojas de estilo también se pueden colocar en la sección <body>, pero su ubicación principal es en la sección <head>.