When we open the website it loads mainly three things from the server to client (browser), HTML code, Javascript code and CSS code. So, how much time our site gonna take to load into browser mainly depends on the your broadband speed and the size of the two of these things (CSS and Javascript code). However we are living in 21st century and this century is not for those slow 56 Kbps modem..right? :)
So, how can se reduce the load time of the website? Of course, we can reduce the size of these things.
But, how we can we reduce the load size of our javascript file and CSS file?
Separation of files:-
Yes, you can make separate files for separate pages and load them dynamically. I've seen that some programmers start their coding with making mainly two files: suppose they are functions.js and style.css. And during the development of the site the size of these files increases accordingly the functionality and designs in the sites. Sometimes it reaches in 100 of KBs. If your both files reach above 100 of KBs then what will be the size of these two files? Above 200 KBs. And you know that it will take obviously some seconds to download only of your these 2 files.
Of course our browser will download them only once and then it will keep it in cache. But imagine what will be the load time of first page of your site. It will really give bad impression to your visitor.
So what is the solution?
The simple solution is that, make a common file which will load on every page and this file will contain the common code which you may need throughout the site. And one file for each page separately which will contain the code which you need only on that page.
E.g. one file is common.js and the other one for that page (like homepage.js for homepage).
One file is common.css and the other one for that page (like homepage.css for homepage).
It will reduce the size of these files.
If you use some framework which provides the functionality to include separate files in <head> tags of separate pages then you can do it easily. In other case you have to load these files dynamically.
You can create an autoload function and can pass the file name in that function and that function will load your second file (which is not common file) at runtime. Of course you can include your common file in your <head> tag of header. There is no need to load common file through dynamic loading.
You can include following function in your common.js fie:
function loadfile(filename, filetype){
if (filetype=="js"){
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
Now you can call this function to load the js or css file dynamically:
loadjscssfile("homepage.js", "js")
loadjscssfile("homepages.css", "css")
Write less text:-
I've seen that some programmers gives very big names to their js functions to express their functionality. Its ok for those files which process at server side, but this practice will increase the size of file. So, try to name them shortly and try to name your variable short also. It will automatically reduce the size of your javascript file. You can use jQuery to reduce the code size because its motto is "Write Less Do More" :)
Do not put long comments:-
Writing comments is a good practice but javascript file and CSS file download to browser to execute it so try to reduce the size of comments. It will definitely help to reduce the size.
And if you minify your files after applying above things than it will definitely help to reduce the load time of your website.
That's all for now...will come back with new tips.
Till then...Bye bye :)
Lalit
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment