Learn Performance - Prefetch and Prerender
Prefetch resources
Prefetching resources can improve the user experience as the user does not
need to wait for resources to be fetched. This page contains a date picker
that requires
jquery.js,
jquery-ui.js
and
jquery-ui.css
to be downloaded before it can be rendered. These resources are not required for the page to render and are deferred to
when the user interacts with the datepicker. Adding link rel="prefetch" informs the browser to download them once idle.
If you observe the network tab, you should notice that the resources required to render the datepicker are prefetched after the page has downloaded the critical resources required to render the page. These are assigned the Lowest network priority. When the resources are eventually needed, they are fetched from the prefetch cache.
In the network panel above, the prefetched resources
jquery.js,
jquery-ui.js
and
jquery-ui.css
are downloaded with the
Lowest
network priority before being fetched instantly from prefetch cache.
View Source Code
<link rel="prefetch" as="script" href="../jquery.js" />
<link rel="prefetch" as="script" href="../jquery-ui.js" />
<link rel="prefetch" as="style" href="../jquery-ui.css" />