SEO for Ajax - Takling the Javascript First - Part 3

In this part, we will look into the main building blocks of Ajax and how to optimize them for Search Engine Optimization one by one. In fact, I will not get into details of the working of Ajax itself as it is beyond the scope of this writing. I will try to avoid going too much technical here, rather a simple and clean approach will be used to convey the concept and underlying impacts accordingly. After reading this “SEO for Ajax – part 3”, I hope it would become easier for an SEO expert to implement the items with the coordination of his development team members and architects. 

JAVASCRIPT OPTIMIZATION

There is a good amount of use of Javascript in Ajax, you should focus on improving your use of JavaScript to reduce your download footprint. Authors of such javascript libraries do understand the JavaScript bloat problem. They present their code in a standard, completely commented and maintainable version as well as in a minified version. You should have an understanding of minification and how it works. It is possible that there will be code outside your library that will require to be compressed as well.

REMOVE JAVASCRIPT COMMENTS

You can safely get rid of all JavaScript comments that serves no purpose. As these add extra bytes to the code, so eliminate them from your code to reduce the overall size. These are indicated by // or /* */. They also offer no value to the end user and just add to file size. You also need to know the conditional commenting system of IE browser that is frequently used with “includes” or Cascading Style Sheets (CSS). You should not remove these conditional comments from your code because you may otherwise unintentionally break your Javascript. Fortunately, many advance tools for page optimization know this criterion, and will not flag that up. 

STRING CONSTANT MACROS – A GOOD APPROACH

If you find in your code that their are repeating occurrences of strings or a complete strings over and over again, you can substitute a simple string macro using a global variable remapping can reduce a number of bytes. For example, if you have a number of alert( ) invocations in your program, like this:
alert("Record has been saved successfully");
you could set a global variable, like this:
message=" Record has been saved successfully ";
to serve as a string constant and then replace the recurring strings in the various calls as follows:
alert(message);
You can even show some extended messages based on the original macro as:
alert(message +": Please create a new record now");
There is one care with this technique. It is necessary that you make sure the string is used very often so that macro makes sense

WHAT YOU NEED TO DO WITH WHITESPACES

JavaScript ignores the white spaces so you can easily decrease the whitespace between operators. For example, instead of writing this:
var str = "Row number " +
x +
" has invalid date";

you can write this:

var str=" Row number "+x+" has invalid date";

Be careful when condensing, however. JavaScript treats line breaks as implicit semicolons.
If you do not finish lines with semicolons, you may find yourself in trouble and your code can mess up. For example, the following well formed JavaScript uses implied semicolons:
a=a+1
b=b+1
A simple whitespace remover tool might produce this:
a=a+1b=b+1
This code will throw an error. But if you add in the needed semicolons, the code will work:
x=x+1;y=y+1;

AVOID CONSTRUCTS - LITTLE REDUCTION IN SIZE

In many conditions, you can get rid of code and syntax constructs without hurting the
code. For example, given chunk of if statements and several loops that contain only a 
single statement, you can remove the braces, so this:

if (isActive)
{
alert("You card is Active");
}

becomes this:

if (isActive)
alert("You card is Active");

As another size reduction example, you also can eliminate a return statement with no
argument just before the end of a function. So, this:

function doProcess( )
{
/* code here*/
return;
}

becomes this:

function doProcess ( )
{
/* code here */
}
There are also some good tools available out there that you can employ for byte saving tricks to tune code, but generally this tool is recommended for such things. http://www.w3compiler.com. All above techniques may only save a small portion of the total file size but every byte counts from SEO perspective. In fact, Google will consider loading time and fast response from server a major SEO factor to be considered in search result for year 2010. So never ignore anything which is helpful in reducing the file size on the client machine. 

XML VS JSON – CHOICE IS YOURS

Ajax requests may be tiny as compared to the conventional full post backs, but there definitely are differences with various data formats used with Ajax itself, particularly if you consider the included content vs. the structural markup. For example, consider that when a request is made with simple list of comma separated values, any returned data will be pretty concise:
value1,value2,value3,...value N
If you encoded the same data in XML, it would be much heavier:

<?xml version="1.0" encoding="UTF-8" ?>
<docElement>
<package>Value 1</ package >
< package >Value 2</package>
...
< package >Value N</ package >
</docElement>

In the case of an Ajax based application, the data sent and consumed is often very small and is textual in nature, so it can be HTTP compressed plainly for transmission. XML primarily considered the fundamental part of AJAX is not considered a very good option from one school of developers and they are quite right in making that opinion. First, XML is bulky as compared to other lighter formats. Second, there is the too much DOM code that is required to deal with parsing out the response. Finally, because browsers generally are not behaving as validating XML parsers but instead focus only on well formedness, the semantic value of XML is rather wasted. As a replacement to XML, many Ajax developers favor to use JSON, available at http://www.json.org. JSON is a lightweight data exchange format that is based on a subset of the Javascript. Because it is a subset of Javascript, we can simply convert a JSON response into something that the receiving script can manipulate directly.

For instance, we may return as below, which is a valid JSON array:
["item1","item2","item3","item4"]

Or we may return a JSON object such as:
{"Status": "Active", "Amount" : "$5000" , "Expire" : "15/05/2010" }

If this were found in the responseText property of an XmlHttpRequest object, we might speedily make it accessible for use by means of below mentioned code:
var output = eval(xhr.responseText);

Now you would be able to reference the individual values in the output object as:
var str = "Status of card is " + output.Status + " and transaction amount is "+ output.Amount + ", Card will Expire on " + output.Expire;

OK, that’s enough for now, take a long breath and get ready for 4th and Final Part of this SEO for Ajax series
source http://ezlat-seo.blogspot. com.