Preload, Prefetch and Preconnect, what are they for?

Question

I see in several sites these values Preload, Prefetch and preconnect in the attr rel of certain links, but I did not understand exactly its functionality.

What exactly are they for? When to use?

Answer 1

Preload: Specifies that the browser agent should search and store in a way that foresaw the destination resource assigned by the attribute:

First load the content of the attribute;

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

Obs: Will load the content style.css in memory, use when it is a small file, a theme arrangement.

pre-effice: Specifies that the browser should load and cache (disk) in the browser for use in the next browsing or when prompted in the future;

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

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

Reference: https://www.w3.org/TR/resource-hints/#dfn-Prefetch

Obs: You will cache (disk) your css file for future use.

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

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

Obs: Starting a connection, which includes DNS search, Handshake TCP and optional TLS trading, allows the user’s agent to mask the high latency costs when establishing a connection. ; also has the dns-Prefetch which is similar to preconnect

Reference: https://www.w3.org/TR/resource-hints/#preconnect

As the Preload stores in memory of the browser pre-effice stores in cache(disk), the preconnect check if it is possible to connect the source of the resources if you can, the User Agent browser leaves connection pre-set;

Reference https://www.w3schools.com/tags/att_link_rel.asp

Answer 2

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

Preload

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

Enter the value preload makes the client (browser) search for this resource as soon as possible. In the flow normal, the browser would only require this feature when rendering the page immediately before, or rather, which, depending on the case, can block the first rendering and increase the loading time. When indicating the resource as preload, you will be indicating that this feature will be used on the page very soon and that it should order it as soon as possible, seeking the result of, when the browser will render the page, the feature is already available.

Other advantages are:

• The browser will prioritize features more accurately;
• Anticipates future resources, reusing the same, if any;
• Apply the correct content security policy;
• Sets the request headers Accept correct for the resource;

Using the attribute as you increase the consistency of your application by informing the type of resource to be requested. This is important, including for the customer to determine the order of preference between them. Possible types are:

• audio, audio files;
• document, HTML file to be loaded into a <frame>;
• embed, resource to be embarked on a <embed>;
• fetch, resource that will be requested asynchronously;
• font, source file;
• image, image file;
• object, resource to be embarked on a <embed>;
• script, javascript file;
• style, css file;
• track, webvtt file;
• worker, filing cabinet web worker in JS;
• video, video file;

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

More details you can read on Preloading content with rel="Preload".

pre-effice

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

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

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

Like any resource, use with caution. Use fetch for unnecessary resources may overload your server with requests that could be avoided.

Other information on Link prefetching FAQ.

preconnect

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

As its name suggests, it’s a preconnection. The client will request from the resource server an HTTP connection from which nothing will be transmitted, that is, the client will not send data to the server beforehand and the server will not send data to the client. The idea here is to anticipate the connection between client/server so that future requests are completed in less time.If you use a cache server, for example, it is a good idea to use the preconnect with the server, so all the resources that will be requested from the cache on the server will be obtained faster, which decreases the page load time.