Posted on

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/

Posted on

Pageload optimization using jQuery CDN

First thing first : What is CDN?

A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet.



What it does?

The goal of a CDN is to serve content to end-users with high availability and high performance.
A CDN caches static resources in distributed servers across a region or worldwide, thereby bringing resources closer to users and reducing round trip time.

Main problem a CDN solve is latency. The amount of time it takes for the host server to receive, process, and deliver on a request for a page resource (images, CSS files, etc.). Latency depends largely on how far away the user is from the server, and it’s compounded by the number of resources a web page contains.

Lets come to the topic : Which are the popular jQuery CDN?

There are 3 popular jQuery CDNs.
1. Google.

<script type=”text/javascript”    src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”>
</script>

2. Microsoft

<script type=”text/javascript”
    src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js”>
</script>

3. jQuery.

<script type=”text/javascript”
    src=”http://code.jquery.com/jquery-1.9.1.min.js”>
</script>

How it optimize the page load?

It reduces the load from your server.
It saves bandwidth. jQuery framework will load faster from these CDN.
The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN.

How to load jQuery locally when CDN fails?

Given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript”>
if (typeof jQuery == ‘undefined’)
{
  document.write(unescape(“%3Cscript src=’Scripts/jquery.1.9.1.min.js’ type=’text/javascript’%3E%3C/script%3E”));
}
</script>

It first loads the jQuery from Google CDN and then check the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. In this example, the jQuery.js is loaded from Scripts folder.