Menu
I remember reading about a meta tag that makes the browser preload a page. What's the tag again?
205
In the header you have to add <link rel="preconnect" href="https://example.com/"> Prefetch downloads the resource and stores it in the browser cache to use it later. You can do <link rel="prefetch" href="imgs/image.
In Google Chrome right click anywhere on the page and click on inspect element, this will bring up the developer tools. Right click on the body element and add a new attribute class="loaded" . Hit enter and you'll see our preloader screen disappear.
The preload attribute specifies if and how the author thinks that the media file should be loaded when the page loads. The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience.
To preload responsive images, new attributes were recently added to the <link> element: imagesrcset and imagesizes . They are used with <link rel="preload"> and match the srcset and sizes syntax used in <img> element.
Prefetching is included in a W3C spec under the name Resource Hints. It is implemented in Firefox, Chrome, IE 11, Edge, Opera after 12.1, and the Android Browser from 4.4.4, see the caniuse prefetch page for more and up-to-date details.
Also see the caniuse and spec pages for related technologies (supported browsers afterwards are retrieved from caniuse and up-to-date as of September 2015):
IE 9 implemented DNS prefetching only but called it "prefetch" (caution!). Chrome for a while (at least as far as 2013) only did prerendering and DNS prefetching. IE11 implements lazyload, for images; Microsoft has tried to get it in the spec but so far it isn't. iCab is stated to have been the first browser to implement prefetching, although this behaviour was automatic, not controlled by the markup.
The Mozilla Application Suite, and later, Firefox, implement the spec (the spec is actually based on Mozilla's early implementation of prefetching, which was somewhat based on the Link: header specified in RFC 2068 which has now been superseeded by RFC 2616 [which does not reference the Link: header]. See this old version of the docs (🕔) for more detail.) As per the documentation on MDN (🕔):
Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future.
The browser looks for either an HTML
<link>or an HTTPLink:header with a relation type of eithernextorprefetch.
So the syntax is:
<link rel="prefetch" href="/path/to/prefetch" /> You can also use the Link: HTTP header:
Link: </page/to/prefetch>; rel=prefetch Or a <meta> to simulate that same HTTP header:
<meta http-equiv="Link" content="</page/to/prefetch>; rel=prefetch"> Note that the next relation can also be used, but its main function is to indicate the "next" page in the navigation, so you should not use it for resources or unrelated information. Prefetching is also performed on HTTPS connections.
iCab seems to (🕔) have implemented an early prefetching around 2001. iCab apparently prefetched all links to content pages (not resources), not following any hint the developer would have left in the markup.
136
Some user agents may choose to preload when this is present, but you can't bet on it.
<link rel="next" href="http://www.example.com/link-reference"> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
