Link header
Der HTTP-Header Link bietet eine Möglichkeit, einen oder mehrere Links in HTTP-Headern zu serialisieren.
Dadurch kann der Server einen Client auf eine andere Ressource verweisen, die Metadaten über die angeforderte Ressource enthält.
Dieser Header hat dieselbe Semantik wie das HTML-Element <link>.
Ein Vorteil der Verwendung des Link-Headers besteht darin, dass der Browser mit dem Preconnecting oder Preloading von Ressourcen beginnen kann, bevor das HTML selbst abgerufen und verarbeitet wird.
In der Praxis haben die meisten rel-Link-Typen keine Wirkung, wenn sie mit dem HTTP-Header verwendet werden.
Beispielsweise funktioniert die icon-Beziehung nur in HTML, und stylesheet funktioniert nicht zuverlässig browserübergreifend (nur in Firefox).
Die einzigen Beziehungen, die zuverlässig funktionieren, sind preconnect und preload, die mit 103 Early Hints kombiniert werden können.
| Header-Typ | Response-Header, Request-Header |
|---|---|
| Verbotener Request-Header | Nein |
| CORS-safelisted Response-Header | Nein |
Syntax
Link: <uri-reference>; param1=value1; param2="value2"
<uri-reference>-
Die URI-Referenz muss zwischen
<und>eingeschlossen und prozentkodiert sein.
Parameter
Der Link-Header enthält Parameter, die durch ; getrennt sind und Attributen des Elements <link> entsprechen.
Werte können gemäß den Regeln für Feldwertkomponenten sowohl in Anführungszeichen als auch ohne Anführungszeichen angegeben werden, daher entspricht x=y dem Ausdruck x="y".
Beispiele
URLs in spitze Klammern einschließen
Die URI (absolut oder relativ) muss zwischen < und > eingeschlossen werden:
Link: <https://example.com>; rel="preconnect"
Link: https://bad.example; rel="preconnect"
URLs kodieren
Die URI (absolut oder relativ) muss Zeichencodes größer als 255 prozentkodieren:
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"
Paginierung über Links
Der Link-Header kann einem Client Paginierungsinformationen bereitstellen, die häufig verwendet werden, 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" Link-Beziehungen für vorherige und nächste Seiten an, und es gibt die Parameter rel="last" und rel="first", die die erste und letzte Seite der Suchergebnisse bereitstellen.
Abrufpriorität steuern
Auch wenn preload verwendet wird, um eine Ressource so früh wie möglich abzurufen, werden unterschiedliche Inhaltstypen basierend auf der internen Priorisierung des Browsers früher oder später abgerufen.
Das Attribut fetchpriority kann verwendet werden, um dem Browser mitzuteilen, dass eine bestimmte Ressource im Vergleich zu anderen Ressourcen desselben Typs einen größeren oder geringeren relativen Einfluss auf die Benutzererfahrung haben wird.
Beispielsweise könnte der folgende Header verwendet werden, um style.css mit einer höheren Priorität als andere Stylesheets vorzuladen:
Link: </style.css>; rel=preload; as=style; fetchpriority="high"
Beachten Sie, dass sowohl die interne Priorisierung beim Abrufen von Ressourcen als auch die Wirkung der Direktive fetchpriority browserabhängig sind.
Die Direktive fetchpriority sollte sparsam und nur in Fällen verwendet werden, in denen ein Browser nicht ableiten kann, dass eine bestimmte Ressource mit einer anderen Priorität behandelt werden sollte.
Spezifikationen
| Spezifikation |
|---|
| Web Linking # header |
Browser-Kompatibilität
Siehe auch
103 Early Hints<link>- IANA-Register für Link Relations
- Optimieren des Ressourcenladens mit der Fetch Priority API für Informationen darüber, wie diese API die Prioritäten in Chrome beeinflusst.