Vielen Dank, dass du bei der Google I/O dabei warst! Inhalte on demand ansehen

Diese Seite wurde von der Cloud Translation API übersetzt.

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.

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> 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.

`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> Achtung:Wenn Sie preload für ein durch ein variierendes <img>-Element angegebenes Bild herunterladen basierend auf dem Darstellungsbereich des Nutzers imagesrcset dem Hinweis preload hinzu, für den das richtige Bild heruntergeladen werden soll. aktuellen Darstellungsbereich. Außerdem sollten Sie src ausschließen. damit Browser, die responsives Vorabladen nicht unterstützen, keine Downloads das Fallback-Image.

Ä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> Wichtig:Eine Ressource, die in einem Die Anweisung preload wird zweimal heruntergeladen, wenn die Anweisung as fehlt im Element <link> der Anweisung. Eine Liste der Attributwerte für as finden Sie in der MDN-Dokumentation zu as-Attributwerten.

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

</ph> Achtung:Die Anweisung preload ist eine sehr leistungsstarke Leistungsoptimierung ein, die oft überbeansprucht werden kann. Ressourcen mit der Anweisung preload heruntergeladen werden, mit hoher Priorität heruntergeladen. Bei übermäßiger Nutzung durch preload Bandbreitenkonflikt auf eine Art und Weise, die sich negativ auf die Ladegeschwindigkeit der Seite auswirkt.

`prefetch`

</ph> Wichtig:Dies ist eine sehr allgemeine Erläuterung der prefetch-Ressourcenhinweis. Daher geht dieser Abschnitt nicht auf Detaillierte Informationen zu einigen Überlegungen und Kompromissen, die Sie berücksichtigen sollten wenn Sie sie verwenden. In einem späteren Modul dieses Kurses gehen wir prefetching Ressourcen, die in naher Zukunft mit niedriger Priorität benötigt werden, sowie prefetching um zukünftige Navigationen zu beschleunigen.

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> Achtung:Angesichts der spekulativen Natur von prefetch, birgt die Verwendung dieser Daten potenzielle Nachteile die zum Abrufen der Ressource verwendet wird, kann ungenutzt bleiben, wenn der Nutzer nicht zum die die vorab abgerufene Ressource benötigt. Verlassen Sie sich auf Analysen oder weitere Datenquellen für die Nutzungsmuster Ihrer Website, um für sich selbst zu entscheiden, ist es sinnvoll, prefetch zu verwenden. Alternativ können Sie die Hinweis (Save-Data) zum Deaktivieren von Prefetches für Nutzer, die hat eine Präferenz für reduzierte Datennutzung angegeben.

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> Wichtig: Das Attribut fetchpriority ist insbesondere effektiv, wenn er für das LCP-Bild einer Seite verwendet wird. Indem Sie die Priorität eines LCP-Bild mit diesem Attribut können Sie den LCP einer Seite mit relativ mit wenig Aufwand.

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?

Ö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.

Richtig!

Führt nur einen DNS-Lookup für den ursprungsübergreifenden Server durch.

Bitte versuchen Sie es noch einmal.

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.

Bitte versuchen Sie es noch einmal.

Geben Sie die relative Priorität für <link> an. <img>- und <script>-Elemente.

Richtig!

Wann sollten Sie den Hinweis prefetch verwenden?

Für alle Ressourcen oder Seiten, die Nutzer benötigen, unabhängig davon, ob sie sie in Zukunft wirklich brauchen.

Bitte versuchen Sie es noch einmal.

Wenn Sie mit hoher Wahrscheinlichkeit sicher sind, dass die Ressourcen oder Seiten die vorab abgerufen werden sollen, vom Nutzer benötigt werden.

Richtig!

Wenn der Nutzer nicht ausdrücklich die reduzierte Datenmenge bevorzugt wird Nutzung.

Richtig!

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.