iBlognet

Home SEO

Speed Up Your Website: JavaScript Optimization

by Editor

Javascript OptimizationIn my previous post I have showed you the different ways to optimize your website CSS coding. Today in this post I will show you, how can you optimize your JavaScript code for your website in the basic and extreme way. The best kind of speed optimization is more efficient algorithm design. With most programming languages, you can trade space for time complexity and vice versa. But on the web, JavaScript must be downloaded. Unlike desktop applications where you can trade another kilobyte or two for speed, with JavaScript you have to balance execution speed versus file size. Let’s get started with the basic way…

Basic Way.
JavaScript are usually placed in between the HEAD section of a page, which is usually not preferred in SEO. Because it pushes all your keywords and phrases further down the page. This will indirectly affect your search rankings and the number of keywords that search engine spiders use it for indexing. Further if you are directly inserting pure JavaScript code in the HTML file, this will increase the load time and http server request for the website.
The main reason to link JavaScript file as an external file to HTML because it reduce the server load and website loading time. The file is cached by the browser itself when you visit the website for first time. As you refresh the page, whenever the JS execution is needed, it loads directly from the browser cache, reducing site load.
First of all if you have pure JS code installed, link it as an external file to HTML as shown for CSS Optimization. Don’t forget to remove those white spaces and comments to reduce the file size.
Example:
<SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.yoursite.com/file-name.js”>
</SCRIPT>

Replace file-name.js with your JS link
After linking to it simply add it between the body the html end tags like shown below
</body>
<SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.yoursite.com/file-name1.js”>
</SCRIPT>
<SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.yoursite.com/file-name2.js”>
</SCRIPT>
:
:
:
</html>
Replace file-name.js with your JS link
Extreme Way. [If you are not an expert, don’t go for this steps]
In this step the JavaScript should be a pure JS.
1. Limit Loops
Before
with (Math) {


for (var i=0;i<round(staticNum*(PI/12));i++)
{
testVar+=(2*log(6)) + (x/2);
}


}
The calculations inside the loop and in the condition get evaluated every time through the loop, even though they don’t change. For loops with high counts, complex calculations can really slow things down. These expressions should be removed and placed in variables:
After
with (Math) {


var tester = round(staticNum*(PI/12));
var valChange = (2*log(6)) + (x/2);


}
for (var i=0;i<tester;i++)
{
testVar+=valChange;
}
2. Minimize Repeated Expressions
If you constantly use an expression in your code, you should place it in a variable so that it only has to be evaluated once.
Before:
bottomLayerWidth = 5 * ((layerWidth/2)*(.5*layerHeight));
topLayerWidth = 2 * ((layerWidth/2)*(.5*layerHeight));
textLayerWidth = (4 + bottomLayerWidth) * ((layerWidth/2)*(.5*layerHeight));
statusLayerWidth = (2 + topLayerWidth) * ((layerWidth/2)*(.5*layerHeight));
After:
var changeVal = ((layerWidth/2)*(.5*layerHeight));
bottomLayerWidth = 5 * changeVal;
topLayerWidth = 2 * changeVal;
textLayerWidth = (4 + bottomLayerWidth) * changeVal;
statusLayerWidth = (2 + topLayerWidth) * changeVal;
3. If-Then-Else Structure
If you have a series of If-Then-Else statements, you should try your best to organize them from most likely to least likely.
4. Maximize object speed and minimize scope chain
Before:
var url=location.href;
or this
url=location;
After:
var url=window.location.href;
5. Avoid unnecessary DOM objects
Before:
house=new Object();
house.howold=”brand new”;
house.color=”red”;
house.rooms=3;
house.doors=4;
house.bathrooms=2;
After:
house={
howold: “brand new”,
color: “red”,
rooms: 3,
doors: 4,
bathrooms: 2
}
6. Caching
Before:
var d=17;
var n=100;
var x=0;
for (var i=0;i<n;i++)
{x=x+Math.sin(d)*10;}
After:
var d=17;
var n=100;
var x=0;
var m=Math.sin(d)*10;
for (var i=0;i<n;i++)
{x+=m;}
These are some of the tips to optimize your JavaScript. If you are an expert you can go further with more optimization. Hope that the above tips may have helped you in some way. In my next post I will show you how to optimize your website images.

Article by »


Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.


Author Connect »

1 kafreena

Thanks Sahil, While checking my website Speed I came across images because they takes lots of time to load. Might be my images have more size. I’ll also apply your method to optimize JavaScript.

Comments on this entry are closed.

Previous post:

Next post: