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

Demián Renzulli
Demián Renzulli
X GitHub

In questo codelab, implementerai il recupero anticipato 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 che offre uno sconto speciale sulla maglietta più venduta del negozio. Poiché la pagina di destinazione rimanda a un singolo prodotto, è ragionevole supporre che un'alta percentuale di utenti accederà alla pagina dei dettagli del prodotto. Ciò rende la pagina di prodotto un ottimo candidato per il precaricamento nella pagina di destinazione.

Misurare le prestazioni

Per prima cosa, stabilisci il rendimento di base:

  1. Premi "Control+Maiusc+J" (o "Command+Opzione+J" su Mac) per aprire DevTools.

  2. Fai clic sulla scheda Rete.

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

  4. 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 di product-details.html

Precarica la pagina di 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 recupero preventivo funzioni:

  1. Premi "Control+Maiusc+J" (o "Command+Opzione+J" su Mac) per aprire DevTools.

  2. Fai clic sulla scheda Rete.

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

  4. Deseleziona la casella di controllo Disattiva cache.

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

Il riquadro Rete che mostra il precaricamento di product-details.html.

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 di 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. Rispetto alla traccia di rete iniziale, ci sono due differenze:

  • 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 mostra che il tempo necessario per caricare il documento è ora di circa 10 ms.

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

Il riquadro Rete mostra il file product-details.html recuperato dalla cache di precaricamento.

Crediti extra: utilizza prefetch come miglioramento progressivo

La prelettura viene implementata al meglio come miglioramento progressivo per gli utenti che navigano su connessioni veloci. Puoi utilizzare l'API Network Information per controllare le condizioni di rete e, in base a queste, inserire 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 prefetching 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 funziona 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, viene generato un tag <link> con prefetch come tipo di suggerimento, viene passato l'URL che verrà recuperato in anticipo 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.

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

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

La richiesta di script.js alla fine della pagina garantisce che venga caricato ed eseguito dopo l'analisi e il caricamento della pagina.

Per assicurarti che il recupero anticipato 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 precarica product-details.html solo su connessioni veloci. Per verificare che:

  1. Premi "Control+Maiusc+J" (o "Command+Opzione+J" su Mac) per aprire DevTools.
  2. Fai clic sulla scheda Rete.
  3. Nell'elenco a discesa Limitazione, seleziona Online.
  4. Ricarica l'app.

Nel riquadro Rete dovresti vedere product-details.html:

Il riquadro Rete che mostra il precaricamento di product-details.html.

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

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

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

Il riquadro Rete mostra che product-details.html non viene precaricato.

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

L'intestazione HTTP Link può essere utilizzata per precaricare 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 è insignificante. In questo caso, lo utilizzerai per precaricare 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() per l'URL radice: /.
  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. Premi "Control+Maiusc+J" (o "Command+Opzione+J" su Mac) per aprire DevTools.
  2. Fai clic sulla scheda Rete.
  3. Ricarica l'app.

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

Il riquadro Rete mostra il precaricamento di style-product.css.

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

Il riquadro Rete 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.