Link header
Der HTTP Link
-Header ermöglicht die Serialisierung eines oder mehrerer Links in HTTP-Headern. Dadurch kann der Server einen Client auf eine andere Ressource verweisen, die Metadaten über die angeforderte Ressource enthält. Dieser Header hat die gleichen Semantiken wie das HTML <link>
-Element. Ein Vorteil der Verwendung des Link
-Headers ist, dass der Browser Ressourcen vorab verbinden oder laden kann, bevor das HTML selbst abgerufen und verarbeitet wird.
In der Praxis haben die meisten rel
-Linktypen keine Wirkung, wenn sie mit dem HTTP-Header verwendet werden. Zum Beispiel funktioniert die icon
-Relation nur in HTML und stylesheet
funktioniert nicht zuverlässig in allen Browsern (nur in Firefox). Die einzigen Relationen, die zuverlässig funktionieren, sind preconnect
und preload
, die mit 103 Early Hints
kombiniert werden können.
Header-Typ | Antwort-Header, Anfrage-Header |
---|---|
Verbotener Anfrage-Header | Nein |
CORS-gesicherter Antwort-Header | Nein |
Syntax
Link: <uri-reference>; param1=value1; param2="value2"
<uri-reference>
-
Der URI-Verweis muss in
<
und>
eingeschlossen und prozentcodiert sein.
Parameter
Der Link-Header enthält Parameter, die mit ;
getrennt sind und den Attributen des <link>
-Elements entsprechen. Werte können entsprechend der Feldwert-Komponentenregeln sowohl in Anführungszeichen als auch ohne Anführungszeichen angegeben werden, sodass x=y
gleichwertig zu x="y"
ist.
Beispiele
URLs in spitze Klammern einschließen
Der URI (absolut oder relativ) muss in <
und >
eingeschlossen werden:
Link: <https://example.com>; rel="preconnect"
Link: https://bad.example; rel="preconnect"
URLs codieren
Der URI (absolut oder relativ) muss über 255 liegende Zeichencodes prozentcodieren:
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 über Links
Der Link
-Header kann einem Client Informationen zur Seitennummerierung zur Verfügung stellen, was häufig verwendet wird, um programmatisch 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 zeigen rel="prev"
und rel="next"
Linkrelationen für vorherige und nächste Seiten an, und es gibt rel="last"
und rel="first"
Parameter, die die erste und letzte Seite der Suchergebnisse bereitstellen.
Abruffrequenz steuern
Selbst bei Verwendung von preload
, um eine Ressource so früh wie möglich abzurufen, werden verschiedene Arten von Inhalten je nach interner Priorisierung des Browsers früher oder später abgerufen. Das Attribut fetchpriority
kann verwendet werden, um dem Browser einen Hinweis zu geben, dass eine bestimmte Ressource einen größeren oder geringeren relativen Einfluss auf die Benutzererfahrung haben wird als andere Ressourcen desselben Typs.
Zum Beispiel könnte der folgende Header verwendet werden, um style.css
mit höherer Priorität als andere Stylesheets vorzuladen:
Link: </style.css>; rel=preload; as=style; fetchpriority="high"
Beachten Sie, dass sowohl die interne Priorisierung für das Abrufen von Ressourcen als auch die Wirkung der fetchpriority
-Anweisung vom Browser abhängen. Die fetchpriority
-Anweisung sollte sparsam verwendet werden und nur in Fällen, in denen ein Browser nicht erkennen kann, dass eine bestimmte Ressource mit einer anderen Priorität behandelt werden sollte.
Spezifikationen
Specification |
---|
Web Linking # header |
Browser-Kompatibilität
Siehe auch
103 Early Hints
<link>
- Link Relations IANA-Register
- Ressourcenladung optimieren mit der Fetch-Priority-API für Informationen darüber, wie diese API Prioritäten in Chrome beeinflusst.