In diesem Codelab wird die Leistung der folgenden Webseite verbessert, indem einige Ressourcen vorab geladen und vorab abgerufen werden:
Messen
Analysieren Sie zuerst die Leistung der Website, bevor Sie Optimierungen vornehmen.
- Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild
aus.
Führen Sie die Lighthouse-Leistungsprüfung (Lighthouse > Optionen > Leistung) für die Live-Version von Glitch aus (siehe auch Optimierungsmöglichkeiten mit Lighthouse ermitteln).
Lighthouse zeigt die folgende fehlgeschlagene Prüfung für eine Ressource, die spät abgerufen wird:
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem 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. Stattdessen wird das Link-Element nach dem window.onLoad-Ereignis von der separaten JavaScript-Datei fetch-css.js an das DOM angehängt. Die Datei wird also erst abgerufen, nachdem der Browser die JS-Datei geparst und ausgeführt hat. 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 priorisiert und vom Browser 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 sofort nach dem Laden der Seite benötigt wird. Verwenden Sie für wichtige Dateien wie diese Ressource, die spät in Ihrer Anwendung abgerufen werden, ein Tag zum Vorabladen von Links, um den Browser anzuweisen, sie früher herunterzuladen, indem Sie ein Link-Element im Header des Dokuments hinzufügen.
Fügen Sie ein Vorablade-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 Stylesheetdateien vorab geladen.
Aktualisieren Sie die App und sehen Sie sich in den Entwicklertools den Bereich Netzwerk an.
Der Browser ruft die CSS-Datei ab, bevor das für den Abruf zuständige JavaScript-Code vollständig geparst wurde. Durch das Vorabladen weiß der Browser, dass er die Ressource vorzeitig abrufen soll, in der Annahme, dass dies für die Webseite kritisch ist.
Bei unsachgemäßer Anwendung kann das Vorabladen die Leistung beeinträchtigen, da unnötige Anfragen für nicht verwendete Ressourcen gestellt werden. In dieser Anwendung ist details.css eine weitere CSS-Datei im Stammverzeichnis des Projekts, die für eine separate /details route verwendet wird. Fügen Sie auch für diese Ressource einen Vorladehinweis hinzu, um ein Beispiel dafür zu zeigen, wie das Vorabladen falsch verwendet werden kann.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
Aktualisieren Sie die Anwendung und sehen Sie sich den Bereich Netzwerk an.
Es wird eine Anfrage zum Abrufen von details.css gestellt, obwohl es nicht von der Webseite verwendet wird.
Chrome zeigt im Steuerfeld Konsole eine Warnung an, wenn eine vorab geladene Ressource einige Sekunden nach dem Laden von der Seite nicht verwendet wird.
Mit dieser Warnung können Sie feststellen, ob vorab geladene Ressourcen vorhanden sind, die nicht sofort von Ihrer Webseite verwendet werden. Sie können jetzt den unnötigen Vorablade-Link für diese Seite entfernen.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
Eine Liste aller Ressourcen, die abgerufen werden können, zusammen mit den korrekten Werten, die für das Attribut as verwendet werden sollten, finden Sie im MDN-Artikel zum Vorabladen.
Zukünftige Ressourcen vorabrufen
Prefetch ist ein weiterer Browserhinweis, der verwendet werden kann, um eine Anfrage für ein Asset zu senden, das für eine andere Navigationsroute, aber mit einer niedrigeren Priorität als andere wichtige Assets verwendet wird, die für die aktuelle Seite benötigt werden.
Wenn Sie auf dieser Website auf das Bild klicken, gelangen Sie zu einer separaten details/-Route.
Die separate CSS-Datei details.css enthält alle Stile, die für diese einfache Seite benötigt werden. 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 dies eine Anfrage für die Datei auslöst, öffnen Sie in den Entwicklertools den Bereich Netzwerk und entfernen Sie das Häkchen bei Cache deaktivieren.
Laden Sie die Anwendung neu. Sie sehen, dass für details.css eine Anfrage mit sehr niedriger Priorität gesendet wurde, nachdem alle anderen Dateien abgerufen wurden.
Klicke bei geöffneter Entwicklertools auf das Bild auf der Website, um die Seite details aufzurufen.
Da in details.html ein Linkelement zum Abrufen von details.css verwendet wird, wird wie erwartet eine Anfrage an die Ressource gestellt.
Klicke in den Entwicklertools auf die details.css-Netzwerkanfrage, um die Details aufzurufen. Sie werden feststellen, dass die Datei aus dem Festplatten-Cache des Browsers abgerufen wird.
Unter Nutzung der Inaktivitätszeit des Browsers sendet der Prefetch eine frühzeitige Anfrage an 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 bereitstellen kann.
Vorabladen und Prefetching mit Webpack
Im Beitrag JavaScript-Nutzlasten mit Codeaufteilung reduzieren wird beschrieben, wie Sie ein Bundle mithilfe dynamischer Importe in mehrere Blöcke aufteilen. Dies wird mit einer einfachen Anwendung veranschaulicht, die beim Senden eines Formulars dynamisch ein Modul aus Lodash importiert.
Du kannst hier auf den Glitch für diese App zugreifen.
Der folgende Codeblock, der sich in src/index.js, befindet, ist für das dynamische Importieren 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) });
});
Das Aufteilen eines Sets verkürzt die Seitenladezeiten, da seine anfängliche Größe reduziert wird. Version 4.6.0 des Webpack bietet Unterstützung für das Vorabladen oder Prefetchen von Blöcken, die dynamisch importiert werden. Wenn Sie diese Anwendung als Beispiel verwenden, kann die Methode lodash bei Inaktivität des Browsers vorab abgerufen werden. Wenn ein Nutzer die Schaltfläche drückt, gibt es keine Verzögerung, bis die Ressource abgerufen wird.
Sie können den Kommentarparameter webpackPrefetch in einem dynamischen Import verwenden, um einen bestimmten Block im Voraus abzurufen.
So würde das in dieser Anwendung aussehen.
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Nachdem die Anwendung neu geladen wurde, schleust Webpack ein Prefetch-Tag für die Ressource in den Header des Dokuments ein. Dies wird in den Entwicklertools im Bereich Elemente angezeigt.
Wenn Sie die Anfragen im Bereich Netzwerk beobachten, sehen Sie außerdem, dass dieser Block mit einer niedrigen Priorität abgerufen wird, nachdem alle anderen Ressourcen angefordert wurden.
Obwohl Prefetch für diesen Anwendungsfall sinnvoller ist, bietet Webpack auch Unterstützung für das Vorabladen von Blöcken, die dynamisch importiert werden.
import(/* webpackPreload: true */ 'module')
Fazit
Mit diesem Codelab sollten Sie genau wissen, wie das Vorabladen oder Vorabruf bestimmter Assets die Nutzerfreundlichkeit Ihrer Website verbessern kann. Es ist wichtig zu erwähnen, dass diese Techniken nicht für jede Ressource verwendet werden sollten und dass eine falsche Verwendung die Leistung beeinträchtigen kann. Die besten Ergebnisse erzielen Sie nur durch selektiv Vorabladen oder Vorabruf.
Zusammenfassung:
- Verwenden Sie Vorabladen für Ressourcen, die spät erkannt werden, aber für die aktuelle Seite entscheidend sind.
- Verwenden Sie Prefetch für Ressourcen, die für eine zukünftige Navigationsroute oder Nutzeraktion benötigt werden.
Nicht alle Browser unterstützen derzeit sowohl Vorabladen als auch Prefetch. Dies bedeutet, dass nicht alle Nutzer Ihrer Anwendung möglicherweise Leistungsverbesserungen bemerken.
Weitere Informationen zu bestimmten Aspekten der Auswirkungen des Vorabladens und des Vorabrufs auf Ihre Webseite finden Sie in den folgenden Artikeln: