Obtén información sobre la carga previa predictiva y cómo Guess.js la implementa.
En mi sesión Navegación web más rápida con carga previa predictiva en Google I/O 2019, comencé a hablar sobre la optimización de apps web con la división de código y las posibles implicaciones en el rendimiento para la siguiente navegación de páginas. 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 aplicaciones web son lentas, y JavaScript es uno de los recursos más costosos que envías. Esperar a que una aplicación web lenta se cargue 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. Puedes usar varias técnicas para la carga diferida de JavaScript, como las siguientes:
- División de código a nivel de componente
- División del código a nivel de la ruta
Con la división de código a nivel de componente, puedes mover los componentes individuales en 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 las rutas completas en fragmentos independientes. Cuando los usuarios pasan de una ruta a otra, deben descargar el código JavaScript asociado y, luego, iniciar la página solicitada. Estas operaciones pueden provocar retrasos importantes, especialmente en redes lentas.
Precarga 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 hay dos errores comunes:
- La precarga de demasiados recursos (sobrecarga) consume muchos datos.
- Es posible que algunos recursos que el usuario necesite nunca se carguen previamente.
La carga previa predictiva resuelve estos problemas mediante 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 la funcionalidad de carga previa predictiva. Guess.js consume un informe de Google Analytics o de otro proveedor de análisis para compilar un modelo predictivo que se pueda usar para precargar de forma inteligente solo lo que el usuario probablemente necesite.
Guess.js tiene integraciones con Angular, Next.js, Nuxt.js y Gatsby. Si deseas usarlo en tu aplicación, agrega estas líneas a tu configuración de webpack para especificar 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 en tu marco de trabajo favorito, consulta estos recursos:
Si quieres ver una explicación rápida sobre la integración con 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 para los patrones de navegación de los usuarios desde tu proveedor de analítica favorito.
- Luego, asigna las URLs del informe a los bloques de JavaScript que produce webpack.
- A partir de los datos extraídos, crea un modelo predictivo simple de las páginas a las que es probable que navegue un usuario desde una determinada página.
- 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 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 se encuentra en una red de alta velocidad, Guess.js buscará previamente ambos fragmentos. Si el usuario tiene una conexión de red deficiente, Guess.js solo cargará previamente 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: