What is the HTTP Link Header? || All about the HTTP Link Header.

What is the Link Header?

Link: is a header that provides a browser with a means for serializing links in an HTTP response header. This tells a browser how to handle a particular Uniform Resource Identifier (URI) reference. It can also be used to tell a browser to perform some action on a URI.

When it comes to serving your website content to your users, you have to optimize the content and how it is served to the users so as to provide the best experience possible.

One way to achieve this is by telling a browser up front how to load and render your web page’s content by including some instruction in the HTTP Response Header, which your server sends to the browser in response to its request.

The HTTP Response Header contains some header types in its entity-header field. The entity-header field gives the browser detailed information about the response it is receiving, and this response contains the HTTP payload.

With the entity-header field, the browser gets to understand how to handle the payload in the HTTP response message it receives. One header that the entity-header uses to communicate to the browser is the Link Header.

The Link Header was developed in the early version of HTTP, but its function was refined in 1999 by Connolly and Hixie. Mark Nottingham and others also did work on it to make it what it is today. The experimentation of the Link Header can be done with HTML specifications. This is because Link Header’s operations are similar to <link>, which is an HTML element.

I will explain the similar relation between <link> and Link Header in detail and how to use the Link Header later in this article, but for now, just know that when you use the Link Header, the browser will act on it first, even before moving to the main part of the response (your page’s content).

This is why a Link Header can improve the rendering speed of a page better than an inline <link> element in your HTML file, which is in the main part of the response.

Link Header Syntax

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

Let me explain the parts of this syntax briefly.

1. Header Name:

Different header names can be found in the entity-header field. Examples include Content-Length, Content-Type, Content-Encoding, Date, Server, and so on.

In this syntax, the header name is Link, and it is followed by a colon `:` leading to the next part of the syntax.

Note: HTTP header names are case insensitive.

2. URI Reference:

A Uniform Resource Identifier (URI) is a sequence of characters used to identify or locate either logical or physical resources on the web. These resources could be any font, image, or third-party scripts you made use of on your webpage.

The uri-reference in the Link Header Syntax must be enclosed between `<` and `>,` after which a semicolon `;` is used to separate the uri-reference from the first parameter.

You can include as many URIs as necessary in the Link Header, and I will show you how to do that in the examples I will be giving soon.

3. Parameters and Values:

A parameter (param1) equated to a value (value1) is the last part of this syntax, and the common parameter used with the Link Header is the rel attribute, which can be assigned values like preload, meta, prerender, and so on.

The parameter and value are used to define the relationship between the URI and your webpage content or to perform a task like preload on the URI in your webpage content.

The Link header can hold more than one parameter, as shown in the syntax above, but most time, all you would need for a URI is just one parameter having one value.

Examples of Link Headers.

Now you understand the main syntax, let me show you a few examples of how it is used.

Examples with a single URI:

Link: <meta.rdf>; rel=meta

This link header has meta.rdf as its URI reference, rel as its parameter, and meta as its value.

If a browser is to find this in an HTTP response header, then it understands that you are telling it that more information (metadata) about the main response (your web page’s content) can be found in a resource with meta.rdf as its URI reference.

With this, a browser can get your metadata file without accessing your resource or content. The metadata file could contain information about how to edit the file or policy information about adequately using your resource.

Let’s take a look at another example.

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

In this example, the URI reference is https://example.com; the parameter is rel, and the value is preconnect.

When a browser receives a response from a server and finds this Link header in the entity-header field, it understands that you want it to begin creating a connection to https://example.com first before working on rendering your webpage because it will need to use that in the page.

Since the browser is able to make the connection with https://example.com on time, when it is time for it to perform the needed task with https://example.com, it will happen seamlessly, providing a user with a better experience.

As I said, you can specify multiple URI in a link header and tell a browser to perform a few tasks before rendering your page.

Example with multiple URI:

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

Here, the link header tells the browser to connect with https://vitalfrog.com, https://app.vitalfrog.com, and https://example.com before moving to render your web page’s content.

Also, notice the comma `,` that separates each URI and their param1=value1 from the next. This helps a browser to identify each URI independently. And since the browser makes a connection to these URI on time, any task made with them is done faster.

Why Do I Care About Link Header?

What benefit will a Link Header bring to the table?

Ok, before I explain this in detail, here is the main benefit of the Link Header: It improves website speed and here is how it does it.

When a user clicks on a link to your webpage, the browser sends a request for your webpage’s content to your server (or a CDN if you use one). The server processes this request, and then when it is done, it sends a response back to the browser, and this response is what the browser works on to deliver your web page content to the user.

In the response, we have a response header with an entity-header field, and as I mentioned earlier, the entity-header field contains some header names, each having its function.

While some of the headers are required, some are not, and everything can work perfectly without them, one of which is the Link Header.

Suppose a browser receives a response that does not have a Link Header in the entity-header field. In that case, there won’t be any issue at all, but here is what happens: the browser will approach the response and begin to load and render the web page without any clue on what it will need or connections it should make.

The browser works through your HTML, JavaScript, and CSS code from line to line and performs each task as arranged in the server response.

• When it comes across a third-party script, it will begin the connection to it at that moment and wait for that before it can continue.
• When it comes across a font, image, or any other resource, it will request and wait for that before it continues.

Well, this is normal, and you can optimize the process with some element or HTML attributes. But if the browser received a response with a Link Header, a lot of the time wasted in making important requests and connections would be cut down.

With a Link Header, you can give a browser some information about a particular URI up front, tell the browser to preload, preconnect, prefetch, or perform any other task on a URI first before even touching the main resource (your web page content).

Since the browser is able to do all this upfront, further action taken with any of the URIs will occur faster than when it has to make urgent actions.

With this, a Link Header can improve your website speed and help improve a user’s experience with your website. Also, other web vital metrics related to website speed will be improved if a Link Header is implemented.

I will show you how to implement a Link Header in your Server response, but it is essential to know that all this can also be done using the <link> HTML attribute. This is because it can perform the same function as the Link header in an HTTP response header, and you can choose to use either.

How to Implement Link Header in Apache HTTP Server.

Since Apache HTTP Server is the most popular HTTP client on the web, I have decided to explain how to implement the Link Header in it. I believe implementing the Link Header in Apache HTTP Server would be the same for other HTTP clients or Servers, only that there might be some slight difference. So, this should give you an understanding of how to implement the Link Header in any HTTP Server.

Implementing in Apache 1.

To use a Link Header in Apache 1, you can add it in the .htaccess file since the mod_ header supports it. Here is an example:

Header set Link: <https://vitalfrog.com>; rel="preconnect"

This will include this link Header in your HTTP Response Header.

Implementing in Apache 2.

For Apache 2, it works the same way as in Apache 1.

Header set Link: <meta.rdf>; rel=meta

But you can also do this using the environment variable expansion.

Header set Link: <%{Request_URI}.meta>;rel=meta

Implementing in Apache 2.3

How is how to add a link header in Apache 2.3:

SetEnvIf Request_URI "(.*)" Request_Uri=$1
 Header add Link "<%{Request_Uri}e.meta>;rel=meta"

Link Header Browser Support.

According to the information from Mozilla links prefetching FAQ, Link Header is currently supported in Firefox 3.5 and Gecko. The removal of the Link Header support from Firefox was requested in Mozilla bug 748294 10 years ago.

This is because all the functions of the Link Header can simply be performed using the <link> element in HTML, so modern browsers do not support the Link Header.

Link Header and <link> HTML Element.

Like the Link Header, the HTML element can<link> HTML element can be used to inform a browser to perform tasks like preload, preconnect, prefetch, etc., on a URI to improve web performance.

It is important to know that the <link> element is best added in the <head> element as this is when it can perform exactly like the Link Header since the browser checks the head element and work on that first.

Similarities.

To better explain the similarities between the Link Header and the element, let’s look at some examples.

<link rel="preconnect" href="https://mydomain.com">

The above code line uses the <link> element to tell a browser to make a connection with https://mydomain.com, and if this code link is found in the <head> element, the browser is able to make that connection upfront improving its speed.

This same thing can be done using the Link Header.

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

Other examples include:

Link Header:

Link: </images/big.jpeg >; rel="prefetch"

<link> element:

<link rel="prefetch" href="/images/big.jpeg">

Link Header:

```Link: <sintel-short.mp4>; rel="preload"

<link> element:

<link rel="preload" href="sintel-short.mp4"

Link Header:

Link: <main.css>; rel="stylesheet"

<link> element:

<link href="main.css" rel="stylesheet">

All these perform the same functions.

Conclusion.

The Link: is a header that you can use to prevent a browser from making urgent requests and connections, thereby cutting down your load time. It can also be used to give a user’s browser information about the response it is receiving.

I have explained the Link Header Syntax and also given you examples to show how it works, and I believe after following this article to this point, you should understand what a Link Header is and how to implement it.

But because of the issue with browser support, you can choose to use the <link> HTML element instead of the Link Header. They but do the same thing if well implemented.

Whichever one you use, the goal is to improve the website speed performance by cutting down the load time and render time, and you have to do all you can to achieve that because it directly impacts your User Experience (UX).

Good luck with optimizing your website with a Link Header.

FAQs