Understanding HTTP Link Headers

Website Performance Learning

HTTP headers are a core part of browser requests and server responses, they carry information about the connecting client, the requested resource, the server, and more. An HTTP header consists of its case-insensitive name followed by a colon (:), then by its value. They are used for various purposes like providing authentication information, doing content negotiation, and so on. Here's some sample request headers sent by my browser when requesting a page on the Peakhour website:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-AU,en;q=0.9
Connection: keep-alive
Cookie: _ga_NRWSVE0PSC=GS1.1.1685943893.13.0.1685943893.0.0.0
Host: www.peakhour.io
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4.1 Safari/605.1.15

The HTTP Link header

An HTTP Link header is a way for a server to send context about a document back to a client. It can be used to provide important information such as related resources, or the direct location of a specific asset. They are an alternative, and in many ways superior, of providing preload/preconnect/prefetch hints to browsers to optimise page loads.

History

The idea of using HTTP Link headers was proposed as a standard in the late 1990s, around the same time the HTTP/1.1 protocol was defined. However, it wasn't until 2010 that HTTP Link headers were officially recognized by the Internet Engineering Task Force (IETF) in RFC 5988, which described their purpose and functionality.

Uses

HTTP Link headers have various uses, especially in the world of web development. Let's explore some examples:

Pagination: Let's say we have a blog site with hundreds of posts, and we display 10 posts per page. When a user requests a page, we can use Link headers to provide URLs for the next and previous pages. This helps with navigating through the large list of posts. Here's an example of how it might look:
```
Link: </posts?page=2>; rel="next", </posts?page=4>; rel="prev"
```
Preloading: Suppose we have a heavy image or a large CSS file that we know will be required for a webpage. We can use a Link header to tell the browser to start downloading it ahead of time, improving the perceived page load speed. For instance:
```
Link: </images/big-picture.jpg>; rel=preload; as=image
```
Resource Hints: Link headers can be used to give the browser hints about resources that might be needed in the future, so the browser can make a decision on whether to fetch these resources ahead of time. For instance:
```
Link: </scripts/myscript.js>; rel=prefetch
```

Comparison to Link Tags and Why Headers Can Be Better

Now you might be wondering, "Why use Link headers when we can use HTML Link tags?" Well, there are several reasons why HTTP Link headers might be a better choice:

Faster Processing: Since HTTP Link headers are part of the HTTP response, they arrive before the HTML document. This allows browsers to start preloading or prefetching resources sooner, which can significantly improve page load times.
Greater Flexibility: HTTP Link headers can be used in situations where HTML Link tags cannot. For instance, they can be used with file types that don't support HTML, like JSON or XML. They can also be added by a third party, eg a CDN like Peakhour without the need to parse and rewrite the HTML document.
Less Clutter: Link headers can make your HTML less cluttered, as you can avoid filling your HTML document with numerous Link tags.

Conclusion

HTTP Link headers may seem like a minor detail in the grand scheme of web development, but they can actually make a big difference in terms of performance and flexibility. The ability for a CDN, like Peakhour, to be able to add Link headers without the overhead of parsing/manipulating the main document makes it a very powerful tool for optimising website performance.

Website Performance Learning