Scopri di più sul precaricamento predittivo e su come Guess.js lo implementa.
Nella sessione Navigazione web più veloce con precaricamento predittivo alla conferenza Google I/O 2019, ho iniziato parlando dell'ottimizzazione delle app web con la suddivisione del codice e delle potenziali implicazioni in termini di prestazioni per la successiva navigazione nelle pagine. Nella seconda parte della discussione, 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 è tra le risorse più costose che spedisci. Attendere il caricamento di un'app web lenta può causare frustrazione agli utenti e ridurre le conversioni.
Il caricamento lento è una tecnica efficiente per ridurre i byte di JavaScript che stai trasferendo via cavo. Puoi utilizzare diverse tecniche per eseguire 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 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 percorso, tuttavia, puoi spostare interi route in blocchi indipendenti. Quando gli utenti passano da una route a un'altra, devono scaricare il codice JavaScript associato ed eseguire il bootstrap della pagina richiesta. Queste operazioni possono causare ritardi significativi, in particolare sulle reti lente.
Precaricamento di JavaScript
Il precaricamento consente al browser di scaricare e memorizzare nella cache le risorse di cui l'utente probabilmente avrà bisogno a breve. Il metodo abituale è utilizzare <link rel="prefetch">, ma ci sono due insidie comuni:
- Il precaricamento di troppe risorse (superamento) consuma molti dati.
- Alcune risorse necessarie all'utente 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 offre una funzionalità di precaricamento predittivo. Guess.js utilizza un report di Google Analytics o di un altro fornitore di soluzioni 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 offre integrazioni con Angular, Next.js, Nuxt.js e Gatsby. Per utilizzarlo nella tua applicazione, aggiungi queste righe alla configurazione del webpack per specificare un ID vista di Google Analytics:
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
Se non usi Google Analytics, puoi specificare un 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 agli schemi di navigazione degli utenti dal tuo provider di analisi preferito.
- Quindi mappa gli URL del report ai blocchi JavaScript prodotti dal webpack.
- In base ai dati estratti, crea un semplice modello predittivo delle pagine a cui è probabile che un utente visiti da una determinata pagina.
- Richiama il modello per ogni blocco JavaScript, prevedendo gli altri blocchi che probabilmente saranno necessari successivamente.
- Aggiunge le istruzioni di precaricamento a ogni blocco.
Al termine di Guess.js, ogni blocco conterrà istruzioni di precaricamento simili alle seguenti:
__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 inserirà due tag <link rel="prefetch"> nell'intestazione della pagina, uno per ogni blocco. Se l'utente utilizza una rete ad alta velocità, Guess.js eseguirà il precaricamento di entrambi i blocchi. Se l'utente ha una connessione di rete debole, Guess.js precarica solo il blocco b.js perché è molto probabile che sia necessario.
Scopri di più
Per saperne di più su Guess.js, consulta queste risorse: