Las reglas de especulación se pueden usar para precargar y renderizar previamente las navegaciones de páginas siguientes, como se detalla en la entrada anterior. De esta manera, se pueden cargar páginas mucho más rápido (o incluso instantánea), lo que mejora en gran medida las Métricas web esenciales para estas navegaciones de páginas adicionales.
Depurar las reglas de especulación puede ser complicado. Esto es particularmente cierto para las páginas renderizadas previamente, ya que se procesan en un procesador independiente, como una pestaña oculta en segundo plano que reemplaza la pestaña actual cuando se activa. Por lo tanto, las opciones habituales de Herramientas para desarrolladores no siempre se pueden usar para depurar problemas.
El equipo de Chrome ha trabajado arduamente para mejorar la compatibilidad de Herramientas para desarrolladores con la depuración de reglas de especulación. En esta publicación, verás las diversas 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 Herramientas para desarrolladores, y cuándo no.
Explicación de "pre-" términos
Hay muchas palabras clave “previos a” términos confusos, así que comenzaremos con una explicación de estos:
- Recuperación previa: Es la recuperación de un recurso o documento con anticipación para mejorar el rendimiento futuro. En esta publicación, se explica la carga previa de documentos con la API de Speculation Rules, en lugar de la opción
<link rel="prefetch">similar, pero antigua, que a menudo se usa para la carga previa de subrecursos. - Renderización previa: Es un paso más allá de la carga previa y, en realidad, procesa toda la página como si el usuario hubiera navegado a ella, pero la mantiene en un proceso oculto de procesador en segundo plano listo para usar si el usuario realmente navega hasta allí. Nuevamente, este documento se refiere a la versión más reciente de la API de Speculation Rules, en lugar de a la opción
<link rel="prerender">anterior (que ya no realiza una renderización previa completa). - Navigational Speculations: el término colectivo para las nuevas opciones de carga previa y renderización previa que activan las reglas de especulación
- Precarga: Es un término sobrecargado que puede hacer referencia a varias tecnologías y procesos, incluidos
<link rel="preload">, el análisis de precarga y las precargas de navegación de service worker. Estos puntos no se tratarán aquí, pero se incluye el término para diferenciarlos claramente de las "especulaciones de navegación" tiempo.
Reglas de especulación para prefetch
Se pueden usar reglas de especulación para cargar previamente el documento de la siguiente navegación. Por ejemplo, cuando se inserta el siguiente JSON en una página, next.html y next2.html se cargarán previamente:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
El uso de reglas de especulación para las cargas previas de navegación tiene algunas ventajas en comparación con la sintaxis <link rel="prefetch"> anterior, como una API más expresiva y el almacenamiento de resultados en la memoria caché en lugar de la caché de disco HTTP.
Depurar reglas de especulación prefetch
Las cargas previas activadas por reglas de especulación se pueden ver en el panel Red de la misma manera que otras recuperaciones:
Las dos solicitudes destacadas en rojo son los recursos cargados previamente, como se puede ver en la columna Type. Se recuperan con prioridad Lowest como para navegaciones futuras, y Chrome prioriza los recursos de la página actual.
Cuando haces clic en una de las filas, también se muestra el encabezado HTTP Sec-Purpose: prefetch, que es la forma en que se pueden identificar estas solicitudes en el servidor:
Depura prefetch con las pestañas Carga especulativa
Se agregó una nueva sección de Cargas especulativas en el panel Aplicación de Herramientas para desarrolladores de Chrome, en la sección Servicios en segundo plano, para ayudar a depurar reglas de especulación:
Hay tres pestañas disponibles en esta sección:
- Cargas especulativas, que enumera el estado renderizado previamente de la página actual.
- Reglas, que enumera todos los conjuntos de reglas que se encuentran en la página actual.
- Especulaciones, que enumera todas las URLs precargadas y renderizadas previamente de los conjuntos de reglas.
La pestaña Speculations se muestra en la captura de pantalla anterior, 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 cargas previas se realizaron correctamente y una falló. Puedes hacer clic en el ícono junto al 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 Status para ir a la pestaña Speculations filtrada de ese conjunto de reglas.
En la pestaña Speculations, se enumeran todas las URLs de destino, junto con la acción (carga previa o renderización previa), de qué conjunto de reglas provienen (ya que puede haber más de una en una página) y el estado de cada especulación:
Arriba de las URLs, se puede utilizar un menú desplegable para mostrar las URLs de todos los conjuntos de reglas o solo las URLs de un conjunto de reglas específico. Debajo se enumeran 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 de la falla 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, Speculative Workloads, se muestra un informe del Estado de carga especulativa de esta página en el que se muestra si se usó una carga previa o una renderización previa para esta página.
En el caso de una página con carga previa, deberías ver un mensaje de éxito cuando se navega a esa página:
Especulaciones inigualables
Cuando ocurre una navegación desde una página con reglas de especulación que no generan el uso de una carga previa o una renderización previa, una sección adicional de la pestaña mostrará más detalles sobre por qué la URL no coincide con ninguna de las URLs de especulación. Esto es útil para detectar errores tipográficos en tus reglas de especulación.
Por ejemplo, aquí navegamos a next4.html, pero solo next.html, next2.html o next3.html son cargas previas, por lo que podemos ver que no coincide con ninguna de esas tres reglas.
Las pestañas de Cargas especulativas son muy útiles para depurar las reglas de especulación en sí y encontrar errores de sintaxis en el JSON.
En cuanto a las cargas previas en sí, el panel Network probablemente sea un lugar más familiar. Para el ejemplo de falla de carga previa, puedes ver el error 404 de la carga previa aquí:
Sin embargo, las pestañas Cargas especulativas son mucho más útiles para la renderización previa de las reglas de especulación, que se analizan 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 con carga previa. Por ejemplo:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Este conjunto de reglas activa una carga completa y la renderización 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 solicitudes previas, no están disponibles para verse en el panel Red, ya que se recuperan y se renderizan en un proceso de renderización independiente en Chrome. Esto hace que las pestañas Cargas especulativas sean más importantes para depurar las reglas de especulación en la renderización previa.
Depura prerender con las pestañas Cargas especulativas
Se pueden usar las mismas pantallas de cargas especulativas para las reglas de especulación de renderización previa, como se demuestra con una página de demostración similar que intenta realizar la renderización previa, en lugar de realizar una carga previa de las tres páginas:
Aquí vemos una vez más que una de las tres URLs no se pudo renderizar previamente, y los desarrolladores pueden obtener los detalles de cada URL en la pestaña Speculations mediante el vínculo 2 Ready, 1 Failure.
En Chrome 121, lanzamos la compatibilidad con reglas de documentos. Esto permite que el navegador los recoja de los vínculos de origen del mismo en la página, en lugar de enumerar un conjunto específico de URL:
<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 de origen, excepto los que comienzan con /not-safe-to-prerender, como candidatos de 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 como esta en el sitio de demostración de reglas especulativas, y el uso de la nueva sección Cargas especulativas en este sitio muestra la utilidad de esta nueva pestaña, ya que se enumeran todas las URLs aptas que el navegador encontró en la página:
El Estado es No activado porque no comenzó el proceso de renderización previa. Sin embargo, mientras mantenemos el puntero sobre los vínculos, vemos que el estado cambia a medida que se renderiza previamente cada URL:
Chrome estableció límites para las renderizaciones previas, lo que incluye un máximo de 2 renderizaciones previas para el nivel de atención de moderate, por lo que, después de colocar el cursor sobre el tercer vínculo, vemos el motivo de la falla de esa URL:
Depura prerender con los otros paneles de Herramientas para desarrolladores
A diferencia de las cargas previas, las páginas que se renderizaron previamente no aparecerán en los procesos actuales de renderización en los paneles de Herramientas para desarrolladores como el panel Red, ya que se procesan en su propio procesador en segundo plano.
Sin embargo, ahora es posible cambiar el procesador que usan los paneles de Herramientas para desarrolladores con el menú desplegable en el menú desplegable de la parte superior derecha o seleccionando una URL en la parte superior del panel y seleccionando Inspeccionar:
Este menú desplegable (y el valor seleccionado) también se comparte en todos los demás paneles, como el panel Network, en el que puedes ver que la página que se solicita es la que se renderiza previamente:
Si observamos los encabezados HTTP de estos recursos, podemos ver que todos se configurarán con el encabezado Sec-Purpose: prefetch;prerender:
También puedes ver el panel Elements, en el que puedes ver el contenido de la página, como en la siguiente captura de pantalla, en la que se ve que el elemento <h1> corresponde a la página renderizada previamente:
También puedes ver el Panel de la consola, en el que puedes ver los registros de la consola que emite la página renderizada previamente:
Depura las reglas de especulación en la página renderizada previamente
En las secciones anteriores, se analiza 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 propias páginas renderizadas previamente proporcionen información de depuración, ya sea a través de llamadas de estadísticas o de acceso a la consola (que se puede ver como se describe en la sección anterior).
Además, una vez que el usuario que navega hacia ella active una página renderizada previamente, en la pestaña Speculative Workloads se mostrará este estado y se mostrará este estado y si se realizó correctamente o no la renderización previa. Si no se pudo realizar la renderización previa, se proporciona una explicación del motivo:
Además, como en el caso de las cargas previas, la navegación desde una página con reglas de especulación que no coincidían con la página actual intentará mostrarte por qué las URLs no coincidían con las cubiertas en las reglas de especulación de la página anterior en la pestaña Cargas especulativas:
Conclusión
En esta publicación, mostramos las distintas formas en que los desarrolladores pueden depurar reglas de especulación de carga previa y renderización previa. El equipo continúa trabajando en herramientas para las reglas de especulación, y nos encantaría recibir sugerencias de los desarrolladores sobre las otras formas que serían útiles para depurar esta nueva y emocionante API. Alentamos a los desarrolladores a informar cualquier problema en la Herramienta de seguimiento de errores de Chrome cuando se detecten errores o solicitudes de funciones.
Agradecimientos
Imagen de pulgar de Nubelson Fernandes en Unsplash.