In den letzten Modulen haben Sie Konzepte wie das Aufschieben des Ladens von JavaScript und das Lazy Loading von Bildern und <iframe>-Elementen kennengelernt.
Durch das Zurückstellen des Ladens von Ressourcen wird die Netzwerk- und CPU-Nutzung während des anfänglichen Seitenaufbaus verringert, da Ressourcen an dem Punkt heruntergeladen werden, an dem sie benötigt werden, anstatt sie vorab zu laden, wo sie möglicherweise ungenutzt bleiben.
Dadurch können die anfänglichen Seitenladezeiten verbessert werden. Bei nachfolgenden Interaktionen kann es jedoch zu einer Verzögerung kommen, wenn die für die Unterstützung erforderlichen Ressourcen nicht bereits zum Zeitpunkt des Auftretens geladen wurden.
Wenn eine Seite beispielsweise eine benutzerdefinierte Datumsauswahl enthält, können Sie die Ressourcen der Datumsauswahl verschieben, bis der Nutzer mit dem Element interagiert. Wenn die Ressourcen der Datumsauswahl bei Bedarf geladen werden, kann es jedoch zu einer Verzögerung kommen – möglicherweise mit einer geringen Verzögerung, aber je nach Netzwerkverbindung des Nutzers, Gerätefunktionen oder beidem nicht –, bis die Ressourcen heruntergeladen, geparst und für die Ausführung verfügbar sind.
Das ist nicht immer einfach. Sie möchten nicht, dass ungenutzte Ressourcen geladen werden, um Bandbreite zu verschwenden. Aber das Verzögern von Interaktionen und nachfolgenden Seitenladevorgängen ist unter Umständen auch nicht ideal. Glücklicherweise gibt es eine Reihe von Tools, mit denen Sie eine bessere Balance zwischen diesen beiden Extremen finden können. In diesem Modul werden einige Techniken beschrieben, die Sie hierfür verwenden können, z. B. das Vorabrufen von Ressourcen, das Pre-Rendering ganzer Seiten und das Precaching von Ressourcen mithilfe eines Service Workers.
Demnächst benötigte Ressourcen mit niedriger Priorität vorabrufen
Es ist möglich, Ressourcen wie Bilder, Stylesheets oder JavaScript-Ressourcen vorab mit dem Ressourcenhinweis <link rel="prefetch"> abzurufen. Der Hinweis prefetch informiert den Browser darüber, dass in naher Zukunft wahrscheinlich eine Ressource benötigt wird.
Wenn ein prefetch-Hinweis angegeben ist, kann der Browser eine Anfrage für diese Ressource mit niedriger Priorität initiieren, um zu vermeiden, dass mit Ressourcen konkurriert wird, die für die aktuelle Seite erforderlich sind.
Das Vorabrufen von Ressourcen kann die Nutzerfreundlichkeit verbessern, da der Nutzer nicht auf den Download von Ressourcen, die in naher Zukunft benötigt werden, warten muss, da sie bei Bedarf sofort aus dem Festplatten-Cache abgerufen werden können.
<head>
<!-- ... -->
<link rel="prefetch" as="script" href="/date-picker.js">
<link rel="prefetch" as="style" href="/date-picker.css">
<!-- ... -->
</head>
Das vorherige HTML-Snippet informiert den Browser, dass er date-picker.js und date-picker.css vorab abrufen kann, wenn er inaktiv ist. Es ist auch möglich, Ressourcen dynamisch im Voraus abzurufen, wenn der Nutzer mit der Seite in JavaScript interagiert.
prefetch wird in allen modernen Browsern mit Ausnahme von Safari unterstützt, da es dort hinter einer Markierung verfügbar ist. Wenn Sie einen Service Worker verwenden und Ressourcen für Ihre Website vorzeitig so laden müssen, dass sie in allen Browsern funktionieren, lesen Sie den späteren Abschnitt zum Precaching von Ressourcen mithilfe eines Service Workers in diesem Modul.
Seiten vorabrufen, um zukünftige Navigationen zu beschleunigen
Es ist auch möglich, eine Seite und alle ihre Unterressourcen vorab abzurufen. Dazu geben Sie das Attribut as="document" an, wenn auf ein HTML-Dokument verwiesen wird:
<link rel="prefetch" href="/page" as="document">
Wenn der Browser inaktiv ist, wird möglicherweise eine Anfrage mit niedriger Priorität für /page initiiert.
In Chromium-basierten Browsern können Sie Dokumente mithilfe der Speculation Rules API vorab abrufen. Die Spekulationsregeln sind als JSON-Objekt definiert, das im HTML-Code der Seite enthalten ist oder dynamisch über JavaScript hinzugefügt wird:
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>
Das JSON-Objekt beschreibt eine oder mehrere Aktionen und unterstützt derzeit nur prefetch und prerender sowie eine Liste der mit dieser Aktion verknüpften URLs. Im vorherigen HTML-Snippet wird der Browser angewiesen, /page-a und /page-b vorab abzurufen. Ähnlich wie bei <link rel="prefetch"> sind Spekulationsregeln ein Hinweis, den der Browser unter bestimmten Umständen ignorieren kann.
Bibliotheken wie Quicklink verbessern die Seitennavigation, indem Links zu Seiten dynamisch vorab abgerufen oder vorab gerendert werden, sobald sie im Darstellungsbereich des Nutzers sichtbar sind. Im Vergleich zum Vorabruf aller Links auf der Seite erhöht sich so die Wahrscheinlichkeit, dass der Nutzer letztendlich zu dieser Seite gelangt.
Seiten vorab rendern
Zusätzlich zum Vorabruf von Ressourcen können Sie den Browser auch anweisen, eine Seite vorab zu rendern, bevor der Nutzer sie aufruft. Dadurch können Seiten fast sofort geladen werden, da die Seite und ihre Ressourcen im Hintergrund abgerufen und verarbeitet werden. Sobald der Nutzer die Seite aufgerufen hat, wird sie in den Vordergrund gestellt.
Pre-Rendering wird über die Speculation Rules API unterstützt:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
Demos zum Vorabruf und Pre-Rendering
Service Worker-Precaching
Es ist auch möglich, Ressourcen mit einem Service Worker spekulativ vorab abzurufen.
Durch das Service Worker-Precaching können Ressourcen mithilfe der Cache API abgerufen und gespeichert werden, sodass der Browser die Anfrage mit der Cache API verarbeiten kann, ohne das Netzwerk zu verwenden. Das Service Worker-Precaching verwendet eine sehr effektive Service Worker-Caching-Strategie, die als Nur-Cache-Strategie bezeichnet wird. Dieses Muster ist äußerst effektiv, da Ressourcen, die im Service Worker-Cache platziert wurden, auf Anfrage nahezu sofort abgerufen werden.
Um Ressourcen mithilfe eines Service Workers vorab im Cache zu speichern, können Sie Workbox verwenden. Sie können aber auch eigenen Code schreiben, um einen vordefinierten Satz von Dateien im Cache zu speichern. Unabhängig davon, wie Sie einen Service Worker verwenden, um Ressourcen vorab im Cache zu speichern, sollten Sie wissen, dass das Precaching stattfindet, wenn der Service Worker installiert ist. Nach der Installation können die vorab im Cache gespeicherten Ressourcen auf jeder Seite, die der Service Worker auf Ihrer Website steuert, abgerufen werden.
Workbox verwendet ein Precache-Manifest, um zu bestimmen, welche Ressourcen vorab im Cache gespeichert werden sollen. Ein Precache-Manifest ist eine Liste von Dateien und Versionsinformationen, die als „Source of Truth“ für die Ressourcen dient, die vorab im Cache gespeichert werden sollen.
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
Der vorherige Code ist ein Beispielmanifest, das zwei Dateien enthält: script.ffaa4455.js und /index.html. Wenn eine Ressource in der Datei selbst Versionsinformationen enthält (auch als Datei-Hash bezeichnet), kann das Attribut revision als null belassen werden, da die Datei bereits versioniert ist (z. B. ffaa4455 für die Ressource script.ffaa4455.js im vorherigen Code). Bei nicht versionierten Ressourcen kann zum Zeitpunkt der Build-Erstellung eine Überarbeitung dafür generiert werden.
Nach der Einrichtung kann ein Service Worker verwendet werden, um statische Seiten oder deren Unterressourcen vorab im Cache zu speichern, um nachfolgende Seitennavigationen zu beschleunigen.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
Auf einer E-Commerce-Produkteintragsseite kann ein Service Worker beispielsweise verwendet werden, um das CSS und den JavaScript-Code, der für das Rendern der Produktdetailseite erforderlich ist, vorab im Cache zu speichern. Dadurch wird die Navigation zur Produktdetailseite viel schneller. Im vorherigen Beispiel sind product-page.ac29.css und product-page.39a1.js vorab im Cache gespeichert. Mit der in workbox-precaching verfügbaren Methode precacheAndRoute werden die erforderlichen Handler automatisch registriert, damit die vorab im Cache gespeicherten Ressourcen bei Bedarf aus der Service Worker API abgerufen werden.
Da Service Worker weitgehend unterstützt werden, können Sie das Service Worker-Precaching in jedem modernen Browser verwenden, in dem dies erforderlich ist.
Wissen testen
Bei welcher Priorität tritt ein prefetch-Hinweis auf?
Was ist der Unterschied zwischen dem Abrufen und dem Vorab-Rendering einer Seite?
Der Service Worker-Cache und der HTTP-Cache sind identisch.
Als Nächstes: Übersicht über Web Worker
Sie wissen jetzt, wie Prefetch, Pre-Rendering und Service Worker-Precaching für die Beschleunigung des Aufrufs zukünftiger Seiten von Vorteil sein kann. Nun können Sie fundierte Entscheidungen darüber treffen, wie dies für Ihre Website und deren Nutzer von Vorteil sein kann.
Als Nächstes erhalten Sie einen Überblick über Web Worker, in denen erläutert wird, wie sie teure Arbeit aus dem Hauptthread abnehmen und dem Hauptthread mehr Raum für Nutzerinteraktionen geben können. Wenn Sie sich jemals gefragt haben, wie Sie dem Hauptthread mehr Raum geben können, sind die nächsten beiden Module die Zeit wert.