preload : Specifies that the browser agent should fetch and store the target resource assigned by the attribute in advance:

First loads the contents of the attribute;

    <link rel="preload" href="/styles/style.css" as="style">

Note: Will load style.css content into memory, use when it is a small file, a theme arrangement.

  

prefetch: Specifies that the browser should load and cache (disk) in the browser for use in the next navigation or when requested in the future;

  <link rel="prefetch" href="/styles/style.css" as="style">

First load the file "style.css" cached, for use in the next navigation;

Reference: link

Note: Will load your css file for future use.

  

preconnect : Checks whether it is possible to connect to the content content source;

 <link rel="preconnect" href="https://cdn.algumrecurso">

Reference: link

While preload stores in browser memory prefetch caches, preconnect checks to see if it is possible to connect to the source of resources if you can, the User Agent of the browser leaves a pre-established connection;

Reference link

There are three possible among many others , for the rel attribute of element link .

preload

<link rel="preload" href="style.css" as="style">

Displaying the value preload causes the client (browser) to search for this resource as quickly as possible. In the normal stream, the browser would only request this feature when rendering the page, sooner rather than later, which may, depending on the case, block the first rendering and increase the loading time. When you indicate the resource as preload , you are indicating that this resource will be used on the page very soon and that it should request it as soon as possible, seeking the result of, when the browser is rendering the page, the resource already available.

Other advantages are:

• The browser will prioritize resources more accurately;
• Anticipates future features, reusing them, if any;
• Applies the correct content security policy;
• Defines the correct Accept quirement headers for the resource;

Using the as attribute increases the consistency of your application by informing the type of resource to be requested. This is important, also, for the customer to determine the order of preference between them. The possible types are:

• audio , audio files;
• document , HTML file to be loaded in a <frame> ;
• embed , resource being shipped in <embed> ;
• fetch , resource that will be requested asynchronously;
• font , source file;
• image , image file;
• object , resource being shipped in <embed> ;
• script , JavaScript file;
• style , CSS file;
• track , WebVTT file;
• worker , web worker file in JS;
• video , video file;

Although it seems like a good idea to use this for all of your site features, use caution. Shallowly, it is recommended that you use preload only for features that will be used to render the page above the edge, such as top-of-page CSS, logo, banners, fonts, etc. Features that will be used below the border can be naturally requested without changing the user experience.

More details can be read at Preloading content with .

prefetch

<link rel="prefetch" href="/images/big.jpeg">

With prefetch you inform the client to request the feature silently after rendering the current page completely. That is, no resource that will be used by the page should be requested with fetch . What fetch does is simulate the user's future behavior so that it is possible, during browser idle time, to anticipate requests and cache. For example, if the current page is index , displaying a menu, it would be wise to deduce that in the future the user will access a link from this in order to enter an internal page. With fetch you will be able to make the request for these pages and store the result in the cache, and when the user accesses the link, the cached result will be displayed.

Browser idle time is one in which it has finished rendering the current page and is waiting for some user interaction. fetch uses this time to anticipate requests and improve the user experience in future interactions, because as the result will be in cache, the loading time will be very low.

Like any feature, use caution. Using fetch for unnecessary resources can overload your server with requests that could be avoided.

More information on Link prefetching FAQ .

preconnect

<link rel="preconnect" href="https://cdnjs.cloudflare.com/ajax/libs">

As the name suggests, it's a pre-connection. The client will request from the resource server an HTTP connection from which nothing will be transmitted, that is, the client will not previously send data to the server, nor will the server send data to the client. The idea here is just to anticipate the connection between client / server so that future requests are finalized in less time. If you use a caching server, for example, it is a good idea to use preconnect with the server, so all the resources that will be requested from the cache on the server will be obtained faster, which will reduce page load time.