Ivan Akulov has collected a whole bunch of information and know-how on making things load a bit more quickly with preload and prefetch. That’s great in and of itself, but he also points to something new to me – the as attribute:
<link rel="preload" href="/style.css" as="style" />Supposedly, this helps browsers prioritize when to download assets and which assets to load.
My favorite part of this post is Ivan’s quick summary at the end which clearly defines what all these different tags can be used for:
<link rel="preload">– when you’ll need a resource in a few seconds
<link rel="prefetch">– when you’ll need a resource on a next page
<link rel="preconnect">– when you know you’ll need a resource soon, but you don’t know its full url yet
Make sure to check out our own post on the matter of prefetching, preloading, and prebrowsing, too. Adding these things to our links can make significant performance improvements and so check it out to add more resources to your performance toolbox.