Hoy en día, las páginas web están repletas de imágenes, vídeos y elementos interactivos que pretenden mejorar la experiencia del usuario. Sin embargo, estos elementos pueden ralentizar el tiempo de carga de tu página.
A medida que la tecnología avanza, un objetivo permanece constante: el rendimiento. Todo el mundo espera que sus páginas web se carguen a la velocidad del rayo.
Una forma de hacer que las páginas web se carguen más rápido es prerrenderizarlas o precargarlas antes de que el usuario navegue hasta ellas.
Breve historia del prerrenderizado
En 2011, el equipo de Chromium introdujo una primera forma de prerrenderización en el navegador Chrome mediante la etiqueta <link rel="prerender" … >.
Esto permitía a los desarrolladores indicar a los navegadores qué página(s) visitaría el usuario a continuación. Entonces, el navegador buscaba y procesaba silenciosamente estas páginas en segundo plano, reduciendo drásticamente el tiempo de carga cuando el usuario navegaba a esas páginas.
A pesar de sus ventajas, esta primera implementación del prerrenderizado utilizaba mucho ancho de banda y recursos de CPU y podía dar lugar a problemas de privacidad si el usuario no visitaba las páginas prerrenderizadas. Además, tenías que seleccionar manualmente qué enlaces prerrenderizar, lo que no siempre era eficaz o factible.
Para solucionar algunos de estos problemas, Chrome dejó de utilizar el prerrenderizado mediante la sugerencia de enlace rel=prerender en favor del método NoState Prefetch, que consistía en obtener recursos para una página sin ejecutar JavaScript ni otras acciones potencialmente invasivas de la privacidad.
El método NoState Prefetch mejoraba la carga de recursos, pero no podía ofrecer una carga instantánea de la página, como un prerrenderizado completo.
Presentación de la API Speculation Rules
La API Speculation Rules es una nueva API experimental definida por JSON que precarga especulativamente las URL antes de navegar hacia ellas, lo que permite tiempos de renderizado más rápidos y mejores experiencias de usuario.
La API permite a los desarrolladores configurar reglas con una estructura definida en formato JSON dentro de un script type="speculationrules" que el navegador puede utilizar para decidir qué URLs deben ser prerrenderizadas.
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["firstpage.html", "secondpage.html"]
}
]
}
</script>Lo mismo se aplica a la precarga, que a menudo puede ser un buen primer paso en el camino hacia el prerrenderizado:
<script type="speculationrules">
{
"prefetch": [
{
"urls": ["firstpage.html", "secondpage.html"]
}
]
}
</script>Los fragmentos de código anteriores muestran cómo funcionaba la API Speculation Rules, especificando una lista de URLs que prefijar o prerrenderizar.
Recientemente, Google anunció nuevas mejoras en la API Speculation Rules, que ahora ofrece la opción de búsqueda automática de enlaces mediante reglas de documentos. Esto funciona obteniendo URLs del documento basándose en una condición where.
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"href_matches": "/*"
},
{
"not": {
"href_matches": [
"/wp-login.php",
"/wp-admin/*"
]
}
}
]
},
"eagerness": "moderate"
}
]
}
</script>En este fragmento de código, todas las URL de la página se tienen en cuenta para el prerrenderizado, excepto las que llevan a las páginas de administración e inicio de sesión de WordPress. También puedes especificar un nivel de eagerness — eager (inmediatamente), moderate (al pasar el ratón 200 ms) y conservative (al pasar el ratón o tocar el botón).
Los selectores CSS también se pueden utilizar como alternativa o junto con, las coincidencias href para encontrar enlaces en la página actual:
<script type="speculationrules">
{
"prerender": [{
"source": "document",
"where": {
"and": [
{ "selector_matches": ".prerender" },
{ "not": {"selector_matches": ".do-not-prerender"}}
]
},
"eagerness": "moderate"
}]
}
</script>Cuando utilices la API Speculation Rules, puedes inspeccionarla utilizando los servicios en segundo plano de Speculative loads en la pestaña Aplicación de Chrome al inspeccionar la página.
Hay más cosas — las exploraremos en la sección de depuración.
Compatibilidad con navegadores
La API Speculation Rules está soportada en los navegadores modernos basados en Chromium, incluidos Chrome y Edge, a partir de versiones específicas.
Esto garantiza que los usuarios de los navegadores compatibles puedan beneficiarse de tiempos de carga más rápidos, mientras que los de otros navegadores no experimentarán ningún efecto negativo, ya que la API es una herramienta de mejora progresiva.
El plugin de WordPress Speculative Loading
Para disfrutar de las ventajas de la API Speculation Rules en WordPress, el equipo de rendimiento de WordPress (que incluye desarrolladores de Google) ha publicado recientemente el plugin Speculative Loading. Este plugin permite la carga especulativa de las URLs del frontend enlazadas en la página.
Hasta ahora, el plugin no ha tenido mucha aceptación, ya que la API aún está en su fase inicial, pero ha recibido algunas reviews positivas.
Por defecto, el plugin está configurado para prerrenderizar las URLs del frontend de WordPress cuando el usuario pasa el ratón por encima de un enlace relevante. Esto puede personalizarse a través de la sección Speculative Loading en Settings > Reading.
Esto significa que cualquier URL enlazada en la página se prerrenderiza con una configuración eagerness moderate, que normalmente se activa al pasar el ratón por encima de un enlace. Por lo tanto, no tienes que hacer nada después de activar el plugin; simplemente funciona.
Por ejemplo, si ya has instalado el plugin Speculative Loading en un sitio de WordPress. Utiliza las DevTools de Chrome para inspeccionar el sitio y haz clic en la pestaña Elements. Cuando te desplaces hacia abajo, verás que ya se te ha añadido un script type="speculationrules" con las distintas reglas de Especulación.
Utiliza un Regex para especificar los enlaces que deben prerrenderizarse, especifica los enlaces que no deben prerrenderizarse y establece el eagerness. Las siguientes secciones explican estas reglas en detalle.
Límites para evitar el uso excesivo
Chrome dispone de límites para evitar el uso excesivo de la API:
| Eagerness | Precarga | Prerrenderizado |
| immediate/eager | 50 | 10 |
| moderate/conservative | 2 (FIFO) | 2 (FIFO) |
Evitan el uso excesivo mediante varios ajustes basados en la urgencia y la interacción del usuario.
immediateyeager— No dependen de las acciones del usuario, por lo que tienen límites más altos. Permiten ajustes dinámicos de capacidad mediante la eliminación de especulaciones antiguas.moderateyconservative— Por el contrario, estos ajustes son activados por el usuario y se adhieren a un principio FIFO (First In, First Out, Primero en Entrar, Primero en Salir) con un tope de 2, sustituyendo las especulaciones más antiguas por otras nuevas para conservar la memoria.
Evitar que ciertas URLs se precarguen y prerendericen
Es importante tener en cuenta que las rutas WP-admin están excluidas del prerenderizado y de la precarga por defecto. Como desarrollador de WordPress, depende de ti determinar las rutas a las que quieres dar prioridad.
Puedes personalizar las reglas sobre qué tipo de URLs precargar de forma especulativa utilizando el filtro plsr_speculation_rules_href_exclude_paths.
El siguiente ejemplo de código garantiza que las URL como https://wordpresssite.com/cart/ o https://wordpresssite.com/cart/book/ queden excluidas de la precarga y la prerrenderización:
<?php
add_filter(
'plsr_speculation_rules_href_exclude_paths',
function ( $exclude_paths ) {
$exclude_paths[] = '/cart/*';
return $exclude_paths;
}
);A veces, puede que quieras excluir una URL del prerenderizado y permitir que se precargue. Por ejemplo, una página con JavaScript del lado del cliente para actualizar el estado del usuario probablemente no debería prerenderizarse, pero sería razonable que se precargara.
Para ello, el filtro plsr_speculation_rules_href_exclude_paths recibe el modo activo (ya sea prefetch o prerender) para proporcionar exclusiones condicionales.
Por ejemplo, asegurémonos de que URLs como https://wordpresssite.com/products/ no puedan ser prerenderizadas, permitiendo al mismo tiempo que sean precargadas.
<?php
add_filter(
'plsr_speculation_rules_href_exclude_paths',
function ( array $exclude_paths, string $mode ): array {
if ( 'prerender' === $mode ) {
$exclude_paths[] = '/products/*';
}
return $exclude_paths;
}
);Depuración de reglas de especulación para sitios de WordPress
Depurar las reglas de especulación puede ser complicado, ya que las páginas prerrenderizadas se renderizan en un renderizador independiente — como una pestaña oculta en segundo plano que sustituye a la pestaña actual cuando se activa. El equipo de Chrome ha trabajado mucho con las DevTools, permitiéndote depurar con ellas.
En Chrome DevTools, ve a la pestaña Applications y luego desplázate hacia abajo hasta la pestaña Speculative loads. Esto proporciona a los desarrolladores detalles sobre la Especulación, las URL prerrenderizadas, las que fallan y mucho más.
Aquí, ves que cinco enlaces de la página pueden prerrenderizarse en función de las URL que coincidan con las reglas establecidas en el JSON de reglas especulativas, como se ve a continuación. Observa que no es necesario enumerar todas las URL; las reglas del documento permiten al navegador recogerlas de los mismos enlaces de origen de la página.
El «Estado» de algunos enlaces es » Not triggered» — no se ha iniciado el proceso de prerrenderización. Sin embargo, al pasar el ratón por encima de los enlaces de la página, vemos que el estado cambia a medida que se prerrenderiza cada URL.
Recuerda que Chrome ha establecido límites en las prerrenderizaciones, incluyendo un máximo de dos prerrenderizaciones para el eagerness moderate, por lo que tras pasar el ratón por encima del tercer enlace, vemos el motivo del fallo para esa URL:
También es posible cambiar el renderizador utilizado por los paneles DevTools con el menú desplegable de la parte superior derecha o seleccionando una URL en la parte superior del panel y seleccionando Inspect:
Este menú desplegable (y el valor seleccionado) se comparte con todos los demás paneles, como el panel Network, donde puedes ver que la página que se está solicitando es la prerrenderizada:
O en el panel Elements, donde puedes ver el contenido de la página:
Al igual que puedes depurar las páginas prerenderizadas, también puedes precargar páginas. Para el plugin «Speculative loading», asegúrate de seleccionar Prefetch como Speculation Mode.
Ahora, cuando inspecciones la página con DevTools y navegues hasta la pestaña Speculative loads, la Acción será Prefetch para las distintas URL, y las reglas también cambiarán.
Cuando navegas a la pestaña Network después de pasar el ratón por un enlace, los recursos precargados se muestran en último lugar, como puede verse en la columna Type. Se obtienen con la prioridad más baja, ya que son para futuras navegaciones, y Chrome da prioridad a los recursos de la página actual.
Comparación del rendimiento
Hasta ahora, ya sabes qué hace y cómo funciona el plugin «Speculative Loading». Basta de teoría; comparemos el rendimiento de dos sitios idénticos en el mismo servidor (el Alojamiento de WordPress de Kinsta).
Para ello, he creado dos sitios de WordPress con el panel de control MyKinsta en el mismo centro de datos (Iowa (US Central), que está impulsado mediante las máquinas virtuales C3D de Google) y sin instalar ningún otro plugin para ambos sitios.
El sitio «Bare-site» está sin el plugin, mientras que para el «Speculative-site», el plugin «Speculative Loading» está instalado y activado en el panel de control de WordPress.
Es importante saber que la API Speculative Rules sólo mejora el tiempo que tarda en cargar la siguiente página por la que vas a navegar — no puedes juzgar esto basándote en herramientas genéricas de rendimiento de sitios como Lighthouse.
Nosotros probaríamos la velocidad de la página cargando una página desde un enlace interno específico en los dos sitios web y utilizando la pestaña Network de Chrome DevTool cuando inspecciones el sitio para ver el tiempo de carga y otra información.
En el caso del «Bare-site», notarás que tarda más en cargarse, ya que todo el proceso de carga se está produciendo sobre la marcha, y el contenido DOM se está cargando:
Pero en el caso del «Speculative-site», el contenido del DOM ya se ha cargado a través de la API especulativa y se ha almacenado en caché.
La diferencia entre ambos sitios puede parecer muy pequeña. En este caso, la diferencia es de unos 0,22 s, pero para un sitio grande con más contenido, se empieza a notar una diferencia significativa.
Impacto de la API Speculation Rules en las analíticas
Las analíticas son esenciales para hacer un seguimiento del uso del sitio web a través de las páginas vistas y los eventos, y para evaluar el rendimiento mediante la Monitorización de Usuarios Reales (RUM, Real User Monitoring). Es importante saber que la prerrenderización puede afectar a las analíticas.
Por ejemplo, utilizar la API Speculation Rules puede requerir código adicional para activar las analíticas sólo cuando se acceda realmente a las páginas prerrenderizadas. Aunque Google Analytics, Google Publisher Tag (GPT) y Google AdSense retrasan el seguimiento hasta que una página está activa, no todos los proveedores lo hacen por defecto.
Para manejar esto, se puede configurar una Promesa para inicializar las analíticas sólo al activar la página:
// Promise to activate analytics on page activation for prerendered pages
const whenActivated = new Promise((resolve) => {
if (document.prerendering) {
document.addEventListener('prerenderingchange', resolve);
} else {
resolve();
}
});
async function initAnalytics() {
await whenActivated;
// Initialize analytics
}
initAnalytics();Resumen
Este artículo explica qué es la API Speculative Rules, cómo funciona y cómo puedes utilizarla en un sitio de WordPress. Todavía es una función experimental, pero poco a poco está consiguiendo una adopción masiva.
Las reglas especulativas aún están limitadas a páginas dentro de la misma pestaña, pero se está trabajando para reducir estas restricciones.
También es importante saber que una parte importante del rendimiento de tu sitio depende de la calidad de tu alojamiento. En Kinsta, somos conocidos por ofrecer Alojamiento de WordPress premium con docenas de funciones premium.
Nuestra infraestructura está totalmente contenedorizada y alimentada exclusivamente por Google Cloud Platform en la red de Nivel Premium de Google, lo que nos permite ofrecerte una amplia selección de los servidores de datos más rápidos, un rendimiento increíble, almacenamiento en caché a nivel de servidor, recursos dedicados y seguridad mejorada.
Echa un vistazo a lo que dicen nuestros clientes, o ponte en contacto con nosotros para saber más sobre nuestra solución de alojamiento administrado y cómo destaca.
¿Qué opinas sobre la API Speculative Rules y su introducción en WordPress? ¡Compártelo en los comentarios más abajo!
Deja una respuesta