Pre-fetching gives the browser the ability to know what resources will need to be downloaded right away or in the future.
Contents
- DNS prefetching
- Resources
DNS prefetching
Useful if assets are going to be downloaded from an external URL (other than hosted domain). For example, if fonts are going to be loaded from CDN, the DNS prefetching hint can tell the browser to start a connection to that location.
This will save time later as the browser will not have to re-negotiate with the DNS each time it needs resources from the external site.
The following example shows how to implement DNS prefetching:
<link rel="dns-prefetch" href="//fonts.example.com">
Note that the value of the href property does not include http or https as the example is showing that the connection could be made to either secure or non-secure locations.
Resources
Assets or resources that are 100% going to be used by the site can be prefetched by the browser. These resources, when tagged, will be preloaded by the browser, when it can, and placed inside the cache to be used later. Once the page has loaded, that asset will be available in cache, so the browser will not have to make a request out.
One potential benefit that is being discussed with this technique is saving resources from blocking the rendering process, such as fonts. If they are preloaded, they will already be available and therefore can be applied immediately after the HTML and CSS are parsed.
The example below shows how to tag an asset to be prefetched:
<link rel="prefetch" href="asset.png">