Browser mit Ressourcenhinweisen unterstützen

Im letzten Modul zum Optimieren des Ressourcenladens haben Sie erfahren, wie sich verschiedene Seitenressourcen wie CSS und JavaScript auf die Ladegeschwindigkeit von Seiten auswirken können und wie Sie sie und ihre Bereitstellung optimieren können, um das Rendern einer Seite zu beschleunigen. Das ist der perfekte Zeitpunkt, um sich mit einem fortgeschritteneren Aspekt des Ressourcenladens zu befassen. Dabei geht es darum, dem Browser mithilfe von Ressourcenhinweisen zu helfen, Ressourcen schneller zu laden.

Mit Ressourcenhinweisen können Entwickler die Seitenladezeit weiter optimieren, indem sie dem Browser mitteilen, wie Ressourcen geladen und priorisiert werden sollen. Zuerst wurden Hinweise zu Ressourcen wie preconnect und dns-prefetch eingeführt. Im Laufe der Zeit wurden jedoch preload und die Fetch Priority API eingeführt, um zusätzliche Funktionen bereitzustellen.

Mit Hinweisen auf Ressourcen wird der Browser angewiesen, bestimmte Aktionen vorab auszuführen, die die Ladeleistung verbessern könnten. Mit Ressourcenhinweisen können Aktionen wie das Ausführen von DNS-Lookups, das Herstellen von Verbindungen zu Servern und das Abrufen von Ressourcen ausgeführt werden, bevor der Browser sie normalerweise erkennen würde.

Ressourcenhinweise können in HTML angegeben werden, meistens am Anfang des <head>-Elements, oder als HTTP-Header festgelegt werden. In diesem Modul werden preconnect, dns-prefetch und preload sowie die spekulativen Abrufverhalten, die prefetch bietet, behandelt.

preconnect

Mit dem preconnect-Hinweis wird eine Verbindung zu einem anderen Ursprung hergestellt, von dem Sie wichtige Ressourcen abrufen. Möglicherweise hosten Sie Ihre Bilder oder Assets beispielsweise in einem CDN oder an einem anderen Ursprung:

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

Mit preconnect wird davon ausgegangen, dass der Browser in sehr naher Zukunft eine Verbindung zu einem bestimmten serverübergreifenden Server herstellen möchte und dass der Browser diese Verbindung so schnell wie möglich öffnen sollte, idealerweise bevor der HTML-Parser oder der Vorabladeprüfer dies tut.

Wenn Sie eine große Anzahl von ursprungsübergreifenden Ressourcen auf einer Seite haben, verwenden Sie preconnect für die Ressourcen, die für die aktuelle Seite am wichtigsten sind.

Screenshot der Verbindungszeit für eine Ressource im Netzwerkbereich der Chrome-Entwicklertools. Die Verbindungsherstellung umfasst die Wartezeit, die Proxy-Aushandlung, den DNS-Lookup, die Verbindungsherstellung und die TLS-Aushandlung.
Eine Visualisierung der Verbindungszeitachse, wie sie im Netzwerkbereich der Chrome-Entwicklertools zu sehen ist. Die Zeitangaben im roten Feld beziehen sich auf das Einrichten einer Verbindung mit einem serverübergreifenden Server. preconnect kann dies verringern, indem Verbindungen früher hergestellt werden, anstatt erst zum Zeitpunkt der Erkennung der serverübergreifenden Ressource.

Ein häufiger Anwendungsfall für preconnect sind Google Fonts. Google Fonts empfiehlt, preconnect zur https://fonts.googleapis.com-Domain, die die @font-face-Deklarationen bereitstellt, und zur https://fonts.gstatic.com-Domain, 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 mit Cross-Origin Resource Sharing (CORS) abgerufen werden muss. Wenn Sie den Hinweis preconnect verwenden und die vom Ursprung heruntergeladene Ressource CORS verwendet, z. B. Schriftartdateien, müssen Sie dem Hinweis preconnect das Attribut crossorigin hinzufügen.

dns-prefetch

Das frühzeitige Öffnen von Verbindungen zu serverübergreifenden Servern kann die anfängliche Seitenladezeit erheblich verbessern. Es ist jedoch möglicherweise weder sinnvoll noch möglich, Verbindungen zu vielen serverübergreifenden Servern gleichzeitig herzustellen. Wenn Sie befürchten, dass Sie preconnect zu häufig verwenden, ist der Ressourcenhinweis dns-prefetch eine viel kostengünstigere Alternative.

Wie der Name schon sagt, wird mit dns-prefetch keine Verbindung zu einem serverübergreifenden Server hergestellt, sondern nur der DNS-Lookup dafür im Voraus ausgeführt. Eine DNS-Suche erfolgt, wenn ein Domainname in seine zugrunde liegende IP-Adresse aufgelöst wird. DNS-Caches auf Geräte- und Netzwerkebene sorgen dafür, dass dies in der Regel schnell geht, aber es dauert trotzdem eine gewisse Zeit.

<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 können daher in einigen Fällen ein geeigneteres Tool als ein preconnect sein. Insbesondere kann es sinnvoll sein, diesen Ressourcenhinweis bei Links zu verwenden, die zu anderen Websites führen, die der Nutzer wahrscheinlich aufrufen wird. dnstradamus ist ein Tool, das dies automatisch mit JavaScript erledigt. Es verwendet die Intersection Observer API, um dns-prefetch-Hinweise in den HTML-Code der aktuellen Seite einzufügen, wenn Links zu anderen Websites in den Viewport des Nutzers gescrollt werden.

preload

Mit der preload-Anweisung wird eine frühe Anfrage für eine Ressource initiiert, die zum Rendern der Seite erforderlich ist:

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

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

Ähnlich wie bei preconnect ist für die Direktive preload das Attribut crossorigin erforderlich, wenn Sie eine CORS-Ressource wie Schriftarten vorab laden. Wenn Sie das Attribut crossorigin nicht hinzufügen oder es für Nicht-CORS-Anfragen hinzufügen, wird die Ressource vom Browser zweimal heruntergeladen. Das verschwendet Bandbreite, die für andere Ressourcen besser genutzt werden könnte.

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

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

prefetch

Mit der prefetch-Anweisung wird eine Anfrage mit niedriger Priorität für eine Ressource initiiert, die wahrscheinlich für zukünftige Navigationsvorgänge verwendet wird:

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

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

In manchen Fällen kann prefetch sinnvoll sein, z. B. wenn Sie einen Nutzerfluss auf Ihrer Website identifiziert haben, den die meisten Nutzer bis zum Abschluss durchlaufen. In diesem Fall kann ein prefetch für eine rendernkritische Ressource für diese zukünftigen Seiten dazu beitragen, die Ladezeiten zu verkürzen.

Fetch Priority API

Sie können die Priorität einer Ressource über das Attribut fetchpriority von Fetch Priority API 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>

Bilder werden standardmäßig mit einer niedrigeren Priorität abgerufen. Wenn das Bild nach dem Layout im ursprünglichen Darstellungsbereich angezeigt wird, wird die Priorität auf Hoch erhöht. Im vorherigen HTML-Snippet wird der Browser mit fetchpriority sofort angewiesen, das größere LCP-Bild mit hoher Priorität herunterzuladen, während die weniger wichtigen Thumbnails 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. In dieser Phase kann es bei Ressourcen mit der Priorität Niedrig zu Verzögerungen beim Herunterladen kommen. Mit fetchpriority="high" können Sie die Priorität einer Ressource erhöhen, sodass der Browser sie in der ersten Phase herunterladen kann.

Demos für Ressourcenhinweise

Wissen testen

Was bewirkt der Ressourcenhinweis preconnect?

Stellt eine Verbindung zu einem serverübergreifenden Server her, einschließlich des DNS-Lookups sowie der Verbindungs- und TLS-Aushandlung, bevor der Browser sie normalerweise erkennen würde.
Richtig!
Führt nur einen DNS-Lookup für den serverübergreifenden Server aus.
Bitte versuchen Sie es noch einmal.

Was kann ich mit der Fetch Priority API tun?

Geben Sie die Priorität an, mit der das HTML der aktuellen Seite heruntergeladen wird.
Bitte versuchen Sie es noch einmal.
Geben Sie die relative Priorität für die Elemente <link>, <img> und <script> an.
Richtig!

Wann sollten Sie den Hinweis prefetch verwenden?

Für alle Ressourcen oder Seiten, die der Nutzer möglicherweise benötigt, unabhängig davon, ob er sie in Zukunft tatsächlich benötigt.
Bitte versuchen Sie es noch einmal.
Wenn Sie sehr sicher sind, dass der Nutzer die Ressourcen oder Seiten, die Sie vorab abrufen möchten, benötigt.
Richtig!
Wenn der Nutzer keine ausdrückliche Präferenz für eine reduzierte Datennutzung angegeben hat.
Richtig!

Als Nächstes: Bildleistung

Mittlerweile haben Sie wahrscheinlich ein gutes Gefühl für allgemeine Leistungsaspekte in Bezug auf Seiten-HTML, das <head>-Element und Ressourcenhinweise. Es gibt jedoch zusätzliche Optimierungen, die für verschiedene Ressourcentypen spezifisch sind, die Seiten häufig laden. Im nächsten Modul geht es um die Bildleistung. Dort erfahren Sie, wie Sie dafür sorgen können, dass die Bilder auf Ihrer Website unabhängig vom Gerät des Nutzers so schnell wie möglich geladen werden.