Der HTTPLink-Header bietet eine Möglichkeit zur Serialisierung eines oder mehrerer Links in HTTP-Headern.Dies ermöglicht es dem Server, einen Client auf eine andere Ressource zu verweisen, die Metadaten über die angeforderte Ressource enthält.Dieser Header hat dieselbe Semantik wie das HTML-<link>-Element.Ein Vorteil der Verwendung desLink-Headers ist, dass der Browser mit dem Vorabverbinden oder Vorabladen von Ressourcen beginnen kann, bevor das HTML selbst abgerufen und verarbeitet wird.

In der Praxis haben die meistenrel-Link-Typen keine Wirkung, wenn sie mit dem HTTP-Header verwendet werden.Zum Beispiel funktioniert dieicon-Relation nur in HTML undstylesheet funktioniert nicht zuverlässig über alle Browser hinweg (nur in Firefox).Die einzigen Relationen, die zuverlässig funktionieren, sindpreconnect undpreload, die mit103 Early Hints kombiniert werden können.

Syntax

Link: <uri-reference>; param1=value1; param2="value2"

<uri-reference>

Der URI-Verweis muss zwischen< und> eingeschlossen undprozentkodiert sein.

Parameter

Der Link-Header enthält Parameter, die mit; getrennt sind und den Attributen des<link>-Elements entsprechen.Werte können sowohl in Anführungszeichen als auch unzitiert sein, basierend auf denRegeln für Feldwertkomponenten, sodassx=y gleichwertig ist zux="y".

Beispiele

URLs in spitze Klammern einschließen

Der URI (absolut oder relativ) muss zwischen< und> eingeschlossen sein:

Link: <https://example.com>; rel="preconnect"

Link: https://bad.example; rel="preconnect"

URLs kodieren

Der URI (absolut oder relativ) muss Zeichen mit Codes größer als 255prozentkodieren:

Link: <https://example.com/%E8%8B%97%E6%9D%A1>; rel="preconnect"

Link: <https://example.com/苗条>; rel="preconnect"

Mehrere Links angeben

Sie können mehrere durch Kommas getrennte Links angeben, zum Beispiel:

Link: <https://one.example.com>; rel="preconnect", <https://two.example.com>; rel="preconnect", <https://three.example.com>; rel="preconnect"

Seitennummerierung durch Links

DerLink-Header kann einem Client Seitennummerierungsinformationen zur Verfügung stellen, was häufig verwendet wird, um programmgesteuert auf Ressourcen zuzugreifen:

Link: <https://api.example.com/issues?page=2>; rel="prev", <https://api.example.com/issues?page=4>; rel="next", <https://api.example.com/issues?page=10>; rel="last", <https://api.example.com/issues?page=1>; rel="first"

In diesem Fall zeigenrel="prev" undrel="next" Link-Relationen für vorherige und nächste Seiten, und es gibtrel="last" undrel="first"-Parameter, die die ersten und letzten Seiten der Suchergebnisse bereitstellen.

Abrufpriorität steuern

Selbst bei der Verwendung vonpreload zum frühestmöglichen Abrufen einer Ressource werden verschiedene Arten von Inhalten früher oder später basierend auf der internen Priorisierung des Browsers abgerufen.Das Attributfetchpriority kann verwendet werden, um dem Browser einen Hinweis zu geben, dass eine bestimmte Ressource einen größeren oder geringeren relativen Einfluss auf das Benutzererlebnis hat als andere Ressourcen desselben Typs.

Zum Beispiel könnte der untenstehende Header verwendet werden, umstyle.css mit einer höheren Priorität als andere Stylesheets vorabzuladen:

Link: </style.css>; rel=preload; as=style; fetchpriority="high"

Beachten Sie, dass sowohl die interne Priorisierung für den Abruf von Ressourcen als auch die Wirkung derfetchpriority-Direktive browserabhängig sind.Diefetchpriority-Direktive sollte sparsam verwendet werden und nur in Fällen, in denen ein Browser nicht ableiten kann, dass eine bestimmte Ressource mit einer anderen Priorität behandelt werden sollte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 103 Early Hints
• <link>
• Link-Relationen IANA-Register
• Optimieren Sie das Laden von Ressourcen mit der Fetch Priority API für Informationen darüber, wie diese API die Prioritäten in Chrome beeinflusst.