Geek Answers Handbook

Prefetching an Image Using the <link> Tag

I saw sites using a tag to upload images, for example:

<link href='images.jpg' rel='somthing' type='something'>

What relevance does this have in website design? What aspect of the website helps to optimize (I think that it is used for optimization. It is true if I am mistaken). Can someone explain this to me?

+6
source share
2 answers

Some people use this to prefetch image / css / page. You can read about it here.

Basically, as soon as the page is completed, the browser will see these link tags, and if the rel attribute is "next" or "prefetch", then the browser will start loading everything that the href attribute indicates, and store it in the cache so that it loads very quickly if the user clicks on it.

This method can be used for prefetching, including images, style sheets, various web pages, etc. As long as the URL used in <link> matches the URL used to load the resource normally, it will load this resource from the cache.

For example, if your page had this link <a href="page2.html">Page 2</a> and you wanted to pre-select it, add it to your page <link rel="next" href="page2.html"> .

Finally, this prefetch method is preferable to javascript methods, because this type of prefetch is standards-compliant, handled by the browser, and can be disabled by the user if they have acceptable bandwidth or other connection restrictions.

+7
source

During page loading, blocking scripts may be interrupted, causing other scripts to wait. rel=preload in the link element becomes a declarative extraction primitive that initiates an early selection and separates the selection from the execution of the resource.

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

<link rel="preload" href="/assets/font.woff2" as="font">

<link rel="preload" href="/img/header.png" as="image">

ref. https://w3c.imtqy.com/preload/

note that preload is preliminary

+5
source

More articles:


All Articles