In questo codelab, le prestazioni della seguente pagina web sono migliorate mediante il precaricamento e il precaricamento di alcune risorse:
Misura
Misura il rendimento del sito web prima di aggiungere eventuali ottimizzazioni.
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
A schermo intero
.
Esegui il controllo del rendimento di Lighthouse (Lighthouse > Opzioni > Rendimento) sulla versione pubblicata del tuo Glitch (vedi anche Scoprire opportunità di rendimento con Lighthouse).
Lighthouse mostra il seguente controllo non riuscito per una risorsa recuperata tardi:
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
Il file main.css non viene recuperato da un elemento Link (<link>) inserito nel documento HTML, ma un file JavaScript separato, fetch-css.js, collega l'elemento Link al DOM dopo l'evento window.onLoad. Ciò significa che il file viene recuperato solo dopo che il browser ha terminato l'analisi ed eseguito il file JS. Analogamente, un carattere web (K2D.woff2) specificato in main.css viene recuperato solo al termine del download del file CSS.
La catena di richieste fondamentali rappresenta l'ordine delle risorse a cui viene assegnata la priorità e che vengono recuperate dal browser. Al momento, questa pagina web ha il seguente aspetto:
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
Poiché il file CSS si trova al terzo livello della catena di richieste, Lighthouse lo ha identificato come risorsa scoperta in ritardo.
Precarica le risorse critiche
Il file main.css è un asset fondamentale necessario immediatamente dopo il caricamento della pagina. Per i file importanti come questa risorsa che vengono recuperati in ritardo nella tua applicazione, utilizza un tag di precaricamento del link per indicare al browser di scaricarlo prima aggiungendo un elemento Link all'intestazione del documento.
Aggiungi un tag di precaricamento per questa applicazione:
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
</head>
L'attributo as viene utilizzato per identificare il tipo di risorsa che viene recuperata e as="style" viene utilizzato per precaricare i file stylesheet.
Ricarica l'applicazione e dai un'occhiata al riquadro Rete in DevTools.
Nota come il browser recupera il file CSS prima che il codice JavaScript responsabile del recupero abbia terminato l'analisi. Con il precaricamento, il browser sa di eseguire un recupero preventivo per la risorsa, supponendo che sia fondamentale per la pagina web.
Se non utilizzato correttamente, il precaricamento può influire negativamente sul rendimento inviando richieste non necessarie per risorse non utilizzate. In questa applicazione, details.css è un altro file CSS situato nella directory principale del progetto, ma viene utilizzato per un /details route separato. Per mostrare un esempio di come il precaricamento può essere utilizzato in modo errato, aggiungi anche un indicazione per il precaricamento per questa risorsa.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
Ricarica l'applicazione e dai un'occhiata al riquadro Rete.
Viene effettuata una richiesta per recuperare details.css anche se non viene utilizzato dalla pagina web.
Chrome mostra un avviso nel riquadro Console quando una risorsa precaricata non viene utilizzata dalla pagina entro pochi secondi dal caricamento.
Utilizza questo avviso come indicatore per identificare eventuali risorse pre caricate che non vengono utilizzate immediatamente dalla tua pagina web. Ora puoi rimuovere il link di precaricamento non necessario per questa pagina.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
Per un elenco di tutti i tipi di risorse che possono essere recuperate insieme ai valori corretti da utilizzare per l'attributo as, consulta l'articolo MDN sul precaricamento.
Precaricare le risorse future
Il precaricamento è un altro suggerimento del browser che può essere utilizzato per effettuare una richiesta di un asset utilizzato per un percorso di navigazione diverso, ma con una priorità inferiore rispetto ad altri asset importanti necessari per la pagina corrente.
In questo sito web, se fai clic sull'immagine, visualizzerai un percorso details/
separato.
Un file CSS separato, details.css, contiene tutti gli stili necessari per questa
semplice pagina. Aggiungi un elemento link a index.html per eseguire il pre-caricamento di questa risorsa.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
Per capire in che modo viene attivata una richiesta del file, apri il riquadro Rete in DevTools e deseleziona l'opzione Disattiva cache.
Ricarica l'applicazione e osserva come viene effettuata una richiesta con priorità molto bassa per
details.css dopo che sono stati recuperati tutti gli altri file.
Con DevTools aperto, fai clic sull'immagine sul sito web per passare alla pagina details.
Poiché in details.html viene utilizzato un elemento link per recuperare details.css, viene effettuata una richiesta per la risorsa come previsto.
Fai clic sulla richiesta di rete details.css in DevTools per visualizzarne i dettagli. Noterai che il file viene recuperato dalla cache del disco del browser.
Sfruttando il tempo di inattività del browser, il pre-caricamento effettua una richiesta anticipata di una risorsa necessaria per un'altra pagina. In questo modo, le richieste di navigazione future vengono accelerate poiché il browser può memorizzare l'asset nella cache in anticipo e servirlo dalla cache quando necessario.
Precaricamento e precaricamento con Webpack
L'articolo Ridurre i payload JavaScript con la suddivisione del codice illustra l'utilizzo delle importazioni dinamiche per suddividere un bundle in più chunk. Questo viene dimostrato con una semplice applicazione che importa dinamicamente un modulo da Lodash quando viene inviato un modulo.
Puoi accedere al glitch per questa applicazione qui.
Il seguente blocco di codice, che si trova all'interno di src/index.js,, esegue
l'importazione dinamica del metodo quando l'utente fa clic sul pulsante.
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
La suddivisione di un bundle migliora i tempi di caricamento delle pagine riducendone le dimensioni iniziali. La versione 4.6.0 di webpack supporta il precaricamento o il pre-caricamento dei chunk importati dinamicamente. Utilizzando questa applicazione come
esempio, il metodo lodash può essere precaricato quando il browser è inattivo. Quando un utente
preme il pulsante, la risorsa viene recuperata senza ritardo.
Utilizza il parametro di commento webpackPrefetch specifico all'interno di un'importazione dinamica per eseguire il pre-caricamento di un determinato chunk.
Ecco come apparirebbe con questa particolare applicazione.
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Una volta ricaricata l'applicazione, webpack inietta un tag di precaricamento per la risorsa nell'head del documento. Questo problema è visibile nel riquadro Elementi in DevTools.
L'osservazione delle richieste nel riquadro Rete mostra anche che questo chunk viene recuperato con una priorità bassa dopo che sono state richieste tutte le altre risorse.
Sebbene il pre-caricamento abbia più senso per questo caso d'uso, webpack supporta anche il pre-caricamento di chunk importati dinamicamente.
import(/* webpackPreload: true */ 'module')
Conclusione
Con questo codelab dovresti avere una solida comprensione di come il precaricamento o il precaricamento di determinati asset può migliorare l'esperienza utente del tuo sito. È importante ricordare che queste tecniche non devono essere utilizzate per ogni risorsa e che un uso improprio può danneggiare le prestazioni. I risultati migliori si ottengono caricando in anteprima o precaricando in modo selettivo.
In sintesi:
- Utilizza il precaricamento per le risorse rilevate in ritardo, ma fondamentali per la pagina corrente.
- Utilizza il precaricamento per le risorse necessarie per un percorso di navigazione o un'azione dell'utente futuri.
Al momento non tutti i browser supportano sia il precaricamento che il prelettura. Ciò significa che non tutti gli utenti della tua applicazione potrebbero notare miglioramenti delle prestazioni.
Per ulteriori informazioni su aspetti specifici di come il precaricamento e il precaricamento possono influire sulla pagina web, consulta i seguenti articoli: