preload
<link rel="preload">tells the browser to download and cache a
resource (like a script or a stylesheet) as soon as possible. It’s
helpful when you need that resource a few seconds after loading the
page, and you want to speed it up.The browser doesn’t do anything with the resource after downloading
it. Scripts aren’t executed, stylesheets aren’t applied. It’s just
cached – so that when something else needs it, it’s available
immediately.
prefetch
<link rel="prefetch">asks the browser to download and cache a
resource (like, a script or a stylesheet) in the background. The
download happens with a low priority, so it doesn’t interfere with
more important resources. It’s helpful when you know you’ll need that
resource on a subsequent page, and you want to cache it ahead of time.The browser doesn’t do anything with the resource after downloading
it. Scripts aren’t executed, stylesheets aren’t applied. It’s just
cached – so that when something else needs it, it’s available
immediately.