Mejora el rendimiento de carga de la página siguiente

Funciones web: Reglas de especulación

Una de las formas más eficaces de mejorar el rendimiento de la carga de página para los usuarios que navegan por un sitio es iniciar la carga de la siguiente página que están por visitar antes de que la visiten. Esto se puede hacer con una técnica llamada carga especulativa con la API de Speculation Rules.

Cómo funciona

La carga especulativa funciona con reglas de especulación basadas en JSON para indicarle al navegador qué vínculos se pueden recuperar o renderizar previamente, lo que mejora el rendimiento de la carga de la página cuando el usuario hace clic en ellos.

Las reglas pueden ser una lista de URLs codificadas con una clave urls (conocida como regla de lista) o con una clave where que contenga un conjunto de selectores href y CSS que se usan para encontrar vínculos en la página (conocida como regla document).

Las reglas también pueden incluir una propiedad eagerness opcional que especifique cuándo se debe realizar la carga previa o la renderización previa de la página. La propiedad eagerness se puede establecer en immediate, eager, moderate o conservative. immediate especula lo antes posible, mientras que los demás esperan las señales del usuario, como colocar el cursor sobre un elemento durante un período breve, durante un período más largo o comenzar a hacer clic en la página, respectivamente.

Las reglas se pueden combinar con diferentes parámetros de configuración de eagerness para realizar la carga previa con eagerness y, luego, la renderización previa cuando el usuario interactúa más.

Cuándo se utiliza

La carga especulativa es especialmente útil para las páginas estáticas, en las que es poco probable que el contenido cambie con frecuencia y en las que las páginas son más económicas de producir, en especial si se almacenan en caché en el perímetro. También se puede usar para páginas dinámicas, pero es importante tener cuidado con la posibilidad de que el contenido esté desactualizado.

La carga especulativa se suele usar para vínculos del mismo origen, aunque las opciones más avanzadas permiten cierta especulación de origen cruzado. Esta guía se enfoca en el caso de uso más común de mismo origen.

La carga especulativa más rápida es una buena opción para las páginas que es probable que se visiten a continuación, como un artículo de titular o la siguiente página de un proceso por pasos, como un curso de aprendizaje.

La carga especulativa menos ansiosa es una buena opción cuando es menos obvio lo que hará el usuario a continuación, cuando hay muchos vínculos en la página y cada uno tiene la misma probabilidad de ser visitado. Si esperas más indicadores, como colocar el cursor sobre la página o comenzar a hacer clic en ella, puedes obtener una ventaja en la página siguiente y mejorar la experiencia del usuario, incluso si no se recupera o renderiza previamente por completo.

Del mismo modo, la carga previa es una opción más conservadora que la renderización previa, ya que usa menos recursos (tanto en el cliente como en el servidor), pero proporciona menos beneficios al usuario. Es una buena opción para la implementación inicial, ya que se expande a la renderización previa más adelante, cuando el desarrollador lo solicita de forma explícita.

Instrucciones de uso

Las reglas de especulación tienen un formato basado en JSON y se pueden incluir en una etiqueta <script type="speculationrules">. Las reglas se pueden incluir en el <head> o el <body> del documento, o bien se pueden agregar de forma dinámica con JavaScript.

También se puede usar un tag, ya sea a nivel global o por regla. Cuando se establece, esta etiqueta se incluye en el encabezado Sec-Speculation-Tags y te permite identificar del lado del servidor qué especulaciones se realizaron.

Ejemplo de una regla de lista de URLs simple para la carga previa de URLs predefinidas

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

Ejemplo de una regla de documento simple para renderizar previamente todos los vínculos del mismo origen en una página

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

Ejemplo de un conjunto de reglas mixto

En este ejemplo, se muestra un conjunto de reglas que realiza la carga previa de todos los vínculos de forma inmediata y, luego, va más allá para renderizar previamente esos mismos vínculos cuando obtiene más indicadores con un nivel de urgencia moderate.

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Prácticas recomendadas

  • SÍ usa reglas de especulación para cargar y renderizar de forma previa las páginas que es probable que el usuario visite a continuación.
  • SÍ usa reglas de especulación para sitios estáticos, en los que es poco probable que el contenido cambie con frecuencia y en los que las páginas son más económicas de producir, en especial si se almacenan en caché en el perímetro.
  • SÍ ten más cuidado cuando uses reglas de especulación para páginas dinámicas, en las que es más probable que el contenido cambie con frecuencia, pueda quedar desactualizado y en las que las páginas sean más costosas de producir.
  • SÍ prefiere las reglas de documento a las reglas de lista, ya que son más flexibles, permiten compartir la misma regla en varias páginas y se pueden usar para realizar la carga previa y la renderización previa de páginas que no se conocen de antemano.
  • SÍ considera las ventajas y desventajas entre la carga previa y la renderización previa, y elige la opción adecuada para tu caso de uso. La renderización previa es más costosa que la carga previa y puede causar más efectos secundarios no deseados en aplicaciones complejas que muestran un estado dinámico, pero proporciona una mejor experiencia del usuario. Si no tienes certeza, pregúntale al desarrollador cuál es su preferencia.
  • SÍ considera las ventajas y desventajas de los diferentes niveles de eagerness y elige el adecuado para tu caso de uso. Una especulación más ansiosa proporciona una mejor experiencia del usuario, pero usa más recursos y puede causar más efectos secundarios no deseados en aplicaciones complejas que muestran un estado dinámico. Si no estás seguro, pregúntale al desarrollador cuál prefiere.
  • NO uses en exceso las reglas de especulación, por ejemplo, para especular cada vínculo de la página. Los navegadores tienen límites (2 especulaciones para las especulaciones no ansiosas). immediate solo se debe usar para una cantidad muy pequeña de vínculos.
  • NO especules con URLs que puedan activar cambios de estado, como /logout o /add-to-cart, y exclúyelas de forma explícita de tus reglas de especulación si es probable que se incluyan en las reglas de documentos.
  • NO uses reglas de especulación en aplicaciones de una sola página (SPA). Las reglas de especulación están diseñadas para aplicaciones de varias páginas (MPA) en las que el navegador navega a un documento nuevo en cada navegación. En las SPA, el navegador no navega a un documento nuevo en cada navegación, por lo que las reglas de especulación no funcionarán como se espera.

Compatibilidad con navegadores y estrategias de resguardo

Sin embargo, la carga especulativa es una mejora progresiva. Es completamente seguro usarlo como mejora y se recomienda mucho debido a los posibles beneficios de rendimiento. Si un navegador no admite las reglas de especulación, simplemente las ignorará.