Make your website faster: Adding Javascript and CSS files at run time

If you want to load your website faster and have good ranking for your website in y-slow of similar tools please go through this tip.
I have discovered a technique for adding javascript and CSS files at run time, it has been checked in various ways and I am also giving the sample code to test.
All you need to is 10 mins which would be required to go through this tip and code snippet but at the end of it you would have known how to make a website faster and get it good y-slow ranking.
At the time of loading a website we need 20 to 30% or max 40% Javascript of the application while the rest 60 to 70% would be required later on. Same for CSS files too, only a smaller part of the code is essential during loading. But if we can implement a technique in which we can load the required Javascript
and CSS at the time of load of the page and add the rest Javascript or CSS files later if required – then we can meet our objective or making our website less bulky and much faster.
Broadly, there are three steps that we should be following :
1. We have to split javascript and CSS files to number of files depending or different functionality. 
2. Only add the required Javascript and CSS files to your webpage
3. Add required Javascript and CSS files after page load on run time.
How to add Javascript file

    var path    = “javascripts”
var script  = document.createElement( ‘script’ );
script.src  = path + ‘/js1.js’;
document.getElementsByTagName( ‘head’ )[0].appendChild(script)
Here “javascripts” is the path where we are keeping javascript file and the file name is “js1.js”  through appendChil;d on head we are adding the
required Js files to webpage head section
How to add CSS file  
   var path   = “css”;
var style   = document.createElement( ‘link’ );
style.rel   = ‘stylesheet’;
style.type  = ‘text/css’;
style.href  = path + ‘/style.css’;
document.getElementsByTagName( ‘head’ )[0].appendChild( style );
Here in the same way we are adding the CSS file to website on runtime.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<title>Abinash’s new Concept</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<script src=”javascripts/main.js”></script>
</head>
<body>
<input type=”button” name=”check1″ id=”check1″ value=”box1″ onClick=”showbox(‘box1’)”>
<input type=”button” name=”check2″ id=”check2″ value=”box2″  onClick=”showbox(‘box2’)”>

<div style=”display:none;” id=”box1″>
<input type=”button” onClick=”function1()” value=”Box1 function1() call in (js1.js) file”>
</div>
<div style=”display:none;” id=”box2″>
<input type=”button” onClick=”function2()” value=”Box2 function2() call in (js2.js) file”>
</div>
</body>
</html>

 
/*
Description : here i have taken two buttons ( name=”check1″  & name=”check2″ ) and two hidden divs ( id=”box1″ &  id=”box2″)onclick
of a button it will hide one and open one div , the div’s has some classes defined in style.css file each div’s has one one buttons and it has
some onclick event which we are keeping in js1.js and js2.js files – If you will think slightly we do not need the js1.js and js2.js files on load
If you see the page we only need the javascript onclick functions called  showbox(boxid) at page load
*/
Javascripts/main.js
var is_js1 = 0;
var is_js2 = 0;
var is_css1 = 0;
function showbox(id)
{
if(id == ‘box1’)
{

  //adding css
  if(is_css1 == 0)
{
var path  = “css”;
var style   = document.createElement( ‘link’ );
style.rel   = ‘stylesheet’;
style.type   = ‘text/css’;
style.href   = path + ‘/style.css’;
document.getElementsByTagName( ‘head’ )[0].appendChild( style );
is_css1 = 1;
}
document.getElementById(‘box2′).style.display=’none’;
document.getElementById(‘box1′).style.display=’block’;

  /***********Add JS**********/
  if(is_js1 == 0)
{
var path   = “javascripts”
var script   = document.createElement( ‘script’ );
 //style.rel   = ‘stylesheet’;
//style.type   = ‘text/css’;
   script.src   = path + ‘/js1.js’;
 //style.media  = ‘screen’;
   document.getElementsByTagName( ‘head’ )[0].appendChild( script );
is_js1 = 1;
}
}
else
{
 //adding css
  if(is_css1 == 0)
{
var path  = “css”;
var style   = document.createElement( ‘link’ );
style.rel   = ‘stylesheet’;
style.type   = ‘text/css’;
style.href   = path + ‘/style.css’;
document.getElementsByTagName( ‘head’ )[0].appendChild( style );
is_css1 = 1;
}
document.getElementById(‘box2′).style.display=’block’;
document.getElementById(‘box1′).style.display=’none’;
  /***********Add JS**********/
if(is_js2 == 0)
{
var path   = “javascripts”
var script   = document.createElement( ‘script’ );
//style.rel   = ‘stylesheet’;
//style.type   = ‘text/css’;
script.src   = path + ‘/js2.js’;
//style.media  = ‘screen’;
document.getElementsByTagName( ‘head’ )[0].appendChild( script );
is_js2 = 1;
}
}
}

/* [ Description on page load we need this function here we are hiding and showing divs but here we are also adding css and javascript files
I took 3 Gobal variables to check wheather a file already added or not, if added it will not add those files again to webpage ]
*/
javascripts/js1.js
 
function function1()
{
alert(“box1 function”);
}
 
/*[ Description : this is the js file holding the function for <input type=”button” onClick=”function1()” value=”Box1 function1() call in (js1.js) file”> in index.html]*/
 
Javascript/js2.js
 
function function2()
{
alert(“box2 function”);
}
 
/*[ Description : this is the js file holding the function for <input type=”button” onClick=”function2()” value=”Box2 function2() call in (js2.js) file”> in index.html]*/
 
css/style.css
 
.myclass
{
border:2px solid #CC6600;width:400px; height:40px;
}
.myclass2
{
width:400px; height:40px; border:3px solid green;
}
 
/* [ Description : In this file we are keeping the class of box1 and box2 of index.html ] */
***********************************************
End codes
***********************************************
 
Please create these files in your local or load existing one and open your firebug – open the head tag
you can see the main.js only added now click on the first button you can see the js1.js and style.css added to your head tag, it opens the div and div has the css class property and by clicking on the box1 button it is alerting   alert(“box1 function”); Repeat the process when you click the box2 button
 
The over all concept of mine is that we can add the css and javascript files on run time and can make websites faster and having good ranking
The good thing is that it is not requiesting the files to add, internally it is but in firebug it is not showing as a requiest 🙂
Advertisements

One comment on “Make your website faster: Adding Javascript and CSS files at run time

  1. This is really interesting, You’re a very skilled
    blogger. I have joined your feed and look forward to seeking more of
    your wonderful post. Also, I have shared
    your website in my social networks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s