Cómo la carga especulativa mejora la velocidad de la página en los sitios web de WordPress

Hoy en día, las páginas web están llenas de imágenes, vídeos y elementos interactivos diseñados para mejorar la experiencia del usuario. Sin embargo, estos elementos pueden ralentizar el tiempo de carga de una página web. Aunque la tecnología siempre está mejorando, hay un objetivo que permanece constante: el rendimiento. Todo el mundo quiere 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 pre-renderizarlas o pre-cargarlas antes de que el usuario las vea.

Breve historia del pre-renderizado

En 2011, el equipo de Chromium introdujo las pestañas en Chrome como medio dePrimeras formas de prerrenderizado<link rel="prerender" … >.

De este modo, el desarrollador puede avisar al navegador de las páginas que el usuario probablemente visitará a continuación. A continuación, el navegador recupera y renderiza silenciosamente estas páginas en segundo plano, lo que reduce enormemente el tiempo de carga cuando el usuario las visualiza.

A pesar de sus ventajas, esta función de pre-renderización temprana consume mucho ancho de banda y recursos de CPU, y puede dar lugar a problemas de privacidad si los usuarios no visitan las páginas pre-renderizadas. Además, hay que seleccionar manualmente los enlaces que se van a pre-renderizar, lo que no siempre es eficiente o factible.

Para solucionar algunos de estos problemas, Chrome ha obviado el uso de enlaces a la páginarel=prerenderLa prerrenderización de las pistas, a favor de laNoState Prefetch El método NoState Prefetch mejora la carga de recursos, pero no proporciona una carga instantánea de la página como el pre-renderizado completo.

Introducción a la API de reglas especulativas

API de reglas especulativases una nueva API experimental definida por JSON que precarga especulativamente las URL antes de navegar hacia ellas, reduciendo el tiempo de renderizado y mejorando la experiencia del usuario.

La API permite a los desarrolladores configurar reglas utilizando estructuras definidas en formato JSON.script type="speculationrules"El navegador puede utilizar esta estructura para determinar qué URLs deben ser pre-renderizadas.

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

Lo mismo ocurre con la precarga, que suele ser el primer paso de la renderización previa:

<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script>

El fragmento de código anterior muestra cómo funciona la API de reglas especulativas especificando una lista de URL que se van a precargar o preprocesar. Recientemente, Google anunció laUna nueva mejora de la API de reglas especulativas proporciona ahora la funciónOpción para encontrar enlaces automáticamente utilizando las reglas del documento. Esto se hace mediante la obtención de la URL del documento basado en los criteriosdonde.

<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 pre-renderizado, excepto las que apuntan a las páginas de inicio de sesión y de administración de WordPress. también puede especificar el nivel deimpaciencia– ansioso(Inmediatamente),moderado(200 milisegundos) yconservador(Ratón o al tocar el suelo).

CSSLos selectores también pueden utilizarse como alternativa o en combinación con los partidoshrefSe utiliza 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 se utiliza la API de reglas de presunción, puede utilizar Chrome para comprobar la página cuando se debeCompruébelo con el servicio en segundo plano "Carga especulativa" en la pestaña Programas.

Aún hay más, que veremos en la sección de depuración.

Compatibilidad con navegadores

A partir de ciertas versiones, los navegadores modernos basados en Chromium (incluidos Chrome y Edge)Ambas son compatibles con la API de reglas especulativas.

Dado que la API es una mejora incremental, garantiza que los usuarios con navegadores compatibles se beneficien de tiempos de carga más rápidos, mientras que los usuarios con otros navegadores no se ven afectados negativamente en modo alguno.

Carga especulativa Plugin de WordPress

Para aprovechar la API de reglas especulativas de WordPress, la funciónEquipo de rendimiento de WordPress (incluidos desarrolladores de Google) han publicado recientemente elPlug-ins presumiblemente cargados. El plugin permite inferir la URL front-end del enlace en la página cargada.

Hasta ahora, el plugin ha tenido un bajo índice de adopción debido a que la API aún está en sus primeras fases, pero ha cosechado algunas críticas favorables.

Por defecto, el plugin está configurado para presentar previamente la URL del front-end de WordPress cuando el usuario pasa el ratón por encima del enlace correspondiente.establecer >lea inferiorPresumiblemente cargadopara la personalización.

Esto significa que cualquier URL enlazada en la página utilizará la extensiónimpacienciaconfiguración de la renderización previamoderadoEsta configuración suele activarse al pasar el ratón por encima de un enlace. Por lo tanto, no es necesario realizar ninguna acción después de activar el plugin;Funciona nada más sacarlo de la caja..

Por ejemplo, si ya ha instalado elCarga especulativaPlugin. Utilice Chrome DevTools para inspeccionar el sitio y haga clic en el botónElementos Pestaña. Al desplazarse hacia abajo, observe que la pestaña que se hascript type="speculationrules"Añadidas varias reglas especulativas para usted.

Utiliza Regex para especificar los enlaces que deben ser pre-renderizados, para especificar los enlaces que no deben ser pre-renderizados y para establecer el nivel de impaciencia. Estas reglas se explican con más detalle a continuación.

Impedir que determinadas URL se precarguen y prepresenten

Tenga en cuenta que, por defecto, el WP-adminEl enrutamiento se excluye del pre-renderizado y del prefetching. ComoDesarrollador de WordPresspueden decidir qué rutas quieren priorizar.

Puede utilizar elplsr_speculation_rules_href_exclude_pathsEl filtro personaliza las reglas para deducir el tipo de URL que se precargan.

El siguiente ejemplo de código garantiza que la URL sea similarhttps://wordpresssite.com/cart/tal vezhttps://wordpresssite.com/cart/book/quedarán excluidas de la precarga y el prerenderizado:

<?php

add_filter(
    'plsr_speculation_rules_href_exclude_paths',
    function ( $exclude_paths ) {
        $exclude_paths[] = '/cart/*';
        return $exclude_paths;
    }
).

Depuración de reglas especulativas para sitios web WordPress

Dado que las páginas pre-renderizadas se renderizan en un renderizador separado, como una pestaña de fondo oculta que sustituye a la pestaña actual cuando se activa, la depuración de las reglas especulativas puede ser complicada.El equipo de Chrome ha trabajado mucho en DevTools para que puedas utilizarlas para depurar.

En Chrome DevTools, vaya a la sección"Aplicaciones" y desplácese hasta la pestaña"Carga especulativa". ficha. Esto proporciona a los desarrolladores información detallada sobre especulación, URLs pre-renderizadas, URLs fallidas y más.

Aquí, puede ver que los cinco enlaces de la página pueden ser pre-renderizados basados en URLs que coinciden con las reglas establecidas en el JSON de Reglas Especulativas, como se muestra a continuación. Tenga en cuenta que no necesitamos enumerar todas las URL; la regla de documento permite que el navegador obtenga estas URL de los mismos enlaces de origen de la página.

El "estado" de algunos enlaces se muestra como "No activado" El proceso de pre-renderizado de estos enlaces aún no ha comenzado. Sin embargo, cuando pasamos el ratón por encima de los enlaces en la página, vemos que el estado cambia con el pre-renderizado de cada URL.

Chrome establece límites en el pre-renderizado, incluyendo un máximo de dos pre-renderizados para urgencia media, por lo que tras pasar el ratón por encima del tercer enlace, vemos el motivo del fallo de esa URL:

También puede utilizar el menú desplegable de la esquina superior derecha o seleccionar la URL en la parte superior del panel y elegirInspeccionepara cambiar el renderizador utilizado por el panel DevTools:

La lista desplegable (y el valor seleccionado) se utiliza en todos los demás paneles (como el panel"Red". ), en la que se puede ver que la página que se está solicitando es una página pre-renderizada:

oElementos para ver el contenido de la página:

Al igual que puedes depurar páginas pre-renderizadas, también puedes precargar páginas. Para los plugins de "carga especulativa", asegúrese de seleccionar la opción"Prefetch" actuar como"Modo especulativo".

Ahora, cuando utilice la página de inspección DevTools y navegue hasta la pestaña Carga especulativa, haga lo siguientecomandante en jefe (militar) La búsqueda previa se realiza para varias URL y las reglas cambian.

Pase el ratón por encima del enlace y vaya aSi se selecciona la pestaña "Red", al final se mostrarán los recursos prefijados, como por ejemplo"Tipo"columnas. Estos recursos se obtienen con la prioridad más baja porque son para la navegación futura y Chrome da prioridad a los recursos de la página actual.

Repercusión de la API de reglas especulativas en los análisis

La analítica es fundamental para hacer un seguimiento del uso del sitio a través de las páginas vistas y los eventos y para evaluar el rendimiento a través de la Monitorización de Usuarios Reales (RUM). Es importante saber que el pre-renderizado afecta a la analítica.

Por ejemplo, el uso de la API de reglas especulativas puede requerir código adicional para activar los análisis sólo cuando se accede realmente a una página pre-renderizada. Aunque Google Analytics, Google Publisher Code (GPT) y Google AdSense retrasan el seguimiento hasta que la página está activa, no todos los proveedores lo hacen de forma predeterminada.

Para evitarlo, puedes configurar una Promise para que inicie el análisis sólo cuando la página esté activa:

// Promise para activar analytics en la activación de la página para páginas prerenderizadas
const whenActivated = new Promise((resolver) => {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve); } else {
  } else {
    resolve();
  }
}).

async function initAnalytics() {
  await whenActivated; // Inicializar análisis.
  // Inicializar analytics
}

initAnalytics();

resúmenes

Este artículo explica qué es la API de Reglas Especulativas, cómo funciona y cómo usarla en un sitio WordPress. Todavía es una característica experimental, pero poco a poco está ganando adopción generalizada. Las reglas especulativas todavía están limitadas a las páginas de la misma pestaña, pero se están haciendo esfuerzos para reducir estas limitaciones.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres