Una mirada exhaustiva a la API de reglas de especulación en WordPress y sus implicaciones

Para aprovechar la API de reglas de especulación en WordPress, el equipo de rendimiento de WordPress (que incluye desarrolladores de Google) ha lanzado recientemente un plugin de carga de especulación. Este plugin precarga las URL front-end de los enlaces de una página para mejorar la velocidad de carga de la página.

Por defecto, este plugin predirige la URL del front-end de WordPress cuando el usuario pasa el ratón por encima del enlace correspondiente. puede encontrar la URL en la sección "establecer">"lea">"Presumiblemente cargado"para personalizar estos ajustes.

Personalizar el plugin de carga especulativa en los ajustes de administración de WordPress es muy sencillo. Esto significa que todos los enlaces de la página se cargarán de acuerdo con el valor preestablecido de "moderadoLa configuración de "eagerness" hace pre-renderizado, empieza a pre-renderizar cuando pasas el ratón por encima del enlace. Por lo tanto, después de activar el plugin, no necesitas hacer nada extra; funciona inmediatamente.

Por ejemplo, si ha instalado el complemento Push to Load en su sitio de WordPress, puede utilizar Chrome DevTools para inspeccionar el sitio y hacer clic en la pestaña Elementos. A medida que se desplaza hacia abajo, se dará cuenta de que se han añadido varias reglas especulativas para usted, tales como <script type="speculationrules">.

El plugin utiliza expresiones regulares para especificar los enlaces que necesitan ser pre-renderizados, excluir los enlaces que no son pre-renderizados, y establecer el afán de pre-renderizado. La siguiente sección explica estas reglas en detalle.

Restricciones para evitar el uso excesivo

Chrome establece algunos límites para evitar que la API se utilice en exceso:

urgencia	cantidad prefetch	Número de renderizaciones previas
inmediato/ansioso	50	10
Moderado/conservador	2 (FIFO)	2 (FIFO)

Estos límites se establecen en función de la urgencia y la interacción del usuario.

• inmediata y ansiosaEstos ajustes no dependen de la acción del usuario y, por lo tanto, son más restrictivos. Permiten un ajuste dinámico de la capacidad eliminando los pre-renderizados antiguos para añadir otros nuevos.
• moderados y conservadoresEstos ajustes se activan por acción del usuario y siguen el principio FIFO (primero en entrar, primero en salir), con un límite superior de 2. Cuando se añade un nuevo pre-renderizador, se sustituye el pre-renderizador más antiguo para ahorrar memoria.

Evitar que ciertas URLs sean precargadas y pre-renderizadas

Atención:Por defecto, las rutas WP-admin están excluidas del pre-renderizado y prefetching. Como desarrollador de WordPress, puedes elegir qué rutas priorizar.

Puede utilizar filtros plsr_speculation_rules_href_exclude_paths Autodefinición de los tipos de URL que deben excluirse de la precarga especulativa.

El siguiente ejemplo de código garantiza que algo como https://wordpresssite.com/cart/ tal vez https://wordpresssite.com/cart/book/ Las URL no se precargarán ni prerenderizarán:

add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths) {
    $exclude_paths[] = '/cart/';
    $exclude_paths[] = '/cart/libro/';
    return 1TP4Rutas_de_exclusión;
}).

Es posible que desee excluir ciertas URL del pre-renderizado, pero permitir la precarga. Por ejemplo, una página que utiliza JavaScript del lado del cliente para actualizar el estado del usuario puede no ser adecuada para el pre-renderizado, pero la precarga tiene sentido.

plsr_speculation_rules_href_exclude_paths El filtro recibe el modo actual (prefetch tal vez prerender) para la exclusión condicional.

Por ejemplo, el siguiente código garantiza la similitud https://wordpresssite.com/products/ Las URLs no pueden ser pre-renderizadas, pero pueden ser pre-procesadas:

add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths, $mode) {
    if ($mode === 'prerender') {
        $exclude_paths[] = '/products/';
    }
    return $exclude_paths;
}, 10, 2);

Depuración de reglas especulativas para sitios web WordPress

La depuración de reglas especulativas puede ser complicada porque las páginas pre-renderizadas se renderizan en un renderizador separado, como una pestaña oculta en segundo plano que sustituye a la pestaña actual cuando se activa. Para solucionar este problema, el equipo de Chrome ha introducido una serie de mejoras en DevTools para facilitar la depuración.

En Chrome DevTools, vaya a "aplicación" y desplácese hasta la sección Cargas especulativas. Esto proporciona a los desarrolladores información detallada sobre URL especulativas, pre-renderizadas, URL fallidas y más.

Puedes ver que hay cinco enlaces en la página que pueden ser pre-renderizados basados en la configuración de la regla especulativa JSON. No es necesario que enumere todas las URL; la regla de documento permite que el navegador las obtenga automáticamente de los mismos enlaces de origen de la página.

Algunos de los enlaces de la sección "situación" se muestra como "No activado", lo que significa que el proceso de pre-renderizado para estos enlaces aún no ha comenzado. Cuando pasamos el ratón por encima de los enlaces de la página, vemos que el estado de cada URL cambia durante el pre-renderizado.

Chrome establece límites en el pre-renderizado, por ejemplo modo moderadoComo máximo, dos URLs pueden ser pre-renderizadas bajo esta sección, así que cuando pasemos el ratón por encima del tercer enlace, veremos la razón del fallo de pre-renderización para 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:

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

oElementos para ver el contenido de la página:

Al igual que se pueden depurar las páginas pre-renderizadas, también se pueden depurar las páginas prefetch. Para "Carga especulativa", asegúrese de seleccionar "preseleccionar"como"modelo especulativo".

Ahora, cuando utilice DevTools para inspeccionar la página y navegue hasta "Carga especulativa", verá varias URL preconfiguradas y las reglas correspondientes cambiarán.

Cuando pase el ratón por encima del enlace y navegue hasta "reticulación", los recursos preprogramados se muestran al final de la lista, como "tipología". Estos recursos se obtienen con la prioridad más baja porque están destinados a la navegación futura, y Chrome carga primero los recursos necesarios para 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 web (por ejemplo, páginas vistas y eventos) y evaluar el rendimiento a través de la Monitorización de Usuarios Reales (RUM). Es importante tener en cuenta que el pre-renderizado puede afectar a los datos analíticos.

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

Para evitar esto, puede configurar una Promesa para inicializar el análisis sólo cuando se active la página:

document.addEventListener('prerenderingchange', function(event) {
    if (!event.isPrerendering) {
        // Inicializar el código de análisis
    }
});

resúmenes

Este artículo describe qué es la API de Reglas de Presunción, cómo funciona y cómo usarla en un sitio WordPress. Aunque todavía es una característica experimental, se está adoptando ampliamente.

El plugin utiliza enlaces precargados en la página para que ésta pre-renderice la URL correspondiente cuando el usuario pasa el ratón por encima del enlace, y las reglas de pre-renderización pueden personalizarse fácilmente en los ajustes de WordPress. El plugin utiliza expresiones regulares para establecer los enlaces que necesitan ser pre-renderizados y tiene un mecanismo para evitar el uso excesivo.

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