Speeding up the web
A quick look at four HTML5 tags which can speed up websites and web applications.
Google Chrome and other modern browsers are working hard to make the web faster and in doing so they've added some additional features of HTML5 that us web designers and web developers can utilise to make our websites and web applications faster.
It's likely you have already seen one such feature in action, that of pre-rendering. Google Search introduced this in 2011, to pre-render the web pages of top search results, so when users click on the search result the web page loads almost instantly as it's already been pre-rendered as a background task.
All of the tags shown below should be placed in the HTML document's <head>.
DNS Prefetch
<link rel="dns-prefetch" href="domain.com">This tag, placed in the <head>, pre-resolves a domain's DNS, thereby speeding up subsequent requests to the domain as DNS resolution has already occurred and therefore been cached. This is useful on occasions when a link is going to be clicked or a crucial resource is going to be loaded from a different domain later in the page.
Subresources
<link rel="subresource" href="widget.js">This tag, again placed in the <head>, instructs the browser to immediately fetch the resource for the current page. Unlike a prefetch this is a high priority request as a subresource is intended to be used within the current page rather than a subsequent one.
Prefetch
<link rel="prefetch" href="checkout.html">
<link rel="prefetch" href="widget.css">This is a low priority "hint" to the browser instructing it to load the resource as a background task, with the intention that the resource will be used/navigated to in the future.
Prerender
<link rel="prerender" href="checkout.html">This tag initiates a background task to pre-render the entire page along with all its assets. This is the technique that Google Search uses to allow almost instant navigation to top ranking websites within their search results pages.
