API de Reglas de Especulación: El Camino Hacia una Carga Instantánea de Páginas

El API de Reglas de Especulación nos ofrece la posibilidad de precargar, o incluso pre-renderizar, otra página. De esta manera, podemos lograr una carga casi instantánea de la página a la que el usuario navega, mejorando así su experiencia general en la web.

Algunos de ustedes recordarán el antiguo prerender (<link rel="prerender">), que, sin embargo, no logró un éxito notable. En la versión 109 de Chrome, surge el API de Reglas de Especulación con nuevas posibilidades de carga de páginas, con mejoras adicionales en la versión 122. El soporte general es bastante decente.

La carga instantánea, por supuesto, influirá en todas las métricas Core Web Vitals: al ahorrar tiempo en la carga afecta a la métrica LCP, al mantener la página en memoria afecta a la estabilidad del diseño (CLS), así como a la velocidad de respuesta a la interacción (INP).

El Prerender Bajo la Lupa#

La implementación básica de las Reglas de Especulación es bastante sencilla. Mediante la etiqueta HTML <script type="speculationrules"> defines en JSON las reglas para el pre-renderizado de páginas. Si no puedes modificar el HTML, puedes incluir las reglas en la página mediante JavaScript o cabeceras HTTP.

En el ejemplo a continuación, se muestra el pre-renderizado de una página sencilla mediante URLs específicas:

<script type="speculationrules">
	{
		"prerender": [
			{
				"urls": ["next.html", "next2.html"]
			}
		]
	}
</script>

Sin embargo, las posibilidades del API de Reglas de Especulación son bastante más flexibles: puedes usar selectores CSS o aplicar la condición where. Otro ejemplo muestra su uso para pre-renderizar URLs en el documento sin mencionarlas explícitamente, excluyendo páginas como /logout/*:

<script type="speculationrules">
	{
		"prerender": [
			{
				"source": "document",
				"where": {
					"and": [{ "href_matches": "/*" }, { "not": { "href_matches": "/logout/*" } }]
				},
				"eagerness": "moderate"
			}
		]
	}
</script>

Implementar un prerender inmediato para todos los enlaces en la página no es una idea brillante, ya que aumenta la carga del servidor.

En los dispositivos móviles, también se produce un uso excesivo de la CPU y la memoria. Para equilibrar la configuración del pre-renderizado, podemos utilizar otra característica en el arsenal del API de Reglas de Especulación: eagerness.

El Atributo Eagerness#

Con eagerness puedes establecer diferentes períodos de tiempo durante los cuales se aplican las reglas especulativas.

Puedes elegir entre las siguientes opciones:

• immediate – Se inicia de inmediato, ocurre cuando el navegador encuentra tus reglas.
• eager – Actualmente se comporta como immediate, pero en el futuro debería mejorar, y eager estará en algún lugar entre immediate y moderate.
• moderate – Inicia el pre-renderizado cuando pasas el ratón sobre un enlace durante al menos 200 milisegundos (o en el evento pointer down, si ocurre antes y en dispositivos móviles donde no hay evento hover).
• conservative – Se activa en el evento pointer down.

Es importante mencionar que Chrome, bajo ciertas condiciones, impedirá que se activen las Reglas de Especulación. Esto incluye situaciones en las que el usuario tiene activado el modo de ahorro de energía, ahorro de datos, limitación de memoria o en páginas abiertas en pestañas de fondo. El pre-renderizado de páginas también puede ser desactivado explícitamente por el usuario en la configuración del navegador.

Puedes verificar la implementación de tus reglas directamente en DevTools en la pestaña Application, seleccionando Speculation Loads en Background services:

Probando cargas especulativas en DevTools del navegador Chrome.

Reglas de Especulación y su Impacto en la Analítica#

Es crucial destacar que las páginas pre-renderizadas pueden distorsionar las mediciones en herramientas analíticas. La interacción del usuario puede no registrarse correctamente si la página no está completamente cargada. Recomendamos ajustar los códigos analíticos para detectar correctamente la activación de la página.

La analítica más común, como GA, mide correctamente las Reglas de Especulación, pero es necesario monitorear cuándo la página se muestra realmente al usuario. Google aborda más sobre este tema en su artículo.

¿Para Qué Sitios es Adecuado el API de Reglas de Especulación?#

Los candidatos ideales para implementar reglas especulativas son sitios de contenido o tiendas en línea. Al seleccionar páginas específicas para especulación, elige siempre aquellas que tienen la mayor probabilidad de ser clicadas por el usuario. Puedes encontrar tales datos en herramientas analíticas como Hotjar.

Para inspirarte, ofrecemos algunas sugerencias sobre dónde implementar reglas especulativas:

• En una tienda en línea, en las categorías para las siguientes páginas en la paginación.
• En una tienda en línea, para los siguientes pasos en el carrito de compras.
• En un sitio de contenido, el artículo más reciente en la página principal.

No olvides la posibilidad de ajustar eagerness y comienza con una opción menos "agresiva", como moderate. En general, recomendamos ser cautelosos con las reglas especulativas, ya que generan una carga adicional en el servidor. En dispositivos móviles, los usuarios pueden experimentar una carga excesiva en la CPU, memoria, etc.

Tipos de Navegación: Cómo Medir el Porcentaje de Páginas con Prerender#

Nuestro monitoreo PageSpeed.ONE PLUS utiliza Tipos de Navegación para seguir los cambios en el porcentaje de cada tipo de navegación. Uno de los tipos es prerender, que también incluye el pre-renderizado mediante el API de Reglas de Especulación.

Resumen de Tipos de Navegación en el monitoreo PageSpeed.ONE PLUS.