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

Demián Renzulli
Demián Renzulli
X GitHub Glitch

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, possiamo supporre che un'alta percentuale di utenti giunge alla pagina dei dettagli del prodotto. Ciò rende la pagina del prodotto un'ottima candidata per il precaricamento sulla pagina di destinazione.

Misurare le prestazioni

Innanzitutto, stabilisci il rendimento di riferimento:

  1. Fai clic su Remixa per modificare per rendere modificabile il progetto.
  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 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

Effettua il prelievo della 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'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 il funzionamento del precaricamento:

  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 "cache di precaricamento", a indicare 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>

Poi 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 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, genera un tag <link> con prefetch come tipo di suggerimento, trasmette l'URL che sarà precaricato nell'attributo href e indica che la risorsa è un document HTML nell'attributo as.
  • Infine, inserisce lo script in modo dinamico nel 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>

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 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.

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

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 principalmente dalle tue preferenze, poiché la differenza di prestazioni è 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 il gestore get() dell'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 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 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.