HTML5 resource preload (link prefetch) detailed introduction (accelerate your web page)

Time:2022-5-8

I have introduced some speed optimization techniques used on this site. In HTML5, there is a new function to optimize the speed of the website: link prefetch.

What is link prefetch? Explanation from MDN:

Link prefetch is a skill provided by the browser. The purpose is to let the browser download or pre read some document resources in its spare time, and users will access these resources in the future. A web page can set a series of preload instructions for the browser. When the browser loads the current page, it will quietly load the specified documents in the background and store them in the cache. When users access these preloaded documents, the browser can quickly extract them from the cache to users.

Simply put, let the browser pre load other resources (pages, pictures, videos, etc.) that users are likely to access after accessing the current page. And the method is super simple!

HTML5 link prefetch

Copy code

The code is as follows:

<!– Preload entire page — >
<link rel=”prefetch” href=” https://www.jb51.net/misc/3d-album/ ” /></p>
<link rel=”prefetch” href=” <a href=”https://www.jb51.net/wordpress/”>https://www.jb51.net/wordpress/</a>
wp-content/uploads/2014/04/b-334×193.jpg ” />

The link prefetch function of HTML5 page resources is realized through the link tag. Specify the rel attribute as “prefetch”, and specify the address of the resource to be loaded in the href attribute. Firefox also provides an additional attribute support:

Copy code

The code is as follows:

<link rel=”prefetch alternate stylesheet”
title=”Designed for Mozilla” href=”mozspecific.css” _fcksavedurl=””mozspecific.css”” />
<link rel=”next” href=”2.html” />

Prefetch can also be used under HTTPS protocol resources.

Under what circumstances should page resources be preloaded

What kind of resources to load in your page and when to load them all depend on you. Here are some suggestions:

1. When the page has services similar to slides, pre load / pre read the next 1-3 pages and the previous 1-3 pages.
2. Preload those images common to the whole website.
3. Preload the next page of search results on the website.

Disable link prefetch

There is an option in Firefox browser to disable any link prefetch function. You can set it as follows:

1.user_pref(“network.prefetch-next”, false);
2. Precautions for link prefetch

Here are some notes about link prefetch:

1. Link prefetch cannot work across domains, including pulling cookies across domains.
2. Link prefetch will pollute your website traffic statistics, because some users of the pages preloaded into the browser may not actually visit them.
3. Firefox has provided support for this link prefetch technology since 2003.

Using the browser’s free time to load some additional resource files seems to be both exciting and dangerous. Do you want to try these technologies?