La carga especulativa está disponible en WordPress

Durante nuestro seminario web sobre “Carga de páginas instantáneamente” a principios de 2024, Adam Silverstein de Google mencionó que el equipo de rendimiento de WordPress está trabajando en un complemento que habilitará la API de reglas de especulación:

Avance rápido hasta abril de 2024, cuando WordPress lanzó oficialmente Speculative Loading, un complemento de rendimiento que admite la API de reglas de especulación.

Pero antes de entrar en materia, aquí hay una descripción general rápida de la API de reglas de especulación.

API de reglas de especulación explicada

Los siguientes párrafos son una explicación concisa de la API de reglas de especulación de Google. Si quieres profundizar más,lee nuestro artículo dedicado.

La API de reglas de especulación es una tecnología experimental desarrollada por Google para mejorar el rendimiento de futuras navegaciones de páginas. Basándose en los enlaces de sugerencias de recursos ampliamente disponibles rel=prefetchylink rel=prerender, esta API definida por JSON proporciona a los desarrolladores y propietarios de sitios una manera más flexible y expresiva de especificar qué documentos se deben buscar o renderizar previamente.

Puede configurar fácilmente el tipo de carga especulativa (captación previa o procesamiento previo) dentro de línea elementos y archivos de texto externos a los que hace referencia el encabezado de respuesta Speculation-Rules.

Tiene dos opciones para habilitar la API de reglas de especulación:

1. Utilice patrones de URL: defina qué URL son aptas para la captación previa o la representación previa.
   
2. Especifique el nivel de “ansioso”: use la configuraciónde entusiasmopara indicar cuándo deben activarse las especulaciones; “ansioso” activa las reglas de especulación tan pronto como se observan; "moderado" realiza especulaciones si pasa el cursor sobre un enlace durante 200 milisegundos; “Conservador” especula sobre puntero o aterrizaje

Cómo especificar el nivel de “ansia”

Si precarga o renderiza previamente una página depende de las mejoras de rendimiento que desee lograr:

La captación previa indica al navegador que descargue el cuerpo de respuesta de las páginas a las que se hace referencia, pero no los subrecursos a los que hace referencia la página. Cuando un usuario navega a una página precargada, se carga más rápido de lo habitual.

Prerender, por otro lado, indica al navegador que busque, represente y cargue todo el contenido, incluidos los subrecursos y JavaScript, en una pestaña invisible. Esta precarga de recursos genera una experiencia casi instantánea cuando el usuario navega a la página.

Si bien los beneficios de rendimiento del renderizado previo son más significativos, debes usar esta tecnología de carga con moderación. La renderización previa utiliza mucha memoria y ancho de banda de la red, lo que puede generar un desperdicio de recursos si el usuario no navega a la página.

Por el contrario, el costo inicial de una captación previa es mucho menor que el de una representación previa, por lo que puedes adoptar la captación previa de manera más amplia.

Prerendering y Prefetching en WordPress

Los usuarios de WordPress han podido insertar etiquetas de enlace para precargar o renderizar recursos en documentos HTML desde hace años, gracias a la API Resource Hints.

Sin embargo, el uso de etiquetas carece de flexibilidad porque las URL deben especificarse con anticipación, lo que genera un posible desperdicio de recursos o pérdida de ganancias de rendimiento. Además, las soluciones dinámicas que insertan etiquetas de enlace basadas en la visibilidad de la ventana gráfica ofrecen más flexibilidad, pero aún así pueden generar una captación previa excesiva.

Teniendo en cuenta todas estas limitaciones, el equipo de rendimiento estaba muy motivado para encontrar una mejor solución...

Carga especulativa: el nuevo complemento de rendimiento de WordPress

La carga especulativa permite la representación previa o la captación previa de otras URL de interfaz vinculadas en la página.

Una vez activado, el complemento inserta automáticamente un script JSON y presenta previamente cualquier URL en la página con un entusiasmo "moderado".

Puede cambiar fácilmente este comportamiento predeterminado y modificarlo a través de la sección "Carga especulativa" en la pantalla Configuración > Lectura :

Fuente:WordPress

Además, puede personalizar qué URL precargar de forma especulativa utilizando un filtro llamado "plsr_speculation_rules_href_exclude_paths". Por ejemplo, las páginas modificadas en función de las acciones del usuario (por ejemplo, el carrito) se pueden excluir de la representación previa o la recuperación previa.

A continuación se muestra un ejemplo de código del filtro:

Fuente:WordPress

Cómo probar y enviar comentarios

El equipo de rendimiento de WordPress está animando a más personas a probar el nuevo complemento mientras consideran incluir la función en el núcleo de WordPress en el futuro.

Así es como puedes ayudarlos:

• Instale y active el complemento Speculative Loading en su sitio a través de WP Admin o el complemento Performance Lab.
• Pruebe diferentes configuraciones a través de la sección "Carga especulativa" en Configuración > Lectura.
• Depure cómo las reglas agregadas por el complemento activan la carga especulativa para comprender mejor la función y encontrar posibles errores.
• Informe comentarios o errores en el repositorio de GitHub o en los foros de soporte del complemento.
• Integre sus complementos con el filtro “plsr_speculation_rules_href_exclude_paths” para excluir URL específicas de la captación previa y/o la representación previa.
  

Navegación AI de NitroPack: la solución automatizada para experiencias de página instantáneas

Navigation AI de NitroPack es un optimizador de rendimiento web impulsado por IA que predice y analiza automáticamente el comportamiento del usuario para prerenderizar páginas enteras durante el recorrido del cliente.

Basada en la API de Speculation Rules, la solución sin contacto permite a los desarrolladores y propietarios de sitios brindar una experiencia de navegación instantánea al:

1. Aplicar predicciones iniciales mejoradas por IA sobre la carga de la página basadas en datos sin pasarlos a la API de reglas de especulación (todavía);
2. Analizar el comportamiento del usuario, ajustar las predicciones e indicar a la API de reglas de especulación que prepresente (o precapture) una página una vez que estemos seguros de cuál será la siguiente acción.

Esta combinación de inteligencia artificial y la API de reglas de especulación de Google conduce inevitablemente a resultados de rendimiento impresionantes:

• Tiempos de carga inferiores a 3 segundos.
• Grandes mejoras en LCP (pintura con contenido más grande) y CLS (cambio de diseño acumulativo)
• Mejores Core Web Vitals para todo el sitio web

Entonces, si desea dejar a sus visitantes asombrados por lo rápido que se cargan sus páginas…

Únase a la lista de espera para Navigation AI y prepare su sitio para experiencias de usuario instantáneas →

Preguntas frecuentes

¿El complemento de carga especulativa en WordPress utiliza IA?

No, el complemento Speculative Loading no funciona con inteligencia artificial (IA). Aprovecha la API de reglas de especulación de Google, insertando un script JSON en cualquier URL vinculada en la página y prerenderizándola con una configuración de entusiasmo de "moderado".

¿Qué páginas son elegibles para carga especulativa?

Puede aplicar estrategias de carga especulativas a todas las páginas que no sean modificadas por las acciones del usuario. Una buena regla general es evitar prerenderizar o precargar páginas de pago y carrito, ya que esto puede generar una mala experiencia de usuario. Además, Google recomienda sólo páginas simuladas cuando existe una alta probabilidad (más del 80% de las veces) de que los usuarios las carguen.

¿Qué navegadores admiten la API de reglas de especulación?

Si bien la API de reglas de especulación ha estado disponible en Chrome y Edge desde la versión 109, la subfunción particular "reglas de documentos" que permite al navegador obtener la lista de URL para la carga especulativa de elementos en una página está disponible en Chrome 121. En otras palabras, los usuarios deberán usar Chrome 121+ o Edge 121+ para experimentar todos los beneficios de la API de reglas de especulación.

¿Cómo maneja Google Analytics la precarga especulativa?

Si está utilizando Google Analytics, no necesita hacer nada, ya que GA maneja el prerenderizado retrasándolo hasta la activación de forma predeterminada. Sin embargo, con otras herramientas, las páginas preprocesadas pueden afectar los análisis, y es posible que los propietarios de sitios necesiten agregar código adicional para habilitar solo los análisis para las páginas preprocesadas en el momento de la activación. Esto podría lograrse mediante el uso de una Promesa, que espera el evento de cambio de renderizado previo si un documento se está renderizando previamente.