Cómo utilizar la API de reglas de especulación para cargar páginas web al instante

2024 se perfila como el momento en que la carga instantánea se convierta en el nuevo estándar en el rendimiento web, y los propietarios de negocios en línea son todo oídos.

Sin embargo, la transición de rápido a instantáneo se viene gestando desde hace algún tiempo.

Ya en 2009, la búsqueda de una carga de páginas más rápida y eficiente llevó al equipo de Chromium a crear las primeras sugerencias de recursos, a las que más tarde se añadió el enlace rel=”prerender”.

Se esperaba que tuviera un impacto significativo en el rendimiento, ya que implicaba cargar páginas posteriores en segundo plano antes de que el usuario navegara hacia ellas, lo que garantizaba una representación más rápida cuando se producía la transición.

Sin embargo, esta versión de prerenderizado no resultó lo suficientemente eficiente y quedó obsoleta en 2017.

Hoy en día, Google lanzó desarrollos prometedores para su API de reglas de especulación, lo que permite un enfoque más sofisticado para la renderización previa completa y el desbloqueo de una navegación web verdaderamente fluida.

¿Qué es la API de reglas de especulación de Google?

La API de reglas de especulación es una API definida en JSON desarrollada por Google para mejorar el rendimiento de la carga de páginas web mediante estrategias de carga especulativa.

La carga especulativa implica predecir y precargar recursos para navegaciones de páginas posteriores, lo que conduce a tiempos de renderizado más rápidos y mejores experiencias de usuario. Google introdujo esta API para brindar a los desarrolladores una forma más flexible y expresiva de especificar qué documentos deben buscarse o renderizarse previamente.

Detalles clave sobre la API de reglas de especulación:

• Orientación a URL de documentos: a diferencia de los mecanismos tradicionales de captación previa que se dirigen a archivos de recursos específicos, la API de reglas de especulación se centra en las URL de documentos. Esto lo hace particularmente adecuado para aplicaciones de varias páginas (MPA) en lugar de aplicaciones de una sola página (SPA).

• Representación previa y captación previa: la API admite estrategias de representación previa y captación previa. La renderización previa implica buscar, renderizar y cargar contenido en una pestaña invisible, lista para una activación casi instantánea cuando el usuario navega a la página. La captación previa, por otro lado, descarga y guarda los recursos de la página especificada (p. ej., documento, imagen, secuencia de comandos, etc.), optimizando los tiempos de carga cuando el usuario navega posteriormente a esas páginas.

• Compatibilidad con navegadores: la API es actualmente compatible con todos los navegadores basados ​​en Chromium, incluidos Chrome, Edge, Opera, Chrome Android, Opera Android y WebView Android. Para obtener un desglose completo de la compatibilidad, consulte la documentación de Mozilla:

También puedes comprobar si los navegadores soportan la API con el siguiente código:

• Alternativa a las funciones obsoletas: sirve como alternativa a tecnologías más antiguas, como la característica obsoleta exclusiva de Chrome , y ofrece un mejor rendimiento y una sintaxis más expresiva.
• Consideración de seguridad: las captaciones previas entre sitios tienen limitaciones para proteger la privacidad del usuario. La captación previa entre sitios funciona solo si el usuario no tiene cookies configuradas para el sitio de destino, lo que impide un posible seguimiento de la actividad del usuario.
  

¿Por qué utilizar la API de reglas de especulación en su sitio web?

La API de reglas de especulación permitecargas de páginas casi instantáneas para experiencias de navegación perfectas.

Los tiempos de carga de páginas mejorados,la mayor satisfacción del usuario y las posibles ventajas de SEOson razones de peso para que los desarrolladores adopten esta tecnología.

Al reducir la latencia entre navegaciones de páginas, los usuarios perciben el sitio web como más fluido y receptivo. Esto se vuelve claramente visible enlos Core Web Vitals de su sitio, donde la pintura con contenido más grande (LCP), el cambio de diseño acumulativo (CLS) y la interacción con la siguiente pintura (INP) disminuyen drásticamente.

Las experiencias de navegación instantánea conllevan tasas de rebote más bajas y una mayor retención de usuarios, métricas vitales para el éxito de su plataforma en línea. Subrayando así el valor estratégico de integrar la API de reglas de especulación.

¿Cómo funciona la API de reglas de especulación?

La API de reglas de especulación de Google está diseñada para apuntar a URL de documentos en lugar de archivos de recursos específicos. La API de reglas de especulación introduce una sintaxis más expresiva y configurable para especificar qué documentos se deben buscar o renderizar previamente.

Con una estructura definida en formato JSON dentro de un tipo de script = "reglas de especulación", los desarrolladores pueden articular reglas tanto para la representación previa como para la captación previa. Esta flexibilidad mejorada permite ajustar la carga especulativa.

Recientemente, Google anunció una nueva mejora en la API de reglas de especulación en Chrome 121, que ahora ofrece la opción de búsqueda automática de enlaces.

Esto se hace mediante:

• Especificación de la fuente del documento
• Seleccionar enlaces en la página en función de URL o selectores de CSS
• Especificar un nivel de “entusiasmo”: entusiasta (inmediato), moderado (al pasar el mouse durante 200 ms) y conservador (al tocar el mouse o tocar el suelo)

Sin embargo, si eres nuevo en la API de reglas de especulación, te recomendamos que primero pruebes las diferentes configuraciones a continuación.

Cómo utilizar la API de reglas de especulación de Google

La API de reglas de especulación permite a los desarrolladores seguir un enfoque estructurado para optimizar los procesos de prerenderizado y precarga.

Configuración

Comienza creando primero un elemento script type="speculationrules" y definiendo reglas de especulación en una estructura JSON dentro de él.

Las reglas de especulación se pueden agregar en la cabeza o en el cuerpo del marco principal.

Importante: Las reglas de especulación en subtramas no se aplican, y las reglas de especulación en páginas prerenderizadas solo se aplican una vez que un usuario navega a la página misma.

Las reglas de especulación se pueden incluir de forma estática o dinámica.

• La configuración estática se realiza en el HTML de la página (perfecto para sitios web donde la siguiente acción tiene una alta certeza, por ejemplo, un sitio web de noticias puede querer presentar previamente lo más destacado del día)
• La configuración dinámica se realiza a través de JavaScript (adecuado para sitios web donde se utilizan mucho las experiencias de usuario personalizadas)

Importante: Al optar por la configuración dinámica, consulte siempre la documentación de soporte para conocer futuros desarrollos y casos de uso que puedan estar disponibles en el futuro.

Para informar al navegador qué URLpreprocesar , puede insertar instrucciones JSON en sus páginas:

De manera similar, inserte las siguientes instrucciones JSON para la captación previa :

Es posible agregar múltiples reglas de especulación a una página, en cuyo caso le indicaría al navegador cualquiera de los siguientes niveles:

• Lista de URL
• Múltiples reglas de especulación
• Múltiples listas dentro de un conjunto de reglas de especulación
  

Especificación de rutas para prerenderizado/prefetch

El ajuste de la carga especulativa implica especificar rutas para la representación previa y la captación previa. Al categorizar las páginas según su importancia o probabilidad de navegación del usuario, los desarrolladores pueden optimizar la estrategia de carga especulativa.

Sin embargo, existen algunas rutas que se consideran inseguras, como por ejemplo:

• URL de cierre de sesión;
• URL de cambio de idioma;
• URL "Agregar al carrito";
• URL de flujo de inicio de sesión donde el servidor solicita que se envíe un SMS, por ejemplo, cuando se necesita autenticación de dos factores (2FA);
• URL que inician el seguimiento de conversiones de anuncios del lado del servidor;
• URL que activan los límites de uso de un usuario, por ejemplo, mediante el uso de su asignación mensual de artículos gratuitos.

De manera similar a excluir dichas páginas del almacenamiento en caché, la razón para evitar la búsqueda previa y la renderización previa está relacionada con las variables dinámicas.

Estas son páginas sensibles al contenido donde los valores se actualizan según las acciones del usuario y, al precargarlos en segundo plano, el riesgo de mostrar un estado desactualizado de la página es muy alto.

Precisión y compensaciones

Como mencionó Barry Pollard en nuestro seminario web sobre "Cargar páginas al instante":

Si bien la captación previa es el método más seguro que puede duplicar en muchas de sus páginas web, también ofrece la recompensa más baja, ya que solo implica la descarga de recursos específicos.

Los prerenders de página completa, por otro lado, ofrecen mayores recompensas, pero deben usarse con moderación ya que pueden:

• Abruma al navegador, ya que sólo puede ejecutar una cantidad limitada de tareas en segundo plano.
• Consume una cantidad considerable de ancho de banda y recursos de CPU, lo que puede provocar una degradación del rendimiento para los usuarios de redes más lentas o dispositivos con recursos limitados.
• Conduce a un mayor desperdicio de recursos si el visitante no navega a la página.

Para configurar la renderización previa correctamente, debe considerar el comportamiento de sus usuarios y analizar las navegaciones comunes en su sitio web. Utilizando mapas de calor y diagramas de flujo de Google Analytics, puede identificar rutas esenciales e iniciar sus experimentos de carga predictiva.

Para comprobar si una página está preprocesada, utilice una entrada enableStart distinta de cero de PerformanceNavigationTiming . Luego, esto se puede registrar utilizando una dimensión personalizada:

De esta manera, podrás medir la relación entre el prerenderizado y otros tipos de navegación.

Además, es importante medir la cantidad de páginas prerenderizadas que no se visitan posteriormente para optimizar las reglas de especulación y lograr mayores tasas de aciertos y un menor desperdicio de recursos.

Puede hacer esto activando un evento de análisis cuando se insertan reglas de especulación para indicar que se solicitó una renderización previa. Luego compare el número de estos eventos con las vistas reales de la página previa al renderizado.

O tu puedes…

Considere la renderización previa de páginas automatizada con inteligencia artificial de navegación de NitroPack

Navigation AI es el optimizador de navegación web impulsado por AI de NitroPack que predice y analiza activamente el comportamiento del usuario para prepresentar páginas completas durante el recorrido del cliente.

Navigation AI permite a los propietarios de sitios ofrecer experiencias de navegación instantáneas en computadoras de escritorio y dispositivos móvilessin escribir una sola línea de código , lo que aumenta la participación del cliente y las tasas de conversión.

Nota: Navigation AI es un producto independiente, pero es 100% compatible con NitroPack y amplía aún más los beneficios para los propietarios de sitios.

Únase a la lista de espera para Navigation AI y desbloquee experiencias de usuario instantáneas en su sitio →

La IA de navegación de NitroPack se basa en la API de reglas de especulación y ofrece una solución automatizada para lograr una alta tasa de aciertos y eficiencia de recursos en escenarios de prerenderizado.

Al aplicar predicciones iniciales mejoradas por IA sobre la carga de la página basadas en datos y analizar el comportamiento del usuario, Navigation AI puede ajustar las predicciones e indicar con precisión a la API de reglas de especulación que prepresente las páginas que realmente serán visitadas.

El resultado es una carga instantánea de la página gracias a que esta página ya está pintada en segundo plano. En los dispositivos móviles, la navegación AI se basa en identificar dónde se encuentra el usuario en la página y, dada la pequeña ventana gráfica, puede predecir fácilmente dónde tocará.

Basada en 1200 sitios web, la navegación AI ya está mostrando resultados espectaculares.

• Resultado n.º 1: las páginas web que utilizan navegación AI muestran constantemente un tiempo de carga de ~2,86 s frente a 6,12 s sin navegación AI

• Resultado n.º 2: con Navigation AI, las páginas prerenderizadas muestran una mejora de LCP del 85 % (de 3,1 a 0,4 s) y una mejora de CLS del 80 % (de 0,3 a 0,06 s).Para las páginas precargadas, la IA de navegación aumenta el LCP en un 52 % (de 3,1 a 1,5 s).

• Resultado n.º 3: con Navigation AI, las métricas de rendimiento de todo el sitio web mejoran significativamente: LCP en un 15 %, CLS en un 8 % y TTFB en un 26 %

Obtenga acceso a Navigation AI uniéndose a nuestra lista de espera →

API de reglas de especulación y WordPress

En nuestro seminario web "Carga instantánea de páginas", el ingeniero de relaciones con desarrolladores de Google, Adam Silverstein, reveló que el equipo de rendimiento central de WordPress está trabajando en implementaciones más estables de la nueva API de reglas de especulación.

Actualmente, el enfoque sigue siendo hacer que una pequeña parte de la funcionalidad de la API esté disponible para los propietarios de sitios y desarrolladores en el ecosistema para probar la eficiencia y la tasa de adopción antes de convertirla en parte del núcleo. Esto es lo que los usuarios de WordPress pueden aprovechar hasta ahora:

• Un módulo en el complemento Performance Lab
• Un complemento independiente que implementa únicamente la interfaz de la API de reglas de especulación (aplica el nivel conservador de "entusiasmo", pero los desarrolladores son libres de modificar el comportamiento)

Las rutas de WP-admin están excluidas de forma predeterminada, pero depende de los desarrolladores de WP determinar las rutas que les gustaría priorizar.

El equipo de WordPress Core Performance también está trabajando en implementaciones más sofisticadas dentro de los complementos del ecosistema. Esto tiene como objetivo aliviar parte del trabajo pesado que tienen que hacer los desarrolladores al determinar qué rutas son la máxima prioridad y cuáles no.

¿Qué mejoras se avecinan en las reglas de especulación?

Actualmente, las reglas de especulación se limitan a páginas dentro de la misma pestaña, pero se están realizando esfuerzos para reducir estas restricciones.

La renderización previa se limita, de forma predeterminada, a páginas del mismo origen. Sin embargo, una actualización reciente en Chrome 119 ahora admite la representación previa de páginas de origen cruzado del mismo sitio, lo que requiere la suscripción a través de un encabezado HTTP.

Las versiones futuras pueden ampliar la representación previa a páginas de orígenes cruzados y permitirla en pestañas nuevas. La API de reglas de especulación está configurada para expandirse, introduciendo puntuaciones y sintaxis para reglas de documentos y brindando más flexibilidad, como prerenderizar enlaces al presionar el mouse.

Los experimentos en curso en Chrome están explorando funciones adicionales y los sitios pueden participar en una prueba de origen para probar y brindar comentarios sobre posibles incorporaciones futuras.