Increasing Website Speed With LINK Tags

There is a growing trend of “foreseeing browsers” in the world of web design and development. It is poised to become the main way of Internet surfing where resources are presented to users even before they know they want them. In order to convey these predictions to browsers, HTML LINK tags are used to jumpstart the process when possible. This helps reduce the time users have to wait for the delivery of their requested resources. Below is a quick look at some of those tags:

The Prerender Link Tag

Prerendering tags can only be used on HTML pages and is often rendered offline. In addition, the tag will be painted to the screen when it is required by the user. Rendering, however, requires a larger amount of computational resources. That’s why the prerender tag should be used sparingly to reduce the number of browser requests. Here’s an example of a prerender tag: <link rel=”prerender” href=”//yourwebsite.com/about-us.html”>. By adding the code, it prerenders your website’s About Us page beforehand.

The Prefetch Link Tag

The prefetch tag is designed to prompt browsers to start implementing the DNS resolution (the process of retrieving a matching IP address from the DNS server) of the resource’s domain name. Next, it establishes a TCP connection with the resource’s server before making a HTTP request. When it finally fetches the resource, it stores it in the browser cache. With that in mind, individuals usually prefetch the resources that might be needed later. Since it involves some form of guesswork, one might actually slow down his or her site by making the wrong guesses.

Let’s say that you know your visitors well and that they are expected to access an online portfolio or photo gallery. In this case, it will be a good idea to prefetch resources such as images to speed things up significantly. A sample code to use is: <link rel=”prefetch” href=”//yourwebsite.com/thirdimage.jpg”>.

The Preconnect Link Tag

The preconnect tag is designed to connect to servers that may receive potential requests. That’s why this tag is an important tool to have in one’s optimization toolbox. Preconnect can help eliminate costly roundtrips from request paths, as well as reduce the request latency by hundreds or even thousands of milliseconds.

Here’s a short scenario: a browser’s next request is 100% predictable and it involves redirecting to a site named “abcsite.” The LINK tag will make the browser preconnect with said server after reaching the intermediary page. The code needs to be written in this manner: <link rel=”preconnect” href=”// abcsite.com”>.

The DNS Prefetch Link Tag

Some websites feature reference pages that have links that lead to their sister sites. In many cases, there is a high probability that users who visit these pages will navigate to the sister sites. It will be useful to perform an early DNS lookup to reduce the time it takes to open the sister website and improve the overall user experience. A sample DNS prefetching tag looks like this: <link rel=”dns-prefetch” href=”//thesistersite.com”>. If the DNS resolution is successful, the user’s browser can begin establishing the client-server TCP connection with the other server right away. This makes the pages load faster.

In addition to using the above-mentioned LINK tags, it is also important to perform routine website maintenance to ensure that everything works at full speed.