Browser mit Ressourcenhinweisen unterstützen

Im letzten Modul zur Optimierung des Ladens von Ressourcen haben Sie erfahren, wie sich verschiedene Seitenressourcen wie CSS und JavaScript auf die Ladegeschwindigkeit auswirken können. Außerdem haben Sie erfahren, wie Sie diese Elemente und deren Bereitstellung optimieren können, um das Rendern einer Seite zu beschleunigen. Dies ist der perfekte Zeitpunkt, um zu einem fortgeschritteneren Aspekt des Ladens von Ressourcen zu wechseln. Dabei geht es darum, dem Browser mithilfe von Ressourcenhinweisen zu helfen, die Ressourcen schneller zu laden.

Ressourcenhinweise können Entwicklern helfen, die Seitenladezeit weiter zu optimieren, indem sie dem Browser mitteilen, wie Ressourcen geladen und priorisiert werden sollen. Ein erster Satz von Ressourcenhinweisen wie preconnect und dns-prefetch wurde als Erstes eingeführt. Im Laufe der Zeit wurden jedoch preload und die Fetch Priority API hinzugefügt, um zusätzliche Funktionen bereitzustellen.

Ressourcenhinweise weisen den Browser an, bestimmte Aktionen im Voraus auszuführen, um die Ladeleistung zu verbessern. Ressourcenhinweise können Aktionen ausführen, wie z. B. frühe DNS-Lookups, eine vorherige Verbindung zu Servern und sogar das Abrufen von Ressourcen, bevor der Browser sie normalerweise erkennt.

Ressourcenhinweise können in HTML angegeben werden – häufig ganz oben im <head>-Element – oder als HTTP-Header festgelegt. In diesem Modul werden preconnect, dns-prefetch und preload sowie die spekulativen Abrufverhalten von prefetch behandelt.

preconnect

Der Hinweis preconnect wird verwendet, um eine Verbindung zu einem anderen Ursprung herzustellen, von dem aus Sie kritische Ressourcen abrufen. Beispielsweise können Sie Ihre Bilder oder Assets ursprungsübergreifend in einem CDN oder einem anderen ursprungsübergreifenden Netzwerk hosten:

<link rel="preconnect" href="https://example.com">

Mit preconnect gehen Sie davon aus, dass der Browser in naher Zukunft eine Verbindung zu einem bestimmten ursprungsübergreifenden Server herstellen möchte und diese Verbindung so schnell wie möglich herstellen sollte, idealerweise bevor der HTML-Parser oder der Scanner vorab geladen wird.

Wenn auf einer Seite viele ursprungsübergreifende Ressourcen vorhanden sind, verwende preconnect für die Ressourcen, die für die aktuelle Seite am wichtigsten sind.

Screenshot der Verbindungszeiten für eine Ressource im Bereich „Netzwerk“ der Chrome-Entwicklertools. Die Verbindungseinrichtung umfasst Verzögerungen, Proxyverhandlung, DNS-Lookup, Verbindungseinrichtung und TLS-Verhandlung.
Visualisierung der Verbindungszeiten, wie sie im Bereich „Netzwerk“ der Chrome-Entwicklertools zu sehen sind. Die Zeitangaben im roten Feld beziehen sich auf die Einrichtung einer Verbindung mit einem ursprungsübergreifenden Server, zu dem preconnect Abhilfe schaffen kann, indem Verbindungen früher hergestellt werden als zum Zeitpunkt der Erkennung der ursprungsübergreifenden Ressource.

Ein häufiger Anwendungsfall für preconnect ist Google Fonts. Google Fonts empfiehlt die Verwendung von preconnect an die Domain https://fonts.googleapis.com, die die @font-face-Deklarationen bereitstellt, und an die Domain https://fonts.gstatic.com, die die Schriftartdateien bereitstellt.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Mit dem Attribut crossorigin wird angegeben, ob eine Ressource über Cross-Origin Resource Sharing (CORS) abgerufen werden muss. Wenn Sie den preconnect-Hinweis verwenden und die vom Ursprung heruntergeladene Ressource CORS (z. B. Schriftartdateien) verwendet, müssen Sie dem preconnect-Hinweis das Attribut crossorigin hinzufügen.

dns-prefetch

Während das frühzeitige Öffnen von Verbindungen zu ursprungsübergreifenden Servern die anfängliche Seitenladezeit erheblich verbessern kann, ist es möglicherweise weder sinnvoll noch möglich, Verbindungen zu vielen ursprungsübergreifenden Servern gleichzeitig herzustellen. Wenn Sie Bedenken bezüglich einer übermäßigen Nutzung von preconnect haben, ist der Hinweis dns-prefetch ein wesentlich günstigerer Ressourcenhinweis.

Wie der Name erklärt, stellt dns-prefetch keine Verbindung zu einem ursprungsübergreifenden Server her, sondern führt im Voraus einfach einen DNS-Lookup dafür durch. Ein DNS-Lookup wird ausgeführt, wenn ein Domainname in seine zugrunde liegende IP-Adresse aufgelöst wird. Obwohl die Schichten von DNS-Caches auf Geräte- und Netzwerkebene zu einem im Allgemeinen schnellen Vorgang beitragen, nimmt dieser Vorgang immer noch einige Zeit in Anspruch.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

DNS-Lookups sind relativ kostengünstig und aufgrund der relativ geringen Kosten können sie in manchen Fällen das geeignetere Tool als preconnect sein. Insbesondere bei Links, die zu anderen Websites führen, von denen Sie glauben, dass sie dem Nutzer folgen, kann dies vor allem bei Links sinnvoll sein. Das Tool dnstradamus ist eines dieser Tools, das dies automatisch mithilfe von JavaScript tut. Mithilfe der Intersection Observer API werden dns-prefetch-Hinweise in den HTML-Code der aktuellen Seite eingefügt, wenn Links zu anderen Websites in den Darstellungsbereich des Nutzers gescrollt werden.

preload

Die Anweisung preload wird verwendet, um eine frühzeitige Anfrage nach einer Ressource zu initiieren, die für das Rendern der Seite erforderlich ist:

<link rel="preload" href="/lcp-image.jpg" as="image">

preload-Anweisungen sollten auf die spät erkannten kritischen Ressourcen beschränkt werden. Die häufigsten Anwendungsfälle sind Schriftartdateien, über @import-Deklarationen abgerufene CSS-Dateien oder CSS-background-image-Ressourcen, die wahrscheinlich LCP-Kandidaten (Largest Contentful Paint) sind. In solchen Fällen werden diese Dateien vom Vorabladescanner nicht erkannt, da in externen Ressourcen auf die Ressource verwiesen wird.

Ähnlich wie bei preconnect erfordert die Anweisung preload das Attribut crossorigin, wenn Sie eine CORS-Ressource (z. B. Schriftarten) vorab laden. Wenn Sie das Attribut crossorigin nicht oder bei Nicht-CORS-Anfragen hinzufügen, wird die Ressource zweimal vom Browser heruntergeladen. Dadurch wird Bandbreite verschwendet, die besser für andere Ressourcen hätte verwendet werden können.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

Im vorherigen HTML-Snippet wird der Browser angewiesen, /font.woff2 mithilfe einer CORS-Anfrage vorab zu laden, auch wenn sich /font.woff2 in derselben Domain befindet.

prefetch

Die Anweisung prefetch wird verwendet, um eine Anfrage mit niedriger Priorität für eine Ressource zu initiieren, die wahrscheinlich für zukünftige Navigationen verwendet wird:

<link rel="prefetch" href="/next-page.css" as="style">

Diese Anweisung entspricht weitgehend dem Format der Anweisung preload. Nur das Attribut rel des Elements <link> verwendet stattdessen den Wert "prefetch". Im Gegensatz zur Anweisung preload ist prefetch jedoch weitgehend spekulativ, da Sie einen Abruf einer Ressource für eine zukünftige Navigation initiieren, die möglicherweise oder nicht erfolgt.

Manchmal kann prefetch vorteilhaft sein. Wenn du beispielsweise auf deiner Website einen Nutzerfluss identifiziert hast, den die meisten Nutzer bis zum Ende befolgen, kann eine prefetch für eine Ressource, die das Rendering benötigt, für diese zukünftigen Seiten die Ladezeiten verkürzen.

Priority API abrufen

Sie können Fetch Priority API über sein fetchpriority-Attribut verwenden, um die Priorität einer Ressource zu erhöhen. Sie können das Attribut mit den Elementen <link>, <img> und <script> verwenden.

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

Standardmäßig werden Bilder mit einer niedrigeren Priorität abgerufen. Wenn sich das Bild nach dem Layout im ersten Darstellungsbereich befindet, wird die Priorität auf Hoch erhöht. Im vorherigen HTML-Snippet weist fetchpriority den Browser sofort an, das größere LCP-Bild mit der Priorität Hoch herunterzuladen, während die weniger wichtigen Miniaturansichten mit einer niedrigeren Priorität heruntergeladen werden.

Moderne Browser laden Ressourcen in zwei Phasen. Die erste Phase ist für kritische Ressourcen reserviert und endet, sobald alle blockierenden Skripts heruntergeladen und ausgeführt wurden. Während dieser Phase kann sich der Download von Ressourcen mit der Priorität Niedrig verzögern. Mit fetchpriority="high" können Sie die Priorität einer Ressource erhöhen, sodass der Browser sie in der ersten Phase herunterladen kann.

Demos zu Ressourcenhinweisen

Wissen testen

Was bewirkt der Ressourcenhinweis von preconnect?

Stellt eine Verbindung zu einem ursprungsübergreifenden Server her, einschließlich des DNS-Lookups, sowie der Verbindung und TLS-Verhandlung, bevor der Browser dies sonst erkennen würde.
Richtig!
Führt nur ein DNS-Lookup für den ursprungsübergreifenden Server durch.
Versuche es noch einmal.

Welche Möglichkeiten bietet die Fetch Priority API?

Legen Sie die Priorität fest, mit der der HTML-Code der aktuellen Seite heruntergeladen wird.
Versuche es noch einmal.
Geben Sie die relative Priorität der Elemente <link>, <img> und <script> an.
Richtig!

Wann solltest du den prefetch-Hinweis verwenden?

Für alle Ressourcen oder Seiten, die der Nutzer benötigen könnte, unabhängig davon, ob er sie in Zukunft tatsächlich benötigt oder nicht.
Versuche es noch einmal.
Wenn Sie hohe Sicherheit haben, dass die Ressourcen oder Seiten, die Sie vorab abrufen möchten, vom Nutzer benötigt werden.
Richtig!
Der Nutzer hat keine ausdrückliche Präferenz für eine reduzierte Datennutzung angegeben.
Richtig!

Nächster Schritt: Bildleistung

Inzwischen sind Sie wahrscheinlich ziemlich gut mit Ihren Kenntnissen über allgemeine Leistungsaspekte in Bezug auf Seiten-HTML, das <head>-Element und Ressourcenhinweise vertraut. Es gibt jedoch zusätzliche Optimierungen, die speziell für verschiedene Ressourcentypen gelten, die Seiten häufig laden. Als Nächstes wird die Bildleistung im nächsten Modul behandelt. Damit können Sie dafür sorgen, dass die Bilder Ihrer Website unabhängig vom Gerät des Nutzers so schnell wie möglich geladen werden.