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.

Abinash's new Concept




 
 
 
 
  
 
 
  
 


 
/*
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  in index.html]*/
 
Javascript/js2.js
 
function function2()
{
  alert("box2 function");
}
 
/*[ Description : this is the js file holding the function for  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