Obtén información sobre la carga previa predictiva y cómo la implementa Guess.js.
En mi sesión Faster Web Navigation with Predictive Prefetching en Google I/O 2019, comencé a hablar sobre la optimización de apps web con división de código y las posibles implicaciones en el rendimiento de la navegación posterior de la página. En la segunda parte de la charla, analizamos cómo mejorar la velocidad de navegación usando Guess.js para configurar la carga previa predictiva:
División de código para apps web más rápidas
Las apps web son lentas, y JavaScript es uno de los recursos más costosos que envías. Esperar a que se cargue una aplicación web lenta puede frustrar a los usuarios y disminuir las conversiones.
La carga diferida es una técnica eficiente para reducir los bytes de JavaScript que transfieres por el cable. Puedes usar varias técnicas para realizar una carga diferida de JavaScript, como las siguientes:
- División de código a nivel de los componentes
- División del código a nivel de la ruta
Con la división de código a nivel de los componentes, puedes mover los componentes individuales a bloques de JavaScript separados. En eventos particulares, puedes cargar las secuencias de comandos relevantes y renderizar los componentes.
Sin embargo, con la división de código a nivel de la ruta, se mueven rutas completas a fragmentos independientes. Cuando los usuarios pasan de una ruta a otra, deben descargar el JavaScript asociado y, luego, iniciar la página solicitada. Estas operaciones pueden generar retrasos significativos, especialmente en redes lentas.
Carga previa de JavaScript
La carga previa permite que el navegador descargue y almacene en caché los recursos que el usuario probablemente necesitará pronto. El método habitual es usar <link rel="prefetch">, pero existen dos errores comunes:
- La carga previa de demasiados recursos (sobrecarga) consume muchos datos.
- Es posible que algunos recursos que el usuario necesita nunca se carguen previamente.
La carga previa predictiva resuelve estos problemas usando un informe de los patrones de navegación de los usuarios para determinar qué recursos se deben cargar previamente.
Carga previa predictiva con Guess.js
Guess.js es una biblioteca de JavaScript que proporciona funcionalidad de carga previa predictiva. Guess.js consume un informe de Google Analytics o de otro proveedor de estadísticas para crear un modelo predictivo que se puede usar para realizar una carga previa inteligente solo de lo que el usuario probablemente necesite.
Guess.js tiene integraciones con Angular, Next.js, Nuxt.js y Gatsby. Para usarla en tu aplicación, agrega estas líneas a la configuración de webpack y especifica un ID de vista de Google Analytics:
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
Si no usas Google Analytics, puedes especificar un reportProvider y descargar datos de tu servicio favorito.
Integración en frameworks
Para obtener más información sobre cómo integrar Guess.js con tu marco de trabajo favorito, consulta estos recursos:
Para ver una explicación rápida sobre la integración en Angular, mira este video:
¿Cómo funciona Guess.js?
A continuación, te mostramos cómo Guess.js implementa la carga previa predictiva:
- Primero, extrae datos de los patrones de navegación del usuario de tu proveedor de servicios de analítica favorito.
- Luego, asigna las URLs del informe a los fragmentos de JavaScript que genera webpack.
- En función de los datos extraídos, crea un modelo predictivo simple de las páginas a las que es probable que un usuario navegue desde una página determinada.
- Invoca el modelo para cada bloque de JavaScript y predice los otros fragmentos que probablemente se necesiten a continuación.
- Agrega instrucciones de carga previa a cada fragmento.
Cuando Guess.js esté listo, cada fragmento contendrá instrucciones de carga previa similares a las siguientes:
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
Este código generado por Guess.js le indica al navegador que considere cargar previamente el fragmento a.js con la probabilidad 0.2 y el fragmento b.js con la probabilidad 0.8.
Una vez que el navegador ejecute el código, Guess.js verificará la velocidad de conexión del usuario. Si es suficiente, Guess.js insertará dos etiquetas <link rel="prefetch"> en el encabezado de la página, una para cada fragmento. Si el usuario usa una red de alta velocidad, Guess.js cargará previamente ambos fragmentos. Si el usuario tiene una conexión de red deficiente, Guess.js solo precargará el fragmento b.js, ya que tiene una alta probabilidad de ser necesario.
Más información
Para obtener más información sobre Guess.js, consulta estos recursos: