How to speed up web sites using resource hints

29.04.2021

Last year I was visiting a frontend conference in Zurich. Besides a lot of interesting topics about AI and machine learning one topic I couldn't forget.

Although I'm developing web applications since more than 10 years and I already heard of resource hints, I've never really used them before. Harry Roberts gave me a really good understanding of how it really works and how to implement it. You can see the full video of the conference

here

. Since I'm of the opinion, that this is a really important thing every web developer should know, I decided to sum up the conference talk and explain what all this is about.

Preoblematic

The biggest problem in web applications we're always facing is performance. This is often caused by the loading time of external resources.

So how do we increase the performance of our applications when loading a lot of these externals?

Resource hints

Resource hints are helpful to advice the browser when to load or pre-evaluate external resources. The official definition is as follows.

«These primitves enable the developer [...] to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance»

Harry Roberts shortens this definition and make it much more understandable for everyone «These are single lines of HTML code that can speed up your website.»

Resource types

There are different resource types which I'm going to describe in this section. You can also read the

specification

Prefetch/DNS Prefetch

Preconnect

Preload

Prerender/NoState Prefetch

DNS Prefetch

Resolves the IP address for a given domain ahead of time.

The following snipped is placed in the head element in your html.

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

Now when the parser/interpreter arrives the iframe line of your document, the following steps are already done:

DNS Lookup

TCP-Connection

TLS negotiation

Time to first byte

<iframe width="560" height="315" src="https://www.youtube.com/embed/ySdRvo_QnxI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Note: DNS-Prefetch in IE9 is implemented as prefetch

Preconnect

Preconnect resolves the IP address and open a TCP/TLS connection for a given domain ahead of time. It does the same as DNS-Lookup plus does following two bits as well.

Useful when you know the domain but not the URL or you request several files from the same domain.

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

Use a Preconnect with dns-prefetch fallback

<link rel="preconnect" href="https://twitter.com" />
<link rel="dns-prefetch" href="https://twitter.com" />

Do not use it the other way round since preconnect must be tried first. Be judicious and do not warm up everything but frequent origins.

Prefetch

Prefetchs a needed file ahead of time «a file needed for subsequent navigation». Downloads a file which is needed in the next page. So it downloads the file and drops it into the HTTP cache for later usage.

<link rel="prefetch" href="/assets/audio.js" />

This only works if the CacheControl header is not set. Otherwise the file will be revalidated when being accessed.

Preload

Is a mandatory fetch for the browser. It helps the browser to find 'late-discovered-resources' earlier.

<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" as="style>

Note: the as attribute is mandatory for prioritization of the browser.

Don’t preload everything! Select specific late discovered resources that you want to load earlier and use preload to advice the browser to prioritize them.

Prerender

Prerender was formarly rendering the whole HTML pages before using them. This strategy caused several problems.

Prerender caused a huge memory footprint rendering whole new pages without really using them often.

Moreover when havig google analytics in your page you will register multiple hits using prerender.

Some functionalities like timers etc. are not really working correctly having a prerendered page.

So people decided to change prerender to a NoState prefetch. This will not render everything but do a recursive prefetch which means it prefetchs reources used in the following pages. This prefetch fetches resoruces with the lowest possibl priority.

To sum it up

Resource hints can increase the performance of a website. In my opinion you should try to use them since you can easily speed up your websites. Nevertheless there are some issues which can affect the website in a negative way.

Everyone who is interested in and willing to use resource hints can find more information in the full video of Harry Roberts @ Front Conference Zurich 2019 on

vimeo

If you have any questions or improvements please send me an email to

INFO[AT]ONECODEX[DOT]CH