How to speed up your site using the link tag?
Foreseeing in browsers is the future of high-speed internet surfing. Already, browsers themselves are able to speed up page loading based on user behavior. In fact, they download the content that the user wants, even before he realized that he wants it.
We can significantly increase the effectiveness of this technique because as developers, we have a good idea of how the user navigates our site. Knowing which resources are most often requested, we could tell the browser that they need to be downloaded in advance. And here tags come to our aid
links. Using special attributes, they tell the browser what to download and why.
Before starting the optimization, let’s refresh in memory how a typical HTTP request occurs.
Joe wants to visit some website.
- He remembers his human-readable address, enters the address bar of the browser and presses
- The browser contacts the DNS server to obtain the appropriate IP address.
- After receiving the IP, the browser sends a TCP message to the website server, requesting a connection.
- If the server is working properly, it confirms the request and sends a message to the browser, which it, in turn, confirms (here is such a light version of the TCP handshake ).
- When all the handshakes are completed, a connection is established between the client (browser) and the server.
- The browser goes from TCP to HTTP and requests the web page that Joe patiently waits in front of the monitor.
- The server passes the requested page to the browser.
To get to the desired document via the Internet, you need to go through many stages. The sooner this process begins, the faster we get what we want.
HTML document relationships
The HTML tag
linkhas an attribute
rel– short for relationship. It determines the relationship between the open document and the page that the link points to.
The W3C defines the many possible values for this attribute. For example, you are familiar with rel = “stylesheet”, which is used to include CSS files.
We are now interested in 4 values:
All together they are called Resource Hints. Let’s see why they are needed and how to work with them.
This attribute value
relallows you to take care of the resolution of the domain names of documents in advance, that is, obtain the desired IP address from the DNS server.
In terms of bandwidth, DNS queries are very small, but the latency with their execution can be quite high, especially on mobile networks. This delay can be significantly reduced by pre-fetching the DNS results, for example, at the moment when the user clicks on the link. In some cases, the delay can be reduced by a whole second.
Suppose the site has a help page with many links to a subsite. Thus, there is a high probability that the user will go to this subsidiary site. An early DNS lookup can reduce the time it takes to open a site (thereby improving the user experience).
<link rel="dns-prefetch" href="//othersite.org">
When the browser sees this code on the man page, it adds the DNS lookup of the child site to the task queue. When all the high priority tasks are over, he will do this and find the right IP address.
Now, if the user clicks on the link, the browser immediately proceeds to establish a TCP connection, bypassing the call to the DNS server.
rel="preconnect"causes the browser to go even further and establish a connection with the server, to which a request may be sent in the future.
An ideal use case for
preconnect– redirects that are used on the web very often. If the next browser request is unambiguously predictable (you are going to make a redirect), you should immediately download the desired site in order to reduce the delay in loading it.
<link rel= "preconnect" href= "//othersite.com">
If a relationship is specified for the resource
prefetch, the browser contacts the DNS server for its domain name, makes a TCP connection, makes an HTTP request, and finally retrieves and stores the resource in the cache. And all this in the background, without explicit user action.
This value should be handled very carefully. If you do not guess where the user wants to go the next step, then you can not speed up, but even slow down your site. Sometimes it’s very difficult to correctly predict user actions, so think carefully about whether to use it
One of the cases of using this value is online books/galleries/portfolios with pagination. The probability that the user will go to the next page is high, so you can preload resources from it, for example, images.
<link rel="prefetch" href="//site.com/nextimage.jpg">
prerendercan only be used for HTML pages. They will be completely rendered offline, and as soon as the user wants to switch to them, they are immediately shown.
This requires a lot of computational work and a lot of memory. Also, for rendering the page, the browser may require additional resources (for example, images added to the page), which will lead to an increase in the number of requests.
Do not abuse this powerful feature.
<link rel="prerender" href="//site.com/about.html">
- None of the above techniques can guarantee you that the desired resource will be partially or fully loaded in advance. After all, the browser has a ton of other important work, and it may simply not have time to complete a preliminary request for the resource.
linkwith an attribute
- W3C defines for tags
linkthere is another attribute
pr(hint probability), which can take values in the range from
1. This figure determines the probability with which the specified resource can be requested.
<link rel="preconnect" href="//xyzsite.com" pr="0.8"> <link rel="prerender" href="//example.com/about.html" pr="0.3">
You can also use the cross-origin attribute to configure CORS requests.