Codelab: precarica gli asset critici per migliorare la velocità di caricamento

In questo codelab, le prestazioni della seguente pagina web vengono migliorate precaricando e precaricando alcune risorse:

Screenshot app

Misura

Prima di aggiungere ottimizzazioni, misura il rendimento del sito web.

  • Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A schermo intero 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:

Lighthouse: controllo del precaricamento delle richieste chiave
  • Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  • Fai clic sulla scheda Rete.
Riquadro Rete con risorsa scoperta in un secondo momento

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 recuperata e as="style" viene utilizzato per precaricare i file stylesheet.

Ricarica l'applicazione e dai un'occhiata al riquadro Rete in DevTools.

Pannello della rete con risorsa precaricata

Notare come il browser recuperi il file CSS prima che l'analisi del codice JavaScript responsabile del recupero sia stata completata. Con il precaricamento, il browser deve eseguire un recupero preventivo della risorsa presupponendo 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.

Riquadro della rete con precaricamento non necessario

Chrome mostra un avviso nel riquadro Console quando una risorsa precaricata non viene utilizzata dalla pagina entro pochi secondi dal caricamento.

Avviso di precaricamento nella console

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, nonché dei valori corretti da utilizzare per l'attributo as, consulta l'articolo MDN sul precaricamento.

Precaricare le risorse future

Il 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 altre risorse importanti necessarie per la pagina corrente.

In questo sito web, se fai clic sull'immagine, viene visualizzato un details/ percorso separato.

Percorso dettagliato

Un file CSS separato, details.css, contiene tutti gli stili necessari per questa semplice pagina. Aggiungi un elemento link a index.html per prelevare 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.

Disattivare la cache in Chrome DevTools

Ricarica l'applicazione e nota come viene effettuata una richiesta di priorità molto bassa per details.css dopo aver recuperato tutti gli altri file.

Riquadro Rete con risorsa prelevata

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.

Richieste di rete nella pagina dei dettagli

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.

Richiesta di dettagli recuperata dalla cache del disco

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.

App Magic Sorter che mostra la suddivisione del codice

Puoi accedere al glitch per questa applicazione qui.

Il seguente blocco di codice, che si trova in src/index.js,, è responsabile dell'importazione dinamica del metodo quando si 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 prelevato quando il browser è inattivo. Quando un utente preme il pulsante, non c'è alcun ritardo per il recupero della risorsa.

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.

Riquadro Elementi con tag di precaricamento

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.

Riquadro Rete con richiesta precompilata

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 tutte le risorse e che un uso improprio può danneggiare le prestazioni. I risultati migliori si ottengono caricando in anteprima o precaricando solo in modo selettivo.

In sintesi:

  • Utilizza il precaricamento per le risorse rilevate in ritardo, ma fondamentali per la pagina corrente.
  • Utilizza il prefetch 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 tua pagina web, consulta questi articoli: