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

Demián Renzulli
Demián Renzulli
X GitHub Glitch

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

L'app di esempio è un sito web che dispone di 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 un'alta percentuale di utenti acceda alla pagina dei dettagli del prodotto. Ciò rende la pagina del prodotto un ottimo candidato per il precaricamento sulla pagina di destinazione.

Misurare il rendimento

Stabilisci innanzitutto 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 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 Limitazione, seleziona 3G veloce per simulare un tipo di connessione lenta.

  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 Rete che mostra i tempi di caricamento per product-details.html

Precarica la pagina del prodotto con <link rel="prefetch">

Per migliorare la navigazione, inserisci un tag prefetch nella pagina di destinazione per precaricare la pagina product-details.html:

  • Aggiungi il seguente elemento <link> all'intestazione 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à presente nella cache. I valori di esempio per questo attributo includono: document, script, style, font, image e altri.

Per verificare che il precaricamento funzioni:

  1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi 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 Limitazione, seleziona 3G veloce per simulare un tipo di connessione lenta.

  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 Network che mostra il valore product-details.html precaricato.

La pagina viene mantenuta nella cache HTTP per cinque minuti, dopodiché vengono applicate le normali regole Cache-Control del documento. In questo caso, product-details.html ha un'intestazione cache-control con 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 la dicitura "cache di precaricamento", il che significa che la risorsa è stata recuperata dalla cache del browser anziché dalla rete.
  • La colonna Tempo indica che il tempo necessario per il caricamento del documento è di circa 10 ms.

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

Riquadro Rete che mostra product-details.html recuperato dalla cache di precaricamento.

Credito aggiuntivo: usa prefetch come miglioramento progressivo

Il precaricamento è consigliato meglio come miglioramento progressivo per gli utenti che navigano su connessioni veloci. Puoi utilizzare l'API Network Information per verificare le condizioni di rete e in base ai tag di precaricamento inseriti in modo dinamico. In questo modo, puoi ridurre al minimo il consumo di dati e risparmiare sui costi per gli utenti che utilizzano piani dati lenti o costosi.

Per implementare il precaricamento 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>

Quindi aggiungi il seguente codice a public/script.js per dichiarare una funzione che inserisce dinamicamente il tag prefetch quando l'utente utilizza 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 opera nel seguente modo:

  • Controlla la proprietà effectiveType dell'API Network Information per determinare se l'utente utilizza una connessione 4G (o più veloce).
  • Se questa condizione è soddisfatta, genera un tag <link> con prefetch come tipo di suggerimento, trasmette l'URL che verrà precaricato nell'attributo href e indica che la risorsa è un document HTML nell'attributo as.
  • Infine, inserisce lo script in modo dinamico nell'elemento head della pagina.

Poi aggiungi script.js a views/index.html, subito prima del tag </body> di chiusura:

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

La richiesta di script.js alla fine della pagina garantisce che questa verrà caricata ed eseguita dopo che la pagina è stata analizzata e caricata.

Per assicurarti che il precaricamento non interferisca con le risorse fondamentali per la pagina corrente, aggiungi il seguente snippet di codice per chiamare injectLinkPrefetchIn4g() nell'evento window.load:

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

La pagina di destinazione ora precarica product-details.html solo su connessioni rapide. Per verificare che:

  1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi 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 Minore, seleziona Online.
  5. Ricarica l'app.

Dovresti vedere product-details.html nel riquadro Network:

Riquadro Network che mostra il valore product-details.html precaricato.

Per verificare che la pagina del prodotto non sia precaricata su connessioni lente:

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

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

Riquadro Network che mostra il valore product-details.html non precaricato.

Precarica il foglio di stile per la pagina del prodotto con l'intestazione Link HTTP

L'intestazione HTTP Link può essere utilizzata per precaricare lo stesso tipo di risorse del tag link. Decidere quando utilizzare l'una o l'altra dipende soprattutto dalle tue preferenze, poiché la differenza di rendimento non è significativa. In questo caso, lo utilizzerai per precaricare il CSS principale della pagina di prodotto, in modo da migliorarne ulteriormente il rendering.

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

  1. Apri il file server.js e cerca il gestore get() per l'URL principale: /.
  2. Aggiungi la seguente riga all'inizio del gestore:
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 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.

L'elemento style-product.css viene ora precaricato alla priorità più bassa dopo il caricamento della pagina di destinazione:

Riquadro Network che mostra il precaricamento style-product.css.

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

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

Il file style-product.css viene recuperato dalla "cache di precaricamento" e il caricamento ha richiesto solo 12 ms.