Codelab: Wichtige Assets vorab laden, um die Ladegeschwindigkeit zu verbessern

In diesem Codelab wird die Leistung der folgenden Webseite durch das Vorladen und Vorabrufen einiger Ressourcen verbessert:

App-Screenshot

Messen

Messen Sie zuerst die Leistung der Website, bevor Sie Optimierungen vornehmen.

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.

Führen Sie die Lighthouse-Leistungsprüfung (Lighthouse > Optionen > Leistung) für die Liveversion Ihres Glitch durch. Weitere Informationen finden Sie unter Mit Lighthouse Leistungspotenziale erkennen.

Lighthouse zeigt die folgende fehlgeschlagene Prüfung für eine Ressource an, die zu spät abgerufen wird:

Lighthouse: Prüfung des Vorabladens wichtiger Anfragen
  • Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  • Klicken Sie auf den Tab Netzwerk.
Netzwerkbereich mit spät erkannter Ressource

Die Datei main.css wird nicht über ein Link-Element (<link>) im HTML-Dokument abgerufen, sondern über eine separate JavaScript-Datei (fetch-css.js), die das Link-Element nach dem Ereignis window.onLoad an das DOM anhängt. Das bedeutet, dass die Datei erst nach dem Parsen und Ausführen der JS-Datei im Browser abgerufen wird. Ebenso wird eine in main.css angegebene Webschriftart (K2D.woff2) erst abgerufen, wenn der Download der CSS-Datei abgeschlossen ist.

Die Kette kritischer Anfragen stellt die Reihenfolge der Ressourcen dar, die vom Browser priorisiert und abgerufen werden. Für diese Webseite sieht das derzeit so aus:

├─┬ / (initial HTML file)
  └── fetch-css.js
    └── main.css
      └── K2D.woff2

Da sich die CSS-Datei auf der dritten Ebene der Anfragekette befindet, hat Lighthouse sie als spät erkannte Ressource identifiziert.

Wichtige Ressourcen vorab laden

Die main.css-Datei ist ein wichtiges Asset, das sofort nach dem Laden der Seite benötigt wird. Verwenden Sie für wichtige Dateien wie diese Ressource, die erst spät in Ihrer Anwendung abgerufen werden, ein Link-Preload-Tag, um den Browser zum früheren Herunterladen aufzufordern. Fügen Sie dazu ein Link-Element in den Kopf des Dokuments ein.

Fügen Sie ein Preloading-Tag für diese Anwendung hinzu:

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
</head>

Mit dem Attribut as wird angegeben, welcher Ressourcentyp abgerufen wird. as="style" wird verwendet, um Stylesheet-Dateien vorab zu laden.

Laden Sie die Anwendung neu und sehen Sie sich den Bereich Netzwerk in den DevTools an.

Netzwerkbereich mit vorab geladener Ressource

Beachten Sie, dass der Browser die CSS-Datei abruft, bevor das JavaScript, das für das Abrufen verantwortlich ist, fertig geparst wurde. Beim Vorabladen weiß der Browser, dass er die Ressource vorzeitig abrufen muss, da davon ausgegangen wird, dass sie für die Webseite entscheidend ist.

Bei falscher Verwendung kann das Preloading die Leistung beeinträchtigen, da unnötige Anfragen für nicht verwendete Ressourcen gesendet werden. In dieser Anwendung ist details.css eine weitere CSS-Datei, die sich im Stammverzeichnis des Projekts befindet, aber für eine separate /details route verwendet wird. Fügen Sie als Beispiel für eine falsche Verwendung von Preloading auch einen Preloading-Hinweis für diese Ressource hinzu.

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="details.css" as="style">
</head>

Laden Sie die Anwendung neu und sehen Sie sich den Bereich Netzwerk an. Es wird eine Anfrage zum Abrufen von details.css gestellt, obwohl sie von der Webseite nicht verwendet wird.

Netzwerkbereich mit unnötiger Vorab-Ladezeit

Chrome zeigt im Bereich Console eine Warnung an, wenn eine vorab geladene Ressource von der Seite innerhalb weniger Sekunden nach dem Laden nicht verwendet wird.

Warnung zum Vorabladen in der Console

Anhand dieser Warnung können Sie erkennen, ob es vorab geladene Ressourcen gibt, die von Ihrer Webseite nicht sofort verwendet werden. Sie können den unnötigen Link zum Vorladen für diese Seite jetzt entfernen.

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="details.css" as="style">
</head>

Eine Liste aller Arten von Ressourcen, die abgerufen werden können, sowie die richtigen Werte für das as-Attribut finden Sie im MDN-Artikel zum Vorladen.

Zukünftige Ressourcen vorab abrufen

Prefetch ist ein weiterer Browserhinweis, mit dem eine Anfrage für ein Asset gesendet werden kann, das für einen anderen Navigationspfad verwendet wird, aber eine niedrigere Priorität als andere wichtige Assets hat, die für die aktuelle Seite benötigt werden.

Wenn Sie auf dieser Website auf das Bild klicken, werden Sie zu einer separaten details/-Route weitergeleitet.

Route mit Details

Eine separate CSS-Datei namens details.css enthält alle für diese einfache Seite erforderlichen Stile. Fügen Sie index.html ein Linkelement hinzu, um diese Ressource vorab abzurufen.

<head>
  <!-- ... -->
  <link rel="prefetch" href="details.css">
</head>

Wenn Sie wissen möchten, wie dadurch eine Anfrage für die Datei ausgelöst wird, öffnen Sie in den DevTools den Bereich Netzwerk und entfernen Sie das Häkchen bei Cache deaktivieren.

Cache in den Chrome-Entwicklertools deaktivieren

Laden Sie die Anwendung neu und achten Sie darauf, dass eine Anfrage mit sehr niedriger Priorität für details.css gesendet wird, nachdem alle anderen Dateien abgerufen wurden.

Netzwerkbereich mit vorab abgerufener Ressource

Klicken Sie bei geöffneten Entwicklertools auf das Bild auf der Website, um die Seite details aufzurufen. Da in details.html ein Linkelement verwendet wird, um details.css abzurufen, wird wie erwartet eine Anfrage an die Ressource gesendet.

Netzwerkanfragen auf Detailseiten

Klicken Sie in den DevTools auf die Netzwerkanfrage details.css, um die Details aufzurufen. Sie sehen, dass die Datei aus dem Festplattencache des Browsers abgerufen wird.

Anfrage für Details aus dem Datenträgercache abgerufen

Durch die Nutzung der Inaktivitätszeiten des Browsers wird eine frühzeitige Anfrage für eine Ressource gestellt, die für eine andere Seite benötigt wird. Dadurch werden zukünftige Navigationsanfragen beschleunigt, da der Browser das Asset früher im Cache speichern und bei Bedarf aus dem Cache ausliefern kann.

Vorabladen und Prefetching mit webpack

Im Artikel JavaScript-Nutzlast mit Code Splitting reduzieren wird die Verwendung dynamischer Importe zum Aufteilen eines Bundles in mehrere Chunks erläutert. Dies wird anhand einer einfachen Anwendung veranschaulicht, die beim Senden eines Formulars dynamisch ein Modul aus Lodash importiert.

Magic Sorter App, die Codesplitting veranschaulicht

Hier können Sie den Glitch für diese Anwendung aufrufen.

Der folgende Codeblock in src/index.js, ist für den dynamischen Import der Methode verantwortlich, wenn auf die Schaltfläche geklickt wird.

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Durch das Aufteilen eines Bundles wird die Seitenladezeit verkürzt, da die anfängliche Größe reduziert wird. Version 4.6.0 von webpack unterstützt das Vorladen oder Vorabladen von Chunks, die dynamisch importiert werden. Anhand dieser Anwendung kann die lodash-Methode bei Inaktivität des Browsers vorab abgerufen werden. Wenn ein Nutzer auf die Schaltfläche klickt, gibt es keine Verzögerung beim Abrufen der Ressource.

Verwenden Sie den Kommentarparameter webpackPrefetch in einem dynamischen Import, um einen bestimmten Block vorab abzurufen. So würde es bei dieser bestimmten Anwendung aussehen.

form.addEventListener("submit", e => {
  e.preventDefault()
  import(/* webpackPrefetch: true */ 'lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Sobald die Anwendung neu geladen wurde, fügt webpack ein Prefetch-Tag für die Ressource in den Head des Dokuments ein. Sie sehen das im DevTools-Steuerfeld Elemente.

Bereich „Elemente“ mit Prefetch-Tag

Wenn Sie sich die Anfragen im Bereich Netzwerk ansehen, sehen Sie auch, dass dieser Teil mit niedriger Priorität abgerufen wird, nachdem alle anderen Ressourcen angefordert wurden.

Netzwerkbereich mit vorab abgerufener Anfrage

Obwohl prefetch für diesen Anwendungsfall sinnvoller ist, unterstützt webpack auch das Vorladen von Chunks, die dynamisch importiert werden.

import(/* webpackPreload: true */ 'module')

Fazit

Nach diesem Codelab sollten Sie ein solides Verständnis dafür haben, wie Sie die Nutzerfreundlichkeit Ihrer Website durch das Vorladen oder Vorabladen bestimmter Assets verbessern können. Diese Techniken sollten nicht für jede Ressource verwendet werden. Eine falsche Verwendung kann die Leistung beeinträchtigen. Die besten Ergebnisse erzielen Sie, wenn Sie nur selektiv vorladen oder vorab laden.

Zusammenfassung:

  • Verwenden Sie preload für Ressourcen, die erst spät erkannt werden, aber für die aktuelle Seite wichtig sind.
  • Verwenden Sie prefetch für Ressourcen, die für einen zukünftigen Navigationspfad oder eine Nutzeraktion erforderlich sind.

Nicht alle Browser unterstützen derzeit sowohl Preloading als auch Prefetching. Das bedeutet, dass nicht alle Nutzer Ihrer App Leistungsverbesserungen bemerken werden.

Weitere Informationen zu den Auswirkungen von Preloading und Prefetching auf Ihre Website finden Sie in den folgenden Artikeln: