Due modalità di precaricamento: tag <link> e intestazioni HTTP.

Demián Renzulli
Demián Renzulli

In questo codelab, implementerai il pre-caricamento in due modi: con <link rel="prefetch"> e con l'intestazione HTTP Link.

L'app di esempio è un sito web con una pagina di destinazione promozionale con uno sconto speciale per la t-shirt più venduta del negozio. Poiché la pagina di destinazione rimanda a un singolo prodotto, è lecito presumere che una percentuale elevata di utenti visiterà la pagina dei dettagli del prodotto. Ciò rende la pagina di prodotto un'ottima candidata per il pre-caricamento nella pagina di destinazione.

Misurare le prestazioni

Innanzitutto, stabilisci il rendimento di riferimento:

  1. Fai clic su Remix per modificare per rendere il progetto modificabile.
  2. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A schermo intero schermo intero.
  3. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  4. Fai clic sulla scheda Rete.

  5. Nell'elenco a discesa Ritardo, seleziona 3G veloce per simulare un tipo di connessione lento.

  6. Per caricare la pagina del prodotto, fai clic su Acquista ora nell'app di esempio.

Il caricamento della pagina product-details.html richiede circa 600 ms:

Riquadro della rete che mostra i tempi di caricamento di product-details.html

Per migliorare la navigazione, inserisci un tag prefetch nella pagina di destinazione per eseguire il pre-caricamento della pagina product-details.html:

  • Aggiungi il seguente elemento <link> all'inizio del file views/index.html:
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

L'attributo as è facoltativo, ma consigliato. Aiuta il browser a impostare le intestazioni corrette e a determinare se la risorsa è già nella cache. Alcuni valori di esempio per questo attributo sono: document, script, style, font, image e altri.

Per verificare che il prefetching funzioni:

  1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A schermo intero schermo intero.
  2. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  3. Fai clic sulla scheda Rete.

  4. Nell'elenco a discesa Ritardo, seleziona 3G veloce per simulare un tipo di connessione lento.

  5. Deseleziona la casella di controllo Disattiva cache.

  6. Ricarica l'app.

Ora, quando viene caricata la pagina di destinazione, viene caricata anche la pagina product-details.html, ma con la priorità più bassa:

Riquadro della rete che mostra il file product-details.html precompilato.

La pagina viene conservata nella cache HTTP per cinque minuti, dopodiché vengono applicate le normali regole Cache-Control per il documento. In questo caso, product-details.html ha un'intestazione cache-control con un valore public, max-age=0, il che significa che la pagina viene conservata per un totale di cinque minuti.

Rivalutare il rendimento

  1. Ricarica l'app.
  2. Per caricare la pagina del prodotto, fai clic su Acquista ora nell'app di esempio.

Dai un'occhiata al riquadro Rete. Esistono due differenze rispetto alla traccia di rete iniziale:

  • La colonna Dimensioni mostra "Memoria di precaricamento", il che significa che questa risorsa è stata recuperata dalla cache del browser anziché dalla rete.
  • La colonna Tempo indica che il tempo necessario per il caricamento del documento ora è di circa 10 ms.

Si tratta di una riduzione approssimativa del 98% rispetto alla versione precedente, che richiedeva circa 600 ms.

Riquadro della rete che mostra il file product-details.html recuperato dalla cache di precaricamento.

Credito extra: utilizza prefetch come potenziamento progressivo

La prelettura è meglio implementata come miglioramento progressivo per gli utenti che navigano su connessioni veloci. Puoi utilizzare l'API Network Information per controllare le condizioni della rete e, in base a queste, iniettare dinamicamente i tag di prefetch. In questo modo, puoi ridurre al minimo il consumo di dati e risparmiare sui costi per gli utenti con piani dati lenti o costosi.

Per implementare il pre-caricamento adattivo, rimuovi prima il tag <link rel="prefetch"> da views/index.html:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

Aggiungi quindi il seguente codice a public/script.js per dichiarare una funzione che inserisce dinamicamente il tag prefetch quando l'utente è su una connessione veloce:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

La funzione funziona nel seguente modo:

  • Controlla la proprietà effectiveType dell'API Network Information per determinare se l'utente è connesso a una rete 4G (o superiore).
  • Se questa condizione è soddisfatta, viene generato un tag <link> con prefetch come tipo di suggerimento, viene passato l'URL che verrà precompilato nell'attributo href e viene indicato che la risorsa è un document HTML nell'attributo as.
  • Infine, inserisce lo script in modo dinamico nel head della pagina.

Aggiungi script.js a views/index.html, appena prima del tag di chiusura </body>:

<body>
      ...
      <script src="/script.js"></script>
</body>

Se richiedi script.js alla fine della pagina, questo verrà caricato ed eseguito dopo l'analisi e il caricamento della pagina.

Per assicurarti che il pre-caricamento non interferisca con le risorse critiche per la pagina corrente, aggiungi il seguente snippet di codice per chiamare injectLinkPrefetchIn4g() sull'evento window.load:

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

Ora la pagina di destinazione esegue il pre-caricamento di product-details.html solo su connessioni veloci. Per verificare che:

  1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A schermo intero schermo intero.
  2. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  3. Fai clic sulla scheda Rete.
  4. Nell'elenco a discesa Ritardo, seleziona Online.
  5. Ricarica l'app.

Dovresti vedere product-details.html nel riquadro Rete:

Riquadro della rete che mostra il file product-details.html precompilato.

Per verificare che la pagina di prodotto non venga precaricata su connessioni lente:

  1. Nell'elenco a discesa Limitazione, seleziona 3G lento.
  2. Ricarica l'app.

Il riquadro Rete deve includere solo le risorse per la pagina di destinazione senza product-details.html:

Il riquadro della rete mostra che il pre-caricamento di product-details.html non è stato eseguito.

L'intestazione HTTP Link può essere utilizzata per prelevare in anteprima lo stesso tipo di risorse del tag link. La decisione di utilizzare l'uno o l'altro dipende principalmente dalle tue preferenze, poiché la differenza di rendimento è irrilevante. In questo caso, lo utilizzerai per prelevare il CSS principale della pagina di prodotto, in modo da migliorarne ulteriormente il rendering.

Aggiungi un'intestazione HTTP Link per style-product.css nella risposta del server per la pagina di destinazione:

  1. Apri il file server.js e cerca l'handler get() per l'URL principale: /.
  2. Aggiungi la seguente riga all'inizio dell'handler:
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A schermo intero schermo intero.
  2. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  3. Fai clic sulla scheda Rete.
  4. Ricarica l'app.

Ora style-product.css viene precompilato con la priorità più bassa dopo il caricamento della pagina di destinazione:

Riquadro della rete che mostra lo stile precompilato del prodotto.css.

Per accedere alla pagina del prodotto, fai clic su Acquista ora. Dai un'occhiata al riquadro Rete:

Riquadro della rete che mostra style-product.css recuperato dalla cache di precaricamento.

Il file style-product.css viene recuperato dalla "cache di prelettura" e il caricamento richiede solo 12 ms.