Im letzten Modul zur Optimierung des Ladens von Ressourcen haben Sie gelernt, wie verschiedene wie CSS und JavaScript die Ladegeschwindigkeit von Seiten beeinflussen und können Sie sie und ihre Auslieferung optimieren, um das Rendern einer Seite zu beschleunigen. Dies ist der perfekte Zeitpunkt, um über einen fortgeschritteneren Aspekt der Ressource und dazu beitragen, dass der Browser sie schneller lädt, indem Sie Ressourcenhinweise.
Mithilfe von Ressourcenhinweisen können Entwickler
die Seitenladezeit weiter optimieren,
wie Ressourcen geladen und priorisiert werden. Anfänglicher Satz von Ressourcen
Hinweise wie preconnect
und dns-prefetch
wurden zuerst eingeführt.
Im Laufe der Zeit sind jedoch preload
und die Fetch Priority API
bieten zusätzliche Möglichkeiten.
Ressourcenhinweise weisen den Browser an, bestimmte Aktionen im Voraus auszuführen die die Ladeleistung verbessern könnten. Ressourcenhinweise können Aktionen wie frühe DNS-Lookups durchführen, eine Verbindung zu Servern herstellen und sogar das Abrufen von Ressourcen, bevor der Browser sie normalerweise erkennen würde.
Ressourcenhinweise können in HTML angegeben werden, meistens am Anfang der <head>
.
-Element oder als HTTP-Header festlegen. Im Rahmen dieses Moduls
preconnect
, dns-prefetch
und preload
sowie die
spekulatives Abrufverhalten von prefetch
.
preconnect
Der Hinweis preconnect
wird verwendet, um eine Verbindung zu einem anderen Ursprung von
wo Sie wichtige Ressourcen abrufen. Beispiel: Sie hosten Ihre
Bilder oder Assets in einem CDN oder anderen ursprungsübergreifenden:
<link rel="preconnect" href="https://example.com">
Wenn Sie preconnect
verwenden, gehen Sie davon aus, dass der Browser eine Verbindung zu einem
ursprungsübergreifenden Server in naher Zukunft erstellt und dass der Browser
sollte diese Verbindung so schnell wie möglich hergestellt werden, idealerweise bevor
HTML-Parser oder vorab geladenen Scanner.
Wenn auf einer Seite viele ursprungsübergreifende Ressourcen vorhanden sind, verwenden Sie preconnect
die für die aktuelle Seite am wichtigsten sind.
![Screenshot der Verbindungszeit für eine Ressource im Bereich „Netzwerk“ der Chrome-Entwicklertools. Die Verbindungseinrichtung umfasst Verweildauer, Proxy-Verhandlung, DNS-Lookup, Verbindungseinrichtung und TLS-Verhandlung.](https://web.dev/static/learn/performance/resource-hints/image/fig-1.png?authuser=0&hl=de)
preconnect
indem Sie Verbindungen früher herstellen
Erkennung der ursprungsübergreifenden Ressource.
Ein häufiger Anwendungsfall für preconnect
ist Google Fonts. Google Fonts-Empfehlungen
dass Sie eine preconnect
an die Domain https://fonts.googleapis.com
vornehmen,
@font-face
-Deklarationen und zur 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
die mithilfe von Cross-Origin Resource Sharing (CORS) abgerufen werden. Bei Verwendung des
Hinweis preconnect
, wenn für die vom Ursprung heruntergeladene Ressource
CORS, wie z. B. Schriftartdateien, müssen Sie das crossorigin
-Attribut
Hinweis preconnect
.
dns-prefetch
Das frühzeitige Öffnen von Verbindungen zu ursprungsübergreifenden Servern kann
die anfängliche Seitenladezeit zu verbessern, ist es weder sinnvoll noch möglich,
Verbindungen zu vielen ursprungsübergreifenden Servern gleichzeitig herstellen. Wenn Sie Bedenken haben
dass Sie preconnect
möglicherweise zu viel nutzen, ist ein wesentlich weniger kostspieliger Ressourcenhinweis
Hinweis dns-prefetch
.
Dem Namen nach stellt dns-prefetch
keine Verbindung zu einer ursprungsübergreifenden Verbindung her
den Server, sondern führt im Voraus nur den DNS-Lookup dafür aus. Ein DNS
Lookup-Vorgang wird ausgeführt, wenn ein Domainname in die zugrunde liegende IP-Adresse aufgelöst wird.
DNS-Cache-Ebenen auf Geräte- und Netzwerkebene tragen dazu bei,
in der Regel schnell, aber es dauert noch einige 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. Aufgrund der relativ geringen Kosten
In einigen Fällen sind sie möglicherweise besser geeignet als preconnect
. In
besonders nützlich sein, wenn es sich um Links handelt,
andere Websites aufrufen, denen die Nutzenden Ihrer Meinung nach wahrscheinlich folgen.
dnstradamus ist ein solches Tool, das dies automatisch mithilfe von JavaScript erledigt.
und nutzt die Intersection Observer API, um dns-prefetch
-Hinweise in die
den HTML-Code der aktuellen Seite, wenn Links zu anderen Websites in die
Darstellungsbereich.
preload
Mit der Anweisung preload
wird eine frühzeitige Anfrage für eine Ressource initiiert
die für das Rendern der Seite erforderlich sind:
<link rel="preload" href="/lcp-image.jpg" as="image">
preload
-Anweisungen sollten auf spät entdeckte kritische Ressourcen beschränkt werden.
Die häufigsten Anwendungsfälle sind Schriftart- und CSS-Dateien, die über @import
abgerufen werden.
Deklarationen oder CSS-background-image
-Ressourcen enthalten, die wahrscheinlich am größten
Kandidaten für Contentful Paint (LCP). In solchen Fällen sind diese Dateien nicht
vom Preload-Scanner erkannt, da auf die Ressource in externen Quellen verwiesen wird
Ressourcen.
Ähnlich wie bei preconnect
erfordert die Anweisung preload
das crossorigin
.
, wenn Sie eine CORS-Ressource (z. B. Schriftarten) vorab laden. Wenn Sie keine
das Attribut crossorigin
(oder fügen Sie es für Nicht-CORS-Anfragen hinzu), dann die Ressource
zweimal vom Browser heruntergeladen, wodurch Bandbreite verschwendet wird,
in andere Ressourcen investieren können.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Im vorherigen HTML-Snippet wird der Browser angewiesen,
/font.woff2
über eine CORS-Anfrage – auch wenn /font.woff2
sich in derselben Domain befindet.
prefetch
<ph type="x-smartling-placeholder">
Mit der Anweisung prefetch
wird eine Anfrage mit niedriger Priorität für einen
Ressource, 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 preload
-Anweisung,
Für das Attribut rel
des <link>
-Elements wird stattdessen der Wert "prefetch"
verwendet.
Im Gegensatz zur preload
-Anweisung ist prefetch
jedoch in Bezug auf
dass Sie einen Abruf für eine Ressource für eine
künftige Navigation initiieren, die möglicherweise
oder nicht eintreten.
Es gibt Situationen, in denen prefetch
vorteilhaft sein kann, z. B. wenn du
einen User Flow identifiziert, den die meisten Nutzenden bis zum Abschluss
prefetch
für eine Rendering-kritische Ressource für zukünftige Seiten kann dabei helfen,
die Ladezeiten zu verkürzen.
Fetch Priority API
Sie können das Fetch Priority API
über sein fetchpriority
-Attribut für Folgendes verwenden:
die Priorität einer Ressource erhöhen. Sie können das Attribut mit <link>
verwenden,
<img>
- und <script>
-Elemente.
<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 nach dem Layout
innerhalb des ersten Darstellungsbereichs befindet, wird die Priorität auf
Priorität Hoch: Im vorherigen HTML-Snippet wurde fetchpriority
sofort
weist den Browser an, das größere LCP-Bild mit der Priorität Hoch herunterzuladen,
während die weniger wichtigen
Thumbnail-Bilder mit niedrigerer Priorität heruntergeladen werden.
Moderne Browser laden Ressourcen in zwei Phasen. Die erste Phase ist für
und endet, nachdem alle blockierenden
Scripts heruntergeladen wurden.
ausgeführt haben. In dieser Phase kann es bei Ressourcen mit niedriger Priorität zu Verzögerungen kommen
wird heruntergeladen. Mit fetchpriority="high"
können Sie die Priorität einer
Ressource, mit der der Browser sie in der ersten Phase herunterladen kann.
Demos für Ressourcenhinweise
Wissen testen
Wozu dient der Ressourcenhinweis preconnect
?
Welche Möglichkeiten bietet Ihnen die Fetch Priority API?
<link>
an.
<img>
- und <script>
-Elemente.
Wann sollten Sie den Hinweis prefetch
verwenden?
Nächster Schritt: Bildleistung
Vermutlich haben Sie inzwischen allmählich gelernt,
von allgemeinen Leistungsaspekten in Bezug auf Seiten-HTML, die <head>
und Ressourcenhinweise. Es gibt jedoch weitere Optimierungen,
sind spezifisch für die verschiedenen Ressourcentypen, die häufig von Seiten geladen werden. Als Nächstes
Leistung von Bildern wird im nächsten Modul behandelt. Damit können Sie
dass die Bilder auf Ihrer Website so schnell wie möglich geladen werden,
das Gerät der Nutzenden.