HTM5 prefetch and prerendering

webapi
tomoyukikashiro
tomoyukikashiro

Prefetch for DNS

resolve DNS when browser is idled.

<link rel="dns-prefetch" href="http://www.example.com">

You can also control(opt in / our) prefetch by using meta tag

meta tag

<meta http-equiv="x-dns-prefetch-control" content="on">

Prefetch contents or page

preload contents when current page is loaded fully.

###content

<link rel="prefetch" href="http://www.example.com/hoge.png">

page

<link rel="prefetch" href="http://www.example.com/">

Prefetch content (high priority)

This is supported in Google Chrome.

<link rel="subresource" href="jquery.js">

Chronium project says that

“LINK rel=subresource” provides a new link relation type with different semantics from LINK rel=prefetch. While rel=prefetch provides a low-priority download of resources to be used on subsequent pages, rel=subresource enables early loading of resources within the current page. Because the resource is intended for use within the current page, it must be loaded at high priority in order to be useful.

Prerender page

Currently prerendering tag is only supported in Google Chrome.
suppecification

<link rel="prerender" href="http://www.example.com/">

Notice

Prerendering may make your site slowly. so you had better define height relative page ( e.g. next page).

Reference