reducing web page load time

these days , owrking on my project…my webpages are getting very fat withthe inclusion of custom java script code for ajax and validation. To achieve user-experience, im loosing on web page load time. Its taking a while for the page to load. This certainly is making a sectoe the users frustrated and possibly quit d site. So i was wandering a way to come out of this. This is waht ive realized:

1) Place only the very important css and js in the HEAD part. i.e only that css and js thats required 4 d rendering/layout of the page shall be included in the HEAD part. The rest shall go just before the </BODY> tag. This ensures that, the extra script and css which may be useful while validation/ajax stuff be loaded after the contents of the page gets loaded. This ensures that the page gets visible first…making the user not wait 4 a long time…and then get the other css and js.

2) Minify the js. This step involves requires that, u eliminate the extra spaces, comments, tabs in ur js code….thus reducing its size….so that it will take less time 4 d browser to load. The tool i use for this is JSMIN.

3) Also ensure that the number of css and script files are less. The number the number of script/css, the more the number of http requests it takes to access them. So it takes more time to load. So the best way is that..u put all the related js code in possibly one js file and similarly all the rtelated css in one css file. U can go for more if u feel that….its necessary to maintain d hierarchy. Thus, it takes less number of requests to load them.

These are the very basic steps to reduce the page load time. There are still 8+ techniques. The one i refer is yahoo’s suggestions. There a plenty more…Just say “web page performace” in any search-engine…..yuo’ll be flodded wid lnik dying 2 help u.

Hope this pages helps u. Happy webpages.

gravatar – spicing my off_code time

Working like a bulley these days, my boss gave me 2 days off from coding, so that i can regroup and resume with full force. I was wandering all over the web these 2days……..1st day was kinda drowzy. The second day today………it got lighten up when i found GRAVATAR. 

The idea behind it is very simple. Its to assign a universal PIC/Image to a user(identified by email address) and display this pic in all the websites which implement GRAVATAR.

Supposing, i register my email with gravatar and upload a pic for it. Now, if a site implements GRAVATAR and if im also liked with that site( say registered), then my pic uploaded in gravatar can be available to that site.

Supposing i wrote some comments in that site, along with name + body of the comment, the site can also display my pic. 

So, which ever site implements GRAVATR, if i have my foot print in dat site(say registerd, commented….what ever), then that site display my pic from GRAVATAR along with my name

The cool things are :

1) The implementor site doesnot have to spend space on saving my image. Its GRAVATARS headache.

2) People can recognize my comments looking at my pic…So when GRAVATAR goes big…number of sites implement this…….then every where i’ll be recognized with this pic. So no matter even if i have a diff user_name, i dont have 2 worry…..people can recognize me.

3) From the developers point of views (us), its quite simple…asa….counting 123., trust me .

I wnna implement this in my product asap…infact right away…..though im off-coding……i can resist the temptation. Lemme break the rule. 

The way the implementor website can get the pic is 2 simple steps:

a) The image url shud start with “http://www.gravatar.com/avatar/”

b)  a) + The MD5 encoded string of the LOWED_CASED email address.

How to generate the MS5 string depends on the programming lang (server side) u follow:

Better follow this link : GRAVATAR URL GENERATION

By the way, i used ruby rails for this……u can use any of the php/.net/……the list never ends

Hope u got it working………….If any buzz’s do comment here….i’ld luv 2 respond !

dynamic loading javascript and css.

Offlate….im enjoying my run thru web-development….once i started using AJAX. When i started 2 feel the spirit of AJAX…..i realized that…its taking too long a time to load the AJAX page. The reason……when the page is loading…it also loads the required JAVASCRIPT FILES entirely.

My page has a lot of AJAX functionality……theres no guarantee that the user is gonna use all of those functionalities. So, in that case……loading of all the javascript is not justified.  Then the question rises……is there a way where the javascript is loaded on demand…i.e Only when an ajax functionality is called….load the javascript required . Else, forget it.

Then, I thought……..NO WAY….But asusual……i found it as POSSIBLE.

This is called dynamic loading of JAVASCRRIPT. This is no different from creating an ELEMENT in HTML dynamically.  To create a TEXT INPUT ( <INPUT TYPE=”TEXT” name=”txt” /> ) dynamically….the code is follows:

var textInput  = document.createElement(“INPUT”);

textInput.setAttribute(“type”,”TEXT”);

textInput.setAttribute(“name”,”txt”);

Now, to add this element to a DIV whose id is say…div_id, we say:

document.getElementById(‘div_id’).appendChild(textInput).

So, following the same…..

to add a script, the HTML tag we use is <SCRIPT TYPE=”TEXT/JAVSCRIPT” src=”script.js” />.

Now to add this dynamically:

var fileRef = document.createElement(’script’);
fileRef.setAttribute(“type”,”text/javascript”);
fileRef.setAttribute(“src”,”script.js”);
document.getElementsByTagName(“HEAD”)[0].appendChild(fileRef)

What we are doing here is that: create an element, assign its to type=”text/javascript” , src=the script we wanna load. And add it to the HEAD element of HTML.

Thats it. …As simple ad that…Go ahead and make ur AJAX pages light weighted…….As im making my HTML PAGES very……lightweighted.

Also, u can also load CSS dynamically.

Also, also, also……U van remove the javascript and css dynamically. I dont think i have to explain why would one have to remove them. Its quite straight forward.

Reference

Satya — EVENTZS