In diesem Codelab wird die Leistung der folgenden Webseite durch das Vorladen und Vorabrufen einiger Ressourcen verbessert:
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
.
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:
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Netzwerk.
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.
Kritische Ressourcen vorab laden
Die Datei main.css ist ein wichtiges Asset, das direkt 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 dem Kopf des Dokuments ein Link-Element hinzu.
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. Mit as="style" werden Stylesheet-Dateien vorab geladen.
Laden Sie die Anwendung neu und sehen Sie sich den Bereich Netzwerk in den DevTools an.
Beachten Sie, dass der Browser die CSS-Datei abruft, bevor das JavaScript, das für das Abrufen verantwortlich ist, fertig geparst wurde. Bei der Vorab-Ladefunktion 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.
Chrome zeigt im Bereich Console eine Warnung an, wenn eine vorab geladene Ressource von der Seite einige Sekunden nach dem Laden nicht verwendet wird.
Anhand dieser Warnung können Sie feststellen, ob Sie vorab geladene Ressourcen haben, die nicht sofort von Ihrer Webseite 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 Ressourcentypen, die abgerufen werden können, zusammen mit den korrekten Werten, die für das Attribut as verwendet werden sollten, findest du im MDN-Artikel zum Vorabladen.
Zukünftige Ressourcen vorab abrufen
Prefetch ist ein weiterer Browserhinweis, mit dem eine Anfrage für ein Asset gestellt 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.
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 Entwicklertools den Bereich Netzwerk und entfernen Sie das Häkchen bei Cache deaktivieren.
Laden Sie die Anwendung neu und achten Sie darauf, dass für details.css eine Anfrage mit sehr niedriger Priorität gesendet wird, nachdem alle anderen Dateien abgerufen wurden.
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.
Klicken Sie in den DevTools auf die Netzwerkanfrage details.css, um die Details aufzurufen. Sie werden feststellen, dass die Datei aus dem Festplatten-Cache des Browsers abgerufen wird.
Durch die Nutzung der Inaktivitätszeit des Browsers sendet der Prefetch vorab eine Anfrage für eine Ressource, 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.
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 bietet Unterstützung für das Vorabladen oder Vorabrufen von Blöcken, 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 wird, fügt Webpack ein Prefetch-Tag für die Ressource in den Header des Dokuments ein. Du findest sie in den Entwicklertools im Bereich Elemente.
Wenn Sie die Anfragen im Bereich Netzwerk beobachten, sehen Sie auch, dass dieser Block mit niedriger Priorität abgerufen wird, nachdem alle anderen Ressourcen angefordert wurden.
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 Anwendung Leistungsverbesserungen bemerken werden.
Weitere Informationen zu den Auswirkungen von Preloading und Prefetching auf Ihre Website finden Sie in den folgenden Artikeln: