Scopri di più sul precaricamento predittivo e su come viene implementato da Guess.js.
Nella sessione Navigazione web più veloce con il precaricamento predittivo al Google I/O 2019, ho iniziato parlando dell'ottimizzazione delle app web con la suddivisione del codice e le potenziali implicazioni in termini di rendimento per la successiva navigazione nelle pagine. Nella seconda parte, ho parlato di come migliorare la velocità di navigazione utilizzando Guess.js per impostare il precaricamento predittivo:
Suddivisione del codice per app web più veloci
Le app web sono lente e JavaScript è una delle risorse più costose che offri. Attendere il caricamento di un'app web lenta può causare frustrazione agli utenti e diminuire le conversioni.
Il caricamento lento è una tecnica efficiente per ridurre i byte di JavaScript che trasferisci tramite cavo. Puoi utilizzare diverse tecniche per il caricamento lento di JavaScript, tra cui:
- Suddivisione del codice a livello di componente
- Suddivisione del codice a livello di route
Con la suddivisione del codice a livello di componente, puoi spostare i singoli componenti in blocchi JavaScript separati. In determinati eventi, puoi caricare gli script pertinenti ed eseguire il rendering dei componenti.
Con la suddivisione del codice a livello di route, tuttavia, sposti intere route in blocchi indipendenti. Quando gli utenti passano da un percorso a un altro, devono scaricare il codice JavaScript associato ed eseguire il bootstrap della pagina richiesta. Queste operazioni possono causare ritardi significativi, soprattutto in caso di reti lente.
Precaricamento di JavaScript in corso...
Il precaricamento consente al browser di scaricare e memorizzare nella cache risorse che l'utente potrebbe aver bisogno a breve. Il metodo abituale è quello di utilizzare <link rel="prefetch">, ma ci sono due inconvenienti comuni:
- Il precaricamento di troppe risorse (overfetching) comporta il consumo di molti dati.
- Alcune risorse di cui l'utente ha bisogno potrebbero non essere mai precaricate.
Il precaricamento predittivo risolve questi problemi utilizzando un report sui pattern di navigazione degli utenti per determinare quali asset precaricare.
Precaricamento predittivo con Guess.js
Guess.js è una libreria JavaScript che fornisce funzionalità di precaricamento predittivo. Guess.js utilizza un report di Google Analytics o di un altro provider di analisi per creare un modello predittivo che possa essere utilizzato per precaricare in modo intelligente solo ciò che è probabile che l'utente abbia bisogno.
Guess.js si integra con Angular, Next.js, Nuxt.js e Gatsby. Per utilizzarlo nella tua applicazione, aggiungi queste righe alla configurazione webpack per specificare un ID vista di Google Analytics:
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
Se non utilizzi Google Analytics, puoi specificare un valore reportProvider e scaricare i dati dal tuo servizio preferito.
Integrazione con i framework
Per saperne di più su come integrare Guess.js con il tuo framework preferito, consulta queste risorse:
Per una rapida procedura dettagliata sull'integrazione con Angular, guarda questo video:
Come funziona Guess.js?
Ecco come Guess.js implementa il precaricamento predittivo:
- Innanzitutto, estrae i dati relativi ai pattern di navigazione dell'utente dal tuo provider di analisi preferito.
- Quindi mappa gli URL dal report ai blocchi JavaScript prodotti da webpack.
- Sulla base dei dati estratti, crea un semplice modello predittivo delle pagine a cui è probabile che un utente acceda a una determinata pagina.
- Chiama il modello per ogni blocco JavaScript, prevedendo gli altri blocchi che probabilmente saranno necessari in seguito.
- Aggiunge istruzioni di precaricamento a ogni blocco.
Una volta creato il file Guess.js, ogni blocco conterrà istruzioni di precaricamento simili a queste:
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
Questo codice generato da Guess.js indica al browser di prendere in considerazione il precaricamento del blocco a.js con probabilità 0.2 e del blocco b.js con probabilità 0.8.
Una volta che il browser esegue il codice, Guess.js controllerà la velocità di connessione dell'utente. Se è sufficiente, Guess.js inserisce due tag <link rel="prefetch"> nell'intestazione della pagina, uno per ogni blocco. Se l'utente si trova su una rete ad alta velocità, Guess.js precarica entrambi i blocchi. Se l'utente ha una connessione di rete debole, Guess.js precarica solo il blocco b.js poiché è molto probabile che sia necessario.
Scopri di più
Per scoprire di più su Guess.js, consulta queste risorse: