Preload, Preconnect, Prefetch

Recently I’ve been playing around with preload and prefetch to optimise request priorities on uforepublic.com and the below snippet shall serve as a little future sneak peek for myself.

The excerpt below is from Prioritize resources on web.dev where you can find further information on these new link types and how to use them.

There are three different declarative solutions, which are all relatively new  types.

<link rel="preload"> informs the browser that a resource is needed as part of the current navigation, and that it should start getting fetched as soon as possible.
<link rel="preconnect"> informs the browser that your page intends to establish a connection to another origin, and that you'd like the process to start as soon as possible.
<link rel="prefetch"> is somewhat different from <link rel="preload"> and <link rel="preconnect">, in that it doesn't try to make something critical happen faster; instead, it tries to make something non-critical happen earlier, if there's a chance.