Diese Seite wurde von der Cloud Translation API übersetzt.

Zwei Möglichkeiten für den Vorabruf: <link> Tags und HTTP-Header

Demián Renzulli

In diesem Codelab implementieren Sie den Vorabruf auf zwei Arten: mit <link rel="prefetch"> und mit dem HTTP-Link-Header.

Die Beispiel-App ist eine Website mit einer Angebots-Landingpage mit einem Sonderrabatt für das meistverkaufte T-Shirt des Geschäfts. Da die Landingpage auf ein einzelnes Produkt verweist, kann davon ausgegangen werden, dass ein hoher Prozentsatz von Nutzern die Produktdetailseite aufruft. Dadurch eignet sich die Produktseite hervorragend für den Vorabruf auf der Landingpage.

Leistung messen

Legen Sie zunächst die Basisleistung fest:

Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Wählen Sie in der Drop-down-Liste Drosselung die Option Schnelles 3G aus, um eine langsame Verbindung zu simulieren.
Klicken Sie in der Beispiel-App auf Jetzt kaufen, um die Produktseite zu laden.

Das Laden der Seite product-details.html dauert etwa 600 ms:

Netzwerkbereich mit Ladezeiten für product-details.html

Produktseite mit `<link rel="prefetch">` vorabrufen

Sie können die Navigation verbessern, indem Sie ein prefetch-Tag in die Landingpage einfügen, damit die product-details.html-Seite vorab abgerufen wird:

Fügen Sie dem Header der Datei views/index.html das folgende <link>-Element hinzu:

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

Das Attribut as ist optional, wird aber empfohlen. Es hilft dem Browser, die richtigen Header festzulegen und zu bestimmen, ob sich die Ressource bereits im Cache befindet. Beispielwerte für dieses Attribut: document, script, style, font, image und anderer Parameter.

So überprüfen Sie, ob der Vorabruf funktioniert:

Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Wählen Sie in der Drop-down-Liste Drosselung die Option Schnelles 3G aus, um eine langsame Verbindung zu simulieren.
Entfernen Sie das Häkchen aus dem Kästchen zum Deaktivieren des Cache.
Aktualisieren Sie die App.

Wenn jetzt die Landingpage geladen wird, wird auch die Seite „product-details.html“ geladen, jedoch mit der niedrigsten Priorität:

Netzwerkbereich mit dem Prefetch von product-details.html

Die Seite wird fünf Minuten lang im HTTP-Cache gespeichert. Danach gelten die normalen Cache-Control-Regeln für das Dokument. In diesem Fall hat product-details.html einen cache-control-Header mit dem Wert public, max-age=0. Das bedeutet, dass die Seite insgesamt fünf Minuten gespeichert wird.

Leistung neu bewerten

Aktualisieren Sie die App.
Klicken Sie in der Beispiel-App auf Jetzt kaufen, um die Produktseite zu laden.

Sehen Sie sich das Steuerfeld Netzwerk an. Es gibt zwei Unterschiede zum ersten Netzwerk-Trace:

In der Spalte Größe wird „Prefetch-Cache“ angezeigt. Das bedeutet, dass diese Ressource aus dem Cache des Browsers und nicht aus dem Netzwerk abgerufen wurde.
In der Spalte Zeit sehen Sie, dass das Laden des Dokuments jetzt etwa 10 ms beträgt.

Das ist eine Reduzierung um ungefähr 98% im Vergleich zur vorherigen Version, die etwa 600 ms dauerte.

Netzwerkbereich mit dem aus dem Prefetch-Cache abgerufenen „product-details.html“-Bereich.

Zusätzlicher Beitrag: `prefetch` als progressive Verbesserung verwenden

Prefetching eignet sich am besten als progressive Verbesserung für Nutzer, die über schnelle Verbindungen surfen. Sie können die Network Information API verwenden, um die Netzwerkbedingungen zu überprüfen und Prefetch-Tags basierend auf diesen dynamisch einzufügen. Auf diese Weise können Sie den Datenverbrauch minimieren und Kosten für Nutzer mit langsamen oder teuren Datentarifen sparen.

Um den adaptiven Prefetch zu implementieren, müssen Sie zuerst das <link rel="prefetch">-Tag aus views/index.html entfernen:

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

Fügen Sie dann den folgenden Code in public/script.js ein, um eine Funktion zu deklarieren, die das prefetch-Tag dynamisch einfügt, wenn der Nutzer eine schnelle Verbindung hat:

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);
    }
}

Die Funktion funktioniert so:

Sie prüft die Eigenschaft effectiveType der Network Information API, um festzustellen, ob der Nutzer eine 4G-Verbindung (oder eine schnellere) Verbindung verwendet.
Ist diese Bedingung erfüllt, wird ein <link>-Tag mit prefetch als Hinweistyp generiert, die vorab abgerufene URL im href-Attribut übergeben und im as-Attribut wird angegeben, dass die Ressource eine HTML-document ist.
Schließlich wird das Skript dynamisch in den head der Seite eingefügt.

Als Nächstes fügen Sie script.js zu views/index.html direkt vor dem schließenden </body>-Tag hinzu:

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

Wenn Sie script.js am Ende der Seite anfordern, wird sichergestellt, dass die URL geladen und ausgeführt wird, nachdem die Seite geparst und geladen wurde.

Damit der Vorabruf keine kritischen Ressourcen für die aktuelle Seite beeinträchtigt, fügen Sie das folgende Code-Snippet hinzu, um injectLinkPrefetchIn4g() für das window.load-Ereignis aufzurufen:

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

product-details.html ruft jetzt nur noch bei schnellen Verbindungen vorab von der Landingpage ab. Gehen Sie dazu so vor:

Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Wählen Sie in der Drop-down-Liste Drosselung die Option Online aus.
Aktualisieren Sie die App.

Im Steuerfeld „Network“ sollte product-details.html angezeigt werden:

Netzwerkbereich mit dem Prefetch von product-details.html

So sorgen Sie dafür, dass die Produktseite bei langsamen Verbindungen nicht vorab abgerufen wird:

Wählen Sie in der Drop-down-Liste „Drosselung“ die Option Langsames 3G aus.
Aktualisieren Sie die App.

Das Steuerfeld Netzwerk sollte nur die Ressourcen für die Landingpage ohne product-details.html enthalten:

Netzwerkbereich, in dem angezeigt wird, dass die Datei „product-details.html“ nicht vorab abgerufen wird.

Rufe das Stylesheet für die Produktseite mit dem HTTP-Header `Link` vorab auf

Mit dem HTTP-Link-Header kann derselbe Ressourcentyp wie mit dem link-Tag vorab abgerufen werden. Wann Sie entscheiden können, hängt von Ihren Präferenzen ab, da der Leistungsunterschied unbedeutend ist. In diesem Fall nutzen Sie es, um das Haupt-CSS der Produktseite vorab abzurufen und so das Rendering zu verbessern.

Fügen Sie der Serverantwort für die Landingpage einen HTTP-Link-Header für style-product.css hinzu:

Öffnen Sie die Datei server.js und suchen Sie nach dem get()-Handler für die Stamm-URL: /.
Fügen Sie am Anfang des Handlers die folgende Zeile ein:

app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});

Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Aktualisieren Sie die App.

Das style-product.css-Element wird jetzt mit der niedrigsten Priorität vorab abgerufen, nachdem die Landingpage geladen wurde:

Netzwerkbereich mit vorab abgerufenem style-product.css.

Klicken Sie auf Jetzt kaufen, um die Produktseite aufzurufen. Sehen Sie sich das Steuerfeld Netzwerk an:

Netzwerkbereich mit dem aus dem Prefetch-Cache abgerufenen „style-product.css“.

Die Datei style-product.css wird aus dem Prefetch-Cache abgerufen und das Laden dauerte nur 12 ms.

Hinweis : Wenn Sie den HTTP-Header Link verwenden, können Sie je nach Netzwerkbedingungen anhand der Informationen in den Clienthinweisen entscheiden, ob ein Prefetch ausgeführt werden soll.