”Preload, prefect and other link tags

I’ve actually never really taken the time to try and understand exactly the difference between preload, prefetch, preconnect, prerender, etc. This articular sums it up nicely. In fact, I’m going to sum it based on my understanding of how they summed it up. Is that enough summing for you?

• <link rel="preload"> – use it when you want to “preload” a resource after initial page load.
• <link rel="prefetch"> – use it when you want to “prefetch” a resource you think you’ll need on a subsequent page.
• <link rel="preconnect"> – use it when you want to “preconnect” to a domain for resource(s) you know you’ll need soon.
• <link rel="dns-prefetch"> – similar to “preconnect”, but less featured. However it does support older browsers that “preconnect” does not.
• <link rel="prerender"> – use it when you want to load and render a page in the background that you anticipate the user will soon navigate to.

There’s a lot more useful and nuanced information in the article beyond what I’ve summarized here. Check it out if you don’t already know the differences.