Now you all knows mozilla has some good addon call "Firebug" you can install that plus you can also install ""Google page Speed " which will tell hows your application is behave . there is one more useful addon by yahoo is "YSlow" .
from this addons you will get lot of information , also try this
1. Load your CSS first and your JavaScript last
Load your css in <head > tag above your body . and try to load your javascript above the closing the body tag.
2. Using Sub domains for parallel downloads
This is like cool one , on your site that are lot many static and dynamic images , you can identify that what are the static and what are the dynamic and according to that you can set your sub domain which will useful for parallel download ,so the time requires to download a single image will be get converted into parallel server and parallel image get download from your one of the server .The ideal case is you can set max of 3 server for same,
3. Minify JS and CSS:
Again size get matter , means one your page if you keep unwanted space on js & css surly size get increase, in this case you can reduce that and make them as lighter as possible, if you use above tools they will give you option how to inimize this or minimize version of same.
4. Avoid redirects:
No matter if you do a server-side header redirect, JS,HTML redirect, your site is going to load a header with a blank page, then load your new page, increasing the time it takes for a user to get to the actual page they want to go to
5. Using CSS Sprites to reduce HTTP Requests
CSS Sprites may be the coolest thing, it get reduce your page loads and also reduce the amount of request for each particular images. now look at below you can see one image (static one) contain 15 + images now using CSS you can cut that according to your requirement (using Padding and all )
and use that as you want.
Best example you can see is " YouTube CSS Sprite ".
define that like this way:
< style >
.sprite {
background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}
#logo {
width:100px;
height:45px;
background-position:0 0;
}
</style >
<div id="logo" class="sprite"> </div>
That was a lot of stuff, but hopefully you picked up a few tips on how to make your web pages load faster. if you know more on this
add it on comments .
thx
ReplyDeletenice article
ReplyDeletenow a days its very essential