Las reglas de especulación se pueden usar para cargar y renderizar de forma previa las navegaciones de la página siguiente, como se detalla en la publicación anterior. Esto puede permitir cargas de página 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.
Depurar las reglas de especulación puede ser complicado. Esto es especialmente cierto para las páginas renderizadas previamente, ya que se renderizan en un renderizador independiente, como una pestaña oculta en segundo plano que reemplaza a la pestaña actual cuando se activa. Por lo tanto, no siempre se pueden usar las opciones habituales de las Herramientas para desarrolladores para depurar problemas.
El equipo de Chrome ha estado trabajando arduamente para mejorar la compatibilidad de las Herramientas para desarrolladores con la depuración de las 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 las Herramientas para desarrolladores y cuándo no.
Explicación de los términos con el prefijo "pre-"
Hay muchos términos con el prefijo "pre-" que son confusos, por lo que comenzaremos con una explicación de estos:
- Carga previa: Cargar un recurso o documento con anticipación 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 recursos secundarios. - Renderización previa: Este proceso va un paso más allá de la carga previa y 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í. Nuevamente, este documento se refiere a 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 carga previa y renderización previa que activan las reglas de especulación.
- Precarga: Es un término sobrecargado que puede referirse a una serie de tecnologías y procesos, incluidos
<link rel="preload">, el analizador de precarga y las precargas de navegación de service workers. Estos elementos no se tratarán aquí, pero se incluye el término para diferenciarlos claramente del término "navegaciones especulativas".
Reglas de especulación para prefetch
Las reglas de especulación se pueden usar para realizar una carga previa del documento de la siguiente navegación. Por ejemplo, cuando se inserta el siguiente JSON en una página, se realiza la carga previa de next.html y next2.html:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
El uso de reglas de especulación para las precargas de navegación tiene algunas ventajas sobre la sintaxis <link rel="prefetch"> anterior, como una API más expresiva y el almacenamiento de los resultados en la caché de la memoria en lugar de la caché del disco HTTP.
Depura las reglas de especulación de prefetch
Las cargas previas activadas por las 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 con carga previa, como se puede ver en la columna Type. Estos se recuperan con 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:
Depura prefetch con las pestañas de carga especulativa
Se agregó una nueva sección Cargas especulativas en el panel Aplicación de las Herramientas para desarrolladores de Chrome, en la sección Servicios en segundo plano, para ayudar a depurar las reglas de especulación:
En esta sección, hay tres pestañas disponibles:
- Cargas especulativas, que muestra el estado de renderización previa de la página actual.
- Reglas, que enumera todos los conjuntos de reglas que se encuentran en la página actual, designados como URLs o etiquetas de reglas, si las hay.
- Speculations, que enumera todas las URLs recuperadas previamente y renderizadas previamente de los conjuntos de reglas.
La pestaña Especulaciones 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 cargar previamente 3 páginas. Dos de esas recuperaciones 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 Estado para ir a la pestaña Especulaciones filtrada para 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), el conjunto de reglas del que provienen (ya que puede haber varias en una página) y el estado de cada especulación:
Arriba de 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 de eso, 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 del error de la página next3.html (que no existe y, por lo tanto, devuelve un error 404, que es un código de estado HTTP que no es 2xx).
La pestaña de resumen, Cargas especulativas, muestra un informe de 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 cargada previamente, deberías ver un mensaje de éxito cuando se navegue a ella:
Especulaciones sin coincidencias
Cuando se produce una navegación desde una página con reglas de especulación que no genera una carga previa o una renderización previa, una sección adicional de la pestaña mostrará más detalles de 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.
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 falla de carga previa, puedes ver el error 404 de la carga previa aquí:
Sin embargo, las pestañas Cargas especulativas se vuelven mucho más útiles para las reglas de especulación de renderización previa, 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 de carga previa. Por ejemplo:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</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 solicitudes de carga previa, estas no se pueden ver 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 Cargas especulativas sean más importantes para depurar las reglas de especulación de renderización previa.
Depura prerender con las pestañas de cargas especulativas
Se pueden usar las mismas pantallas de Cargas especulativas para las reglas de especulación de renderización previa, como se muestra en una página de demostración similar que intenta renderizar de forma previa, en lugar de cargar previamente las tres páginas:
Aquí vemos nuevamente que una de las tres URLs no se renderizó previamente, y 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 recoja 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 prerenderizado eagerness en moderate, lo que significa que las navegaciones se prerenderizan cuando se coloca el cursor sobre el vínculo (en computadoras de escritorio), según el viewport (en dispositivos móviles) o cuando se hace clic en él.
Existen reglas similares a 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 elegibles que el navegador encontró en la página:
El Estado es No activado, ya que no se inició el proceso de renderización previa para estos elementos. Sin embargo, a medida que 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, incluido un máximo de 2 renderizaciones previas para el nivel de entusiasmo moderate, por lo que, después de colocar el cursor sobre el tercer vínculo, vemos el motivo del error para esa URL:
Depura prerender con los otros paneles de Herramientas para desarrolladores
A diferencia de las precargas, las páginas que se renderizaron previamente no aparecerán en los procesos de renderización actuales en los paneles de Herramientas para desarrolladores, 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 de la esquina superior derecha o seleccionando una URL en la parte superior del panel y, luego, Inspeccionar:
Este menú desplegable (y el valor seleccionado) también se comparte en todos los demás paneles, como el panel de Red, en el que puedes ver que la página que se solicita es la renderizada previamente:
Si observamos los encabezados HTTP de estos recursos, podemos ver que todos se configurarán con el encabezado Sec-Purpose: prefetch;prerender:
O 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:
O el panel 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 páginas renderizadas previamente proporcionen información de depuración, ya sea realizando llamadas de estadísticas o registrando en la consola (que se puede ver como se describe en la sección anterior).
Además, una vez que el usuario activa una página renderizada previamente navegando a ella, la pestaña Cargas especulativas mostrará este estado y si se renderizó previamente de forma correcta o no. Si no se pudo renderizar previamente, se proporciona una explicación de por qué ocurrió esto:
Además, como ocurre con las cargas previas, cuando navegues desde una página con reglas de especulación que no coincidan con la página actual, se intentará mostrarte por qué las URLs no coincidieron con las que se incluyen 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 las reglas de especulación de carga previa y renderización previa. El equipo sigue trabajando en las herramientas para las reglas de especulación, y nos encantaría recibir sugerencias de los desarrolladores sobre otras formas que serían útiles para depurar esta nueva y emocionante API. Recomendamos a los desarrolladores que planteen un problema en la herramienta de seguimiento de errores de Chrome para cualquier solicitud de función o error detectado.
Agradecimientos
Imagen en miniatura de Nubelson Fernandes en Unsplash.