Raheel Hussain

The Purpose of the AJAX (as also discussed by many writters and many websites) is to improve the user experience, as well as client centric operations and development. Instead of fetching the entire page contents, or displaying a completely new page, AJAX enables browsers to fetch and update/alter particular sections of page through the HTML, XML or through Javascript.

I launched my website all full with AJAX, though a very simple one, but it appeared to be very expensive in sense of it's loading time as well as data size.

I received couple of comments on my Guest Book as well as some of my collegues verbally told me of reducing the page load time, for atleast the home page.

Since then, I started doing my research on particularly reducing the page size and then in general, the appropriate combination of AJAX.

Consider the following general Scenario for your website size and images : -

• Bigger than 60k in size : Your visitors will be unlikely to wait around and see your homepage.
• 50k to 60k : You visitors may see your first page, but may wary to wait and see second page.
• 40k to 50k : Better, but you may still loose visitors.
• 30k to 40k : Absolute, largest and serious sites would be.
• 20k to 30k : Responsive, and likely to get second visit.
• 10k to 20k : Very responsive and a pleasure for your visitors.

Obvisouly!  my website had gone above 500k and it was Huge difference, and to make it shorter upto the mark, lots of changes were required.

Since the HomePage of your web-site is considered as a Gateway, that would lead you to the ( text and graphics based ) content. If the HomePage is very heavy just like what I have at http://www.raheelhussain.com/ , it is possible that the Search Engine Spider that might want to index your HomePage and entire site, might skip you (I mean your website) if it gets Timed Out while loading your page.

The page size of your HomePage for such a case (recommended by many experience webmasters) should be less than 125k.

While analysing my website, I found of couple of more things :

• A huge amount of ViewState - Hidden Data 
  Due to AJAX implementation, the View State gets increased, unless we explicitly disable it on all occurances except wherever required.

• Script Source Files with AJAX may increase your page size
  When you use AJAX in your site, it includes lots of Script Sources files in the page sources, to support the functionalities like as follows :
  
  <script src="/ScriptResource.axd?d=e0Z5w1xlI94kfI-ca3Wnd_wh0&amp;t=633309435532426250" type="text/javascript"></script>
  
  You will find a big number of References to such files... the more you use different AJAX functionalities on to the site.
  So the recommendation is that you may use very less AJAX functionality on the HomePage at least.

• Too many External Http Objects references.
  To further explain this, each reference to an external file is refered as an external HTTP Object, You may take the example of http://www.google.ae/ or
  http://www.yahoo.com/ as these sites are with very less references to external object and are really fast loading.
  
  To demonstrate this, I went to http://www.websiteoptimization.com/services/analyze/ which is a free tool to analyze your site.
  I did that for http://www.yahoo.com/ ,  http://www.google.ae/ and finally for my website http://www.raheelhussain.com/ for comparision.
  
  Though the site for http://www.asp.net/ is also heavy, but my website (being very simple) was more havier than it.
  
  You when you do it, you'll see the external object references, listed in a separate table.
  
  
  
  Above is for http://www.yahoo.com/ and http://www.google.ae/  is even better with less load time.

• Image sizes 
  Offcourse the image sizes need to be lesser unless there's really a need to put a bigger image file on the homepage. 

• And the Important One - The GuestBook 
  Since the Guestbook consumes/implements most of the AJAX functionalitiy. The conclusion to this is, that unless you do not have a requirement, keep all the
  functionality in the inside pages, rather than keeping it on the Homepage.  

Working out further, I gathered following Tips and Tricks to make a website, or at least the home page efficient and fast loading.

• Fewer external Objects, means try to group them maximum into one combined, rather than many.

• Turn on HTTP keepalives for external objects. Otherwise you add an extra round-trip to do another TCP three-way handshake for every HTTP request. If you are worried about hitting global server connection limits, set the keepalive timeout to something short, like 5-10 seconds. Also look into serving your static content from a different webserver than your dynamic content. Having thousands of connections open to a stripped down static file webserver can happen in like 10 megs of RAM total, whereas your main webserver might easily eat 10 megs of RAM per connection.

• If your users regularly load a dozen or more uncached or uncacheable objects per page, consider evenly spreading those objects over four hostnames. This usually means your users can have 4x as many outstanding connections to you. Without HTTP pipelining, this results in their average request latency dropping to about 1/4 of what it was before.

• Minimize HTTP response size by enabling gzip compression for HTML and XML for browsers that support it. For example, the 17k document you are reading takes 90ms of the full downstream bandwidth of a user on 1.5Mbit DSL. Or it will take 37ms when compressed to 6.8k. That's 53ms off of the full page load time for a simple change. If your HTML is bigger and more redundant, you'll see an even greater improvement.

I've implemented most of the changes on my website but it is yet to go live again.
Possibly by the end of this month.

Regards - raheel Hussain

References :
http://www.websiteoptimization.com/services/analyze/wso.php
http://www.websiteoptimization.com/services/analyze/