En-tête Link
L'en-tête HTTP Link permet de sérialiser un ou plusieurs liens dans les en-têtes HTTP.
Ceci permet au serveur d'indiquer au client une autre ressource contenant des métadonnées sur la ressource demandée.
Cet en-tête a la même sémantique que l'élément HTML <link>.
Un avantage de l'utilisation de l'en-tête Link est que le navigateur peut commencer à préconnecter ou précharger des ressources avant même que le HTML ne soit récupéré et traité.
En pratique, la plupart des types de liens rel n'ont pas d'effet lorsqu'ils sont utilisés avec l'en-tête HTTP.
Par exemple, la relation icon ne fonctionne qu'en HTML, et stylesheet ne fonctionne pas de manière fiable sur tous les navigateurs (seulement dans Firefox).
Les seules relations qui fonctionnent de manière fiable sont preconnect et preload, qui peuvent être combinées avec 103 Early Hints.
| Type d'en-tête | En-tête de réponse, en-tête de requête |
|---|---|
| En-tête de requête interdit | Non |
| En-tête de réponse autorisé CORS | Non |
Syntaxe
Link: <uri-reference>; param1=value1; param2="value2"
<uri-reference>-
La référence URI doit être encadrée par
<et>et encodée en pourcentage.
Paramètres
L'en-tête de liaison contient des paramètres, qui sont séparés avec des ; et sont équivalents aux attributs de l'élément HTML <link>.
Les valeurs peuvent être entre guillemets ou non, selon les règles des composants de valeur de champ (angl.), donc x=y est équivalent à x="y".
Exemples
L'URI (absolue ou relative) doit être déclarée entre < et > :
Link: <https://exemple.com>; rel="preconnect"
Link: https://mauvais.exemple; rel="preconnect"
Encodage des URL
L'URI (absolue ou relative) doit être encodée en pourcentage pour les codes de caractères supérieurs à 255 :
Link: <https://exemple.com/%E8%8B%97%E6%9D%A1>; rel="preconnect"
Link: <https://exemple.com/苗条>; rel="preconnect"
Déclarer plusieurs liens
Il est possible de définir plusieurs liens, en les séparant par des virgules :
Link: <https://un.exemple.com>; rel="preconnect", <https://deux.exemple.com>; rel="preconnect", <https://trois.exemple.com>; rel="preconnect"
Pagination avec des liens
L'en-tête Link peut fournir des informations de pagination à un client, ce qui est couramment utilisé pour accéder à des ressources de manière programmatique :
Link: <https://api.exemple.com/issues?page=2>; rel="prev", <https://api.exemple.com/issues?page=4>; rel="next", <https://api.exemple.com/issues?page=10>; rel="last", <https://api.exemple.com/issues?page=1>; rel="first"
Dans ce cas, rel="prev" et rel="next" indiquent les relations de lien pour les pages précédente et suivante, et il y a les paramètres rel="last" et rel="first" qui fournissent les premières et dernières pages des résultats de recherche.
Contrôler la priorité de récupération
Même en utilisant preload pour récupérer une ressource le plus tôt possible, différents types de contenu seront récupérés plus tôt ou plus tard selon la priorisation interne du navigateur.
L'attribut fetchpriority peut être utilisé pour indiquer au navigateur qu'une ressource particulière aura un impact relatif plus ou moins important sur l'expérience utilisateur que d'autres ressources du même type.
Par exemple, l'en-tête ci-dessous peut être utilisé pour précharger style.css avec une priorité plus élevée que d'autres feuilles de style :
Link: </style.css>; rel=preload; as=style; fetchpriority="high"
Notez que la priorisation interne pour la récupération des ressources et l'effet de la directive fetchpriority dépendent du navigateur.
La directive fetchpriority doit être utilisée avec parcimonie, et uniquement dans les cas où le navigateur ne peut pas déduire qu'une ressource particulière doit être traitée avec une priorité différente.
Spécifications
| Specification |
|---|
| Web Linking # header |
Compatibilité des navigateurs
Voir aussi
- Le code de statut
103 Early Hints - L'élément HTML
<link> - Les relations de lien (angl.) registre IANA
- Optimiser le chargement des ressources avec l'API Fetch Priority (angl.) pour des informations sur la façon dont cette API affecte les priorités sur Chrome.