In questo codelab, le prestazioni della seguente pagina web sono migliorate mediante il precaricamento e il precaricamento di alcune risorse:
Misura
Prima di aggiungere eventuali ottimizzazioni, misura le prestazioni del sito web.
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero
.
Esegui il controllo delle prestazioni di Lighthouse (Lighthouse > Opzioni > Prestazioni) sulla versione dal vivo di Glitch (vedi anche Scoprire le opportunità per le prestazioni con Lighthouse).
Lighthouse mostra il seguente controllo non riuscito per una risorsa recuperata in ritardo:
- 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>) posizionato nel documento HTML, ma un file JavaScript separato, fetch-css.js, allega 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 e l'esecuzione del 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 critiche rappresenta l'ordine delle risorse che vengono prioritizzate e recuperate dal browser. 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 una risorsa scoperta in ritardo.
Precarica le risorse critiche
Il file main.css è un asset fondamentale necessario subito 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 dei link per comunicare al browser di scaricarli 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 recuperato, mentre as="style" viene utilizzato per precaricare i file di stile.
Ricarica l'applicazione e dai un'occhiata al riquadro Rete in DevTools.
Osserva come il browser recupera il file CSS prima che il codice JavaScript responsabile del recupero dell'analisi sia ancora terminato. Con il precaricamento, il browser sa di effettuare un recupero preventivo della risorsa presupponendo che sia fondamentale per la pagina web.
Se non utilizzato correttamente, il precaricamento può compromettere le prestazioni, richiedendo richieste non necessarie per risorse che non vengono utilizzate. In questa applicazione, details.css è un altro file CSS situato nella directory principale del progetto ma viene utilizzato per un elemento /details route separato. Per mostrare un esempio di come il precaricamento può essere utilizzato in modo errato, aggiungi un suggerimento di 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 è utilizzato dalla pagina web.
Chrome mostra un avviso nel riquadro della console quando una risorsa precaricata non viene utilizzata dalla pagina entro pochi secondi dal caricamento.
Utilizza questo avviso come indicatore per capire se sono presenti risorse precaricate 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 che dovrebbero essere utilizzati per l'attributo as, consulta l'articolo MDN sul precaricamento.
Precarica risorse future
Prefetch è un altro suggerimento del browser che può essere utilizzato per effettuare una richiesta di una risorsa utilizzata 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 vieni indirizzato a un percorso details/ separato.
Un file CSS separato, details.css, contiene tutti gli stili necessari per questa
pagina semplice. Aggiungi un elemento link a index.html per precaricare questa risorsa.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
Per capire come questo attiva una richiesta per il file, apri il riquadro Rete in DevTools e deseleziona l'opzione Disattiva cache.
Ricarica l'applicazione e nota come viene effettuata una richiesta con priorità molto bassa per details.css dopo che tutti gli altri file sono stati recuperati.
Con DevTools aperto, fai clic sull'immagine nel 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 su disco del browser.
Approfittando del tempo di inattività del browser, il precaricamento effettua una richiesta anticipata di una risorsa necessaria per una pagina diversa. Ciò velocizza le richieste di navigazione future consentendo al browser di memorizzare più rapidamente l'asset e distribuirlo dalla cache quando necessario.
Precaricamento e precaricamento con webpack
Il post Ridurre i payload JavaScript con la suddivisione del codice esplora l'utilizzo delle importazioni dinamiche per suddividere un bundle in più blocchi. Come dimostra una semplice applicazione che importa dinamicamente un modulo da Lodash quando viene inviato.
Puoi accedere a Glitch per questa applicazione qui.
Il seguente blocco di codice, presente in src/index.js,, è responsabile dell'importazione dinamica del metodo quando viene fatto 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 riducendo le dimensioni iniziali. La versione 4.6.0 del webpack supporta il precaricamento o il precaricamento dei blocchi che vengono importati in modo dinamico. Utilizzando questa applicazione come
esempio, il metodo lodash può essere precaricato al momento di inattività del browser; quando un utente
preme il pulsante, non si verifica alcun ritardo nel recupero della risorsa.
Utilizza lo specifico parametro di commento webpackPrefetch all'interno di un'importazione dinamica per precaricare un determinato blocco.
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, il webpack inserisce un tag di precaricamento per la risorsa nell'intestazione del documento. Questa informazione è visibile nel riquadro Elementi in DevTools.
L'osservazione delle richieste nel riquadro Rete mostra anche che questo blocco è stato recuperato con una priorità bassa dopo che sono state richieste tutte le altre risorse.
Sebbene il precaricamento abbia più senso per questo caso d'uso, il webpack supporta anche il precaricamento dei blocchi che vengono importati in modo dinamico.
import(/* webpackPreload: true */ 'module')
Conclusione
Con questo codelab, dovresti comprendere in modo approfondito come il precaricamento o il precaricamento di determinati asset possa migliorare l'esperienza utente sul tuo sito. È importante ricordare che queste tecniche non devono essere utilizzate per ogni risorsa e un loro utilizzo scorretto può compromettere le prestazioni. I risultati migliori vengono notati soltanto eseguendo il precaricamento o il precaricamento in modo selettivo.
In sintesi:
- Utilizza l'opzione precarica per le risorse rilevate in ritardo ma fondamentali per la pagina corrente.
- Utilizza il valore di precaricamento per le risorse necessarie per un percorso di navigazione futuro o un'azione dell'utente.
Al momento non tutti i browser supportano sia il precaricamento sia il precaricamento. Ciò significa che non tutti gli utenti della tua applicazione potrebbero notare miglioramenti delle prestazioni.
Per ulteriori informazioni su aspetti specifici dell'impatto che il precaricamento e il precaricamento possono avere sulla tua pagina web, consulta i seguenti articoli: