Saturday, August 13, 2016

Enhance website performance by resource prefetching


Resource Prefetching is a type of performance enhancing technique, this is implemented by using resource hints. Resource hints is a way to tell the browser about a resource that might be needed in future requests.


Resource hints are declared as HTML Link Element (<link>) :

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

Tells browser to initiate an early connection (DNS lookup) with the host which might be needed in future requests, this eliminates the time taken by browser in resolving the domain for the future requests.

Browser support

preconnect
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

Tells browser to initiate an early connection with the host, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, this prepares browser in advance and can deliver the assets from that host faster, masking the high latency costs of establishing a connection.

Browser support

prefetch
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

Tells browser to fetch a resource that might be required by the next navigation (browser will not execute any prefetched file) so that it can be delivered faster when needed.

Browser support

prerender
<link rel="prerender" href="//example.com/next-page.html">

Tells browser to fetch and execute a resource that might be required by the next navigation so that it can be delivered faster when needed.

Browser support


Reference: https://www.w3.org/TR/resource-hints/

Related Posts Plugin for WordPress, Blogger...

Receive all updates via Facebook. Just Click the Like Button Below

You can also receive Free Email Updates: