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.](https://web.dev/static/learn/performance/resource-hints/image/fig-1.png?authuser=6&hl=de)
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
?
Welche Möglichkeiten bietet die Fetch Priority API?
<link>
, <img>
und <script>
an.
Wann solltest du den prefetch
-Hinweis verwenden?
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.