Depura las reglas de especulación con las Herramientas para desarrolladores de Chrome

Las reglas de especulación se pueden usar para recuperar y renderizar de forma previa las navegaciones a la página siguiente, como se detalla en la publicación anterior. Esto puede permitir cargas de páginas mucho más rápidas o incluso instantáneas, lo que mejora en gran medida las Métricas web esenciales para estas navegaciones de páginas adicionales.

La depuración de reglas de especulación puede ser complicada. Esto es especialmente cierto para las páginas renderizadas previamente, ya que se renderizan en un renderizador independiente, como una pestaña en segundo plano oculta que reemplaza la pestaña actual cuando se activa. Por lo tanto, no siempre se pueden usar las opciones habituales de DevTools para depurar problemas.

El equipo de Chrome trabajó arduamente para mejorar la compatibilidad de DevTools con la depuración de reglas de especulación. En esta publicación, verás todas las formas de usar estas herramientas para comprender las reglas de especulación de una página, por qué es posible que no funcionen y cuándo los desarrolladores pueden usar las opciones más conocidas de DevTools y cuándo no.

Explicación de los términos "pre-"

Hay muchos términos "pre" que son confusos, por lo que comenzaremos con una explicación de estos:

  • Recuperación previa: Recupera un recurso o documento por adelantado para mejorar el rendimiento futuro. En esta publicación, se explica cómo realizar la carga previa de documentos con la API de Speculation Rules, en lugar de la opción <link rel="prefetch"> similar, pero más antigua, que se suele usar para la carga previa de subrecursos.
  • Renderización previa: Va un paso más allá de la precarga y, en realidad, renderiza toda la página como si el usuario hubiera navegado a ella, pero la mantiene en un proceso de renderización en segundo plano oculto listo para usarse si el usuario realmente navega allí. Una vez más, este documento se relaciona con la versión más reciente de la API de Speculation Rules, en lugar de la opción <link rel="prerender"> anterior (que ya no realiza una renderización previa completa).
  • Navegaciones especulativas: Es el término colectivo para las nuevas opciones de precarga y renderización previa activadas por las reglas de especulación.
  • Precarga: Es un término sobrecargado que puede referirse a una serie de tecnologías y procesos, como <link rel="preload">, el escáner de precarga y las precargas de navegación del trabajador del servicio. No se abordarán estos elementos aquí, pero se incluye el término para diferenciarlos claramente del término "navegación especulativa".

Reglas de especulación para prefetch

Las reglas de especulación se pueden usar para recuperar previamente el documento de la siguiente navegación. Por ejemplo, cuando insertes el siguiente JSON en una página, se recuperarán previamente next.html y next2.html:

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

El uso de reglas de especulación para la precarga de navegación tiene algunas ventajas sobre la sintaxis <link rel="prefetch"> anterior, como una API más expresiva y los resultados almacenados en la caché de memoria en lugar de la caché de disco HTTP.

Cómo depurar reglas de especulación de prefetch

Las precargas activadas por las reglas de especulación se pueden ver en el panel Red de la misma manera que otras recuperaciones:

Panel de red en las herramientas para desarrolladores de Chrome que muestra documentos recuperados previamente
Panel de red en las Herramientas para desarrolladores de Chrome que muestra documentos recuperados previamente

Las dos solicitudes destacadas en rojo son los recursos obtenidos previamente, como se puede ver en la columna Type. Se recuperan con la prioridad Lowest, ya que son para navegaciones futuras, y Chrome prioriza los recursos de la página actual.

Si haces clic en una de las filas, también se mostrará el encabezado HTTP Sec-Purpose: prefetch, que es la forma en que se pueden identificar estas solicitudes en el servidor:

Encabezados de Chrome DevTools de carga previa con Sec-Purpose establecido en carga previa
Encabezados de precarga de las Herramientas para desarrolladores de Chrome con Sec-Purpose establecido en precarga

Cómo depurar prefetch con las pestañas de carga especulativa

Se agregó una nueva sección Cargas especulativas en el panel Aplicación de Chrome DevTools, en la sección Servicios en segundo plano, para ayudar a depurar las reglas de especulación:

Pestañas de carga especulativa de Herramientas para desarrolladores de Chrome que muestran la regla de carga previa
Pestañas de carga especulativa de las Herramientas para desarrolladores de Chrome que muestran la regla de precarga

Hay tres pestañas disponibles en esta sección:

  • Cargas especulativas, que enumeran el estado renderizado previamente de la página actual.
  • Reglas, que muestra una lista de todos los conjuntos de reglas que se encuentran en la página actual.
  • Especulaciones, que muestra una lista de todas las URLs recuperadas y renderizadas previamente de los conjuntos de reglas.

En la captura de pantalla anterior, se muestra la pestaña Especulaciones, y podemos ver que esta página de ejemplo tiene un solo conjunto de reglas de especulación para la carga previa de 3 páginas. Dos de esas precargas se completaron correctamente y una falló. Puedes hacer clic en el ícono junto a Conjunto de reglas para ir a la fuente del conjunto de reglas en el panel Elementos. Como alternativa, puedes hacer clic en el vínculo Estado para ir a la pestaña Especulaciones filtrada según ese conjunto de reglas.

En la pestaña Especulaciones, se enumeran todas las URLs de destino, junto con la acción (precarga o renderización previa), de qué conjunto de reglas provienen (ya que puede haber varias en una página) y el estado de cada especulación:

La pestaña Especulaciones de las Herramientas para desarrolladores de Chrome muestra las URLs recuperadas previamente junto con su estado
Pestaña Speculations de las Herramientas para desarrolladores de Chrome que muestra las URLs recuperadas previamente junto con su estado

Sobre las URLs, se puede usar un menú desplegable para mostrar las URLs de todos los conjuntos de reglas o solo las URLs de un conjunto de reglas en particular. Debajo, se muestran todas las URLs. Si haces clic en una URL, obtendrás información más detallada.

En esta captura de pantalla, podemos ver el motivo del error de la página next3.html (que no existe y, por lo tanto, muestra un 404, que es un código de estado HTTP que no es 2xx).

En la pestaña de resumen, Cargas especulativas, se muestra un informe Estado de carga especulativa de esta página para indicar si se usó una carga previa o una renderización previa para esta página.

En el caso de una página recuperada previamente, deberías ver un mensaje de éxito cuando se navegue a esa página:

Pestaña Cargas especulativas de Herramientas para desarrolladores de Chrome que muestra una carga previa correcta
Pestaña Cargas especulativas de las Herramientas para desarrolladores de Chrome que muestra una carga previa correcta

Especulaciones sin coincidencias

Cuando se produce una navegación desde una página con reglas de especulación que no genera el uso de una carga previa o renderización previa, una sección adicional de la pestaña mostrará más detalles sobre por qué la URL no coincidió con ninguna de las URLs de especulación. Esto es útil para detectar errores tipográficos en tus reglas de especulación.

Pestaña Cargas especulativas de Chrome DevTools, que muestra cómo la URL actual no coincidía con ninguna de las URLs de las reglas de especulación de la página anterior
Las URLs que no coinciden se destacan en DevTools

Por ejemplo, aquí navegamos a next4.html, pero solo next.html, next2.html o next3.html son precargas, por lo que podemos ver que esto no coincide con ninguna de esas tres reglas.

Las pestañas Cargas especulativas son muy útiles para depurar las reglas de especulación y encontrar errores de sintaxis en el JSON.

En cuanto a las precargas, es probable que el panel Red sea un lugar más familiar. En el ejemplo de error de carga previa, puedes ver el error 404 de la carga previa aquí:

Panel Network de Chrome DevTools que muestra una carga previa fallida
Panel de red de las Herramientas para desarrolladores de Chrome que muestra un error de carga previa

Sin embargo, las pestañas Carga especulativa son mucho más útiles para las reglas de especulación de renderización previa, que se abordan a continuación.

Reglas de especulación para prerender

Las reglas de especulación de renderización previa siguen la misma sintaxis que las reglas de especulación de precarga. Por ejemplo:

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

Este conjunto de reglas activa una carga y renderización completas de las páginas especificadas (sujeto a ciertas restricciones). Esto puede proporcionar una experiencia de carga instantánea, aunque con costos de recursos adicionales.

Sin embargo, a diferencia de las cargas previas, no están disponibles para que se vean en el panel Red, ya que se recuperan y renderizan en un proceso de renderización independiente en Chrome. Esto hace que las pestañas Carga especulativa sean más importantes para depurar las reglas de especulación de renderización previa.

Cómo depurar prerender con las pestañas Cargas especulativas

Las mismas pantallas de cargas especulativas se pueden usar para las reglas de especulación de renderización previa, como se muestra con una página de demostración similar que intenta renderizar previamente, en lugar de recuperar previamente las tres páginas:

Las Herramientas para desarrolladores de Chrome cargan pestañas de forma especulativa para una página con reglas de especulación de renderización previa
Herramientas para desarrolladores de Chrome carga pestañas especulativas para una página con reglas de especulación de renderización previa

Aquí, nuevamente, vemos que no se pudo renderizar previamente una de las tres URLs. Los desarrolladores pueden obtener los detalles por URL en la pestaña Speculations haciendo clic en el vínculo 2 Ready, 1 Failure.

En Chrome 121, lanzamos la compatibilidad con las reglas de documentos. Esto permite que el navegador los recupere de los vínculos del mismo origen en la página, en lugar de enumerar un conjunto específico de URLs:

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

En este ejemplo, se seleccionan todos los vínculos del mismo origen, excepto los que comienzan con /not-safe-to-prerender, como candidatos para la renderización previa.

También establece el eagerness de renderización previa en moderate, lo que significa que las navegaciones se renderizan previamente cuando se coloca el cursor sobre el vínculo o se hace clic en él.

Hay reglas similares a esta en el sitio de demostración de reglas especulativas. Si usas la nueva sección Cargas especulativas en este sitio, se muestra la utilidad de esta nueva pestaña, ya que se enumeran todas las URLs aptas que el navegador encontró en la página:

Pestaña Especulaciones de las Herramientas para desarrolladores de Chrome con varias URLs que no se activaron
Pestaña Speculations de las Herramientas para desarrolladores de Chrome con varias URLs que no se activaron

El Estado es No activado porque aún no se inicia el proceso de renderización previa. Sin embargo, cuando colocamos el puntero sobre los vínculos, vemos que el estado cambia a medida que se renderiza previamente cada URL:

Pestaña Especulaciones de las Herramientas para desarrolladores de Chrome con páginas renderizadas previamente activadas
Pestaña Especulaciones de las Herramientas para desarrolladores de Chrome con páginas renderizadas previamente activadas

Chrome estableció límites en las renderizaciones previas, incluido un máximo de 2 renderizaciones previas para la solicitud anticipada de moderate, por lo que, después de colocar el cursor sobre el tercer vínculo, vemos el motivo del error de esa URL:

Pestaña Especulaciones de las Herramientas para desarrolladores de Chrome con cargas previas fallidas
Pestaña Speculations de las Herramientas para desarrolladores de Chrome con cargas previas fallidas

Cómo depurar prerender con los otros paneles de DevTools

A diferencia de la precarga, las páginas que se renderizaron previamente no aparecerán en los procesos de renderización actuales en los paneles de DevTools, como el panel Red, porque se renderizan en su propio renderizador en segundo plano.

Sin embargo, ahora es posible cambiar el renderizador que usan los paneles de DevTools con el menú desplegable en la parte superior derecha o seleccionando una URL en la parte superior del panel y Inspect:

Chrome DevTools ahora te permite cambiar los renderizadores para los que se muestra la información.
Las Herramientas para desarrolladores de Chrome ahora te permiten cambiar los renderizadores para los que se muestra la información.

Este menú desplegable (y el valor seleccionado) también se comparte en todos los demás paneles, como el panel Red, en el que puedes ver que la página que se solicita es la renderizada previamente:

Panel Network de Chrome DevTools que muestra las solicitudes de red para la página renderizada previamente
Panel de red de Chrome DevTools que muestra las solicitudes de red para la página renderizada previamente

Si observamos los encabezados HTTP de estos recursos, podemos ver que todos se establecerán con el encabezado Sec-Purpose: prefetch;prerender:

Panel Network de Chrome DevTools que muestra el encabezado Sec-Purpose de una página renderizada previamente
Panel de red de las Herramientas para desarrolladores de Chrome que muestra el encabezado Sec-Purpose de una página renderizada previamente

O bien el panel Elementos, en el que puedes ver el contenido de la página, como en la siguiente captura de pantalla, en la que vemos que el elemento <h1> es para la página renderizada previamente:

Panel Elements de Chrome DevTools para la página renderizada previamente
Panel Elements de Chrome DevTools para la página renderizada previamente

O bien el panel de la consola, en el que puedes ver los registros de la consola que emite la página renderizada previamente:

Panel de la consola de Chrome DevTools que muestra el resultado de la consola de una página renderizada previamente
Panel de la consola de Chrome DevTools que muestra el resultado de la consola de una página renderizada previamente

Cómo depurar reglas de especulación en la página renderizada previamente

En las secciones anteriores, se explica cómo depurar páginas renderizadas previamente en la página que inicia la renderización previa. Sin embargo, también es posible que las páginas renderizadas previamente proporcionen información de depuración, ya sea mediante llamadas a Analytics o a través del acceso a la consola (que se puede ver como se describe en la sección anterior).

Además, una vez que el usuario navegue a una página renderizada previamente y la active, la pestaña Cargas especulativas mostrará este estado y si se renderizó correctamente o no. Si no se pudo renderizar previamente, se proporciona una explicación de por qué ocurrió esto:

Pestaña Cargas especulativas de Herramientas para desarrolladores de Chrome que muestra una página renderizada previamente correcta y una incorrecta
Pestaña Cargas especulativas de Herramientas para desarrolladores de Chrome que muestra una página renderizada previamente correcta y una incorrecta

Además, como ocurre con las cargas previas, si navegas desde una página con reglas de especulación que no coinciden con la página actual, se intentará mostrarte por qué las URLs no coinciden con las que se incluyen en las reglas de especulación de la página anterior en la pestaña Carga especulativa:

Pestaña Cargas especulativas de Chrome DevTools que muestra la discrepancia de URL de la URL actual y las que abarca la página anterior
Herramientas para desarrolladores de Chrome que muestran las discrepancias de URL

Conclusión

En esta publicación, mostramos las diferentes formas en que los desarrolladores pueden depurar las reglas de especulación de precarga y renderización previa. El equipo sigue trabajando en las herramientas para las reglas de especulación y nos encantaría escuchar las sugerencias de los desarrolladores sobre otras formas que serían útiles para depurar esta nueva y emocionante API. Recomendamos a los desarrolladores que informen los errores o las solicitudes de funciones que encuentren en la herramienta de seguimiento de errores de Chrome.

Agradecimientos

Imagen en miniatura de Nubelson Fernandes en Unsplash.