Browser mit Ressourcenhinweisen unterstützen

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.

<ph type="x-smartling-placeholder">
</ph> 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. <ph type="x-smartling-placeholder">
</ph> Eine Visualisierung der Verbindungszeiten, wie sie im Netzwerkbereich von Chrome angezeigt wird Entwicklertools. Das Timing in der roten Box bezieht sich auf die Einrichtung eines Verbindung mit einem ursprungsübergreifenden Server, über den 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.

<ph type="x-smartling-placeholder">

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.

<ph type="x-smartling-placeholder">

Ä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>
<ph type="x-smartling-placeholder">

Im vorherigen HTML-Snippet wird der Browser angewiesen, /font.woff2 über eine CORS-Anfrage – auch wenn /font.woff2 sich in derselben Domain befindet.

<ph type="x-smartling-placeholder">

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.

<ph type="x-smartling-placeholder">

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>
<ph type="x-smartling-placeholder">

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?

Führt nur einen DNS-Lookup für den ursprungsübergreifenden Server durch.
Öffnet eine Verbindung zu einem ursprungsübergreifenden Server, einschließlich DNS-Lookup, sowie die Verbindungs- und TLS-Aushandlung im Voraus, bevor der Browser sie sonst finden würden.

Welche Möglichkeiten bietet Ihnen die Fetch Priority API?

Geben Sie die Priorität an, mit der der HTML-Code der aktuellen Seite heruntergeladen wird.
Geben Sie die relative Priorität für <link> an. <img>- und <script>-Elemente.

Wann sollten Sie den Hinweis prefetch verwenden?

Wenn der Nutzer nicht ausdrücklich die reduzierte Datenmenge bevorzugt wird Nutzung.
Wenn Sie mit hoher Wahrscheinlichkeit sicher sind, dass die Ressourcen oder Seiten die vorab abgerufen werden sollen, vom Nutzer benötigt werden.
Für alle Ressourcen oder Seiten, die Nutzer benötigen, unabhängig davon, ob sie sie in Zukunft wirklich brauchen.

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.