How to Make Your Website Faster with Tag

Note from me: This article is part of our Code Optimization series. We’re exploring ways to improve your coding skills and make your code more efficient.

“Smart” browsers are the future of super fast internet browsing, giving us the things we need even before we realize we need them. Right now, modern browsers are already making some predictions to accelerate the process of finding and displaying websites. But we can take it a step further – with the help of web developers like you and me!

As a developer, I know how users navigate my websites and which resources they request the most. With this information, I can predict what actions browsers should take when loading my sites. Now I just need to find a way to communicate these predictions to browsers and make good use of them. That’s where special “HTML links” come in.

Let’s Review HTTP Requests

Before we dive into these links, let’s take a moment to remember how a typical file-fetching operation works when someone visits a website. Let’s use an example of a person named Joe who wants to visit a website.

Here’s what happens:

1. Joe types the website’s address into the browser’s address bar and hits “Enter”.

Once you type an address into your browser, it starts seeking the help of a special server called a DNS server. This server guides your browser to the correct place on the internet by providing the IP address associated with the website you want to visit.

After the DNS server gives your browser the IP address, your browser can send a message to that website’s server. This message is written in a language called TCP.

If the website’s server is working properly, it will respond to your browser’s message. This creates a connection between your browser and the website’s server.

Once the connection is established, your browser switches to using a different language called HTTP. It uses this language to ask the server for the website you want to see.

So, in summary, when you enter a website address, your browser asks the DNS server for the IP address of that website. Then it sends a message to the website’s server and establishes a connection. Finally, your browser requests the website using the HTTP language.

When you’re browsing the internet, a lot happens behind the scenes to deliver the websites you visit. Let me explain the process.

First, when you type a URL into your browser, a request is sent to the server hosting the website. The server knows what you want and sends back the home page. The browser then takes this response and shows it to you on your screen.

This whole process is called an HTTP request, and it’s not as simple as it sounds. There are many steps involved, and each one takes time. But here’s the interesting part: if we can speed up any of these steps, we can reduce the time you have to wait for the website to load.

Now, let’s talk about HTML link relationships. The W3C (World Wide Web Consortium) has defined four link relationships that can help with this. They are called dns-prefetch, preconnect, prefetch, and prerender. These link relationships are collectively known as “Resource Hints”.

So, what do these link relationships do, and where can they be used? Let’s find out.

1. DNS Prefetch

When it comes to DNS prefetch, I want to explain to you how it works and why it’s important. DNS prefetch is all about resolving domain names ahead of time. What that means is, instead of waiting until you click on a link to find the corresponding IP address, DNS prefetch does it in advance. This may sound a bit technical, but stick with me and it will all make sense.

Now, you might be wondering why we even need to prefetch DNS results. Well, let me put it this way: when you click on a link, your device needs to connect to the internet and request the corresponding web page. One of the first things it needs to do is find the IP address of the website you want to visit. This process is called domain name resolution.

Here’s the thing though – DNS requests are very small in terms of data, so they don’t take up much bandwidth. But they can be pretty slow, especially on mobile networks. And when it comes to browsing the web, speed is everything.

That’s where DNS prefetch comes in. By speculatively prefetching DNS results, we can reduce latency – that’s the time it takes for something to happen on the internet. For example, when you click on a link, DNS prefetch can reduce the time it takes to load the web page by up to a second. That might not sound like much, but trust me, it can make a big difference in terms of user experience.

Let me give you an example to make things clearer. Imagine there’s a website with a reference page that has a bunch of links to its sister site. When you visit the reference page, there’s a good chance you’ll also want to visit the sister site. So, instead of waiting until you actually click on a link to find the IP address of the sister site, DNS prefetch does it in advance. This means that when you do click on a link, the sister site will load faster because the IP address is already known. Pretty cool, right?

So, that’s DNS prefetch in a nutshell. It’s all about making your browsing experience faster and smoother by resolving domain names ahead of time.

DNS prefetching is a useful technique to reduce latency, and you can easily implement it by adding a simple code snippet to your reference page. Just include the following code:

<link rel=”dns-prefetch” href=”//mysistersite.org”>

When your browser processes this code, it adds the DNS lookup of the sister site to its task queues. And when it has finished with any high-priority tasks, it begins the DNS resolution for the sister site.

The beauty of this approach is that when a user clicks a link that takes them to the sister site, the DNS resolution may already be completed. This means the browser can immediately start establishing a TCP connection with the sister site server, resulting in faster page loading times.

Almost all modern browsers support this feature, except for Safari as of March 2016.

Now, let’s move on to another technique that can further improve the performance of your website.

2. Preconnect

Hey there! Let’s talk about preconnect. It’s this cool thing that goes beyond DNS prefetch. Basically, preconnect allows us to establish a connection to a server that might get a request later on. Sounds pretty useful, right?

You know, preconnect is like a superhero in your optimization toolbox! It can save you a ton of time by cutting down on roundtrips. This means your requests will be much faster, sometimes even thousands of milliseconds faster! Don’t just take my word for it, lya Grigorik said it too!

Okay, so W3C has this ideal use case for preconnect: redirects. You see, developers use redirects for all sorts of reasons. But the thing is, when we know where a browser will be redirected to, we can actually preconnect to that site. This way, we reduce the delay when navigating to the new page.

Imagine there’s a special page that redirects to “xyzsite”. To help speed up the process, you can make the browser preconnect with the xyzsite server when it reaches that page. Just use the following HTML link:

“`

“`

This feature is available in Chrome, Opera, and Firefox as of March 2016.

Another useful technique is prefetching. When you prefetch a resource, the browser starts by figuring out the domain name of the resource. Then it establishes a connection with the server, sends an HTTP request, and finally downloads and stores the resource in the browser cache. This way, the resource will be ready to use when you actually need it.

So, here’s the deal: If you’re really sure about what resources you’ll need later on, go ahead and prefetch them in advance. Sounds good, right? Well, here’s the tricky part. Prefetching involves a bit of guesswork. You have to make an educated guess about which resources to load beforehand. And let me tell you, if you guess wrong, you could end up slowing down your site instead of speeding it up.

“Now, this prefetching technique has the potential to be a real game-changer for many interactive sites. But here’s the thing: it won’t work everywhere. Some sites are just too darn tricky to predict what the user might do next. And for others, the data might become outdated if it’s fetched too soon. Oh, and you know what else? It’s crucial not to prefetch files too early, or else you’ll end up slowing down the page that the user is already looking at. – Google Developers”

If you have an online book, gallery, or portfolio, I have a way to make the browsing experience faster and smoother for your users. Here’s what you need to do.

First, let’s talk about prefetching. When users are likely to keep browsing to the next page, prefetching can make a big difference in speed. It means getting ready for the next page in advance by fetching the necessary resources, like images. Here’s the code you need to use:

<link rel=”prefetch” href=”//xyzsite.com/nextimage.jpg”>

Now, let’s move on to prerendering. This technique is only applicable to HTML pages. When a page is prerendered, it’s basically rendered offline and ready to be shown to the user when needed. However, rendering a page like this requires more computational work and memory resources. Additionally, the browser might need extra resources (like images) to fully render the page, which can result in more requests by the browser.

It’s important to balance the benefits of prerendering with the potential drawbacks. But if executed properly, it can greatly enhance the user experience.

Hey there! Let’s talk about prerendering and why it’s important to use it wisely and not go overboard. When we talk about prerendering, we mean something called “preprocessing” that happens before you actually visit a web page. It’s like getting a sneak peek of the page before you even go there. But why would we want to do that?

<link rel=”prerender” href=”//example.com/about.html”>

The code I just showed you is what you need to add in order to prerender a specific page, in this case the “About” page. This way, the page will load in the background while you’re looking at other stuff. When you do decide to click on the “About” link, the page will pop right up because it was already preloaded. Pretty cool, right?

The idea behind prerendering is to make your browsing experience faster and smoother. It helps the website guess what page you’re most likely to visit next, so it gets ready in advance. You can think of it as the website trying to read your mind – it’s like it says, “Hey, I know you’re going to click on that page, so let me have it ready for you!” This way, there’s no delay when you do click on it.

But remember, just because prerendering is handy doesn’t mean we should go crazy with it. It’s kind of like having too much of a good thing. If you use prerendering for every single page on a website, it might end up slowing things down instead of speeding them up. So, be selective and use it wisely.

By the way, prerendering is already available on Chrome, IE, and Opera. They introduced it in March 2016. So it’s been around for a while now.

Here are a Few Important Things to Remember:

(1) None of the things I just talked about promise that they’ll definitely happen, because sometimes your browser is too busy to do all the things it’s being asked to do. When that happens, these things might slow down what you’re already doing on the internet.

So, instead of doing them right away, they wait until the browser has some free time and then they happen.

You don’t even have to put these things on the page when it first loads. You can add them later using a special computer language called JavaScript, and they’ll still work just like normal.

I’ve come across something interesting called the HTML link attribute. It’s called “hint probability” and it’s specified by the W3C. This attribute, abbreviated as “pr,” is used to indicate the likelihood of future requests being made. While I haven’t seen any browser implementing this attribute yet, it’s still worth knowing about. Let me give you an example. If we have the following code, it means that there’s an 80% chance that the xyzsite will be requested in the future and a 30% chance for the about page:

<link rel=”preconnect” href=”//xyzsite.com” pr=”0.8″> <link rel=”prerender” href=”//example.com/about.html” pr=”0.3″>

In addition, we can also include the optional “crossorigin” attribute in the resource hints to inform the browser about the linked request’s CORS credential. This can be quite useful in certain situations.