SYS-CON Media
 Register Now!
Save $200
Register before October 17th to SAVE! ... and also receive a FREE copy of the Best-Selling AJAX Book, a $119 Value!
Untitled Document
2008 East
Platinum Sponsor
Untitled Document
2008 East Gold Sponsors
Untitled Document
2008 East Exhibitors
Untitled Document
2008 East Media Sponsors
Untitled Document
2008 Association Sponsor
SYS-CON Media
2007 West Sponsors
Goingtomeet.com Conference Directory
SYS-CON Media
2007 East Sponsors
Untitled Document
2008 SYS-CON Events

Can't Miss RSS Feed
Subscribe to the AJAXWorld.com RSS Feed & Get All The Conference News As It Happens!

2008: Decision Year for RIAs - October 20-22, 2008 San Jose


AJAX Best Practices
Reduce and aggregate similar XHR calls

My mobile contract is expiring soon, so I went online and checked the different mobile companies for their offerings. All of these sites have a page where you get an overview of all the different phone models available. One one page I noticed that the list of phones started with an empty grid – and then – slowly – images appeared and after that some overlay information on the phone itself was added (such as a link on the facebook, msn or skype page of the phone manufacturer). From a time perspective it took about 2 seconds till I saw something on the page, after 4 got to see the empty grid and after 15 seconds everything was loaded. That made me curious about the internals of that page.

Analyzing a Heavy AJAX Page
I start by using dynaTrace AJAX Edition and browse to the same page (I use the latest Beta build for my analysis). When I am done I go back to the AJAX Edition and open the Performance Report. The first thing I do is check the timeline which gives me an overview of all activities on the page from when I entered the URL until it was fully loaded. The following image shows the timeline of this page:

Timeline shows some initial XHR calls and many XHR calls triggered by the onLoad event handler

Timeline shows some initial XHR calls and many XHR calls triggered by the onLoad event handler

If I move the mouse over the small icons in the events row I can see that there are many XHR calls triggered at the onLoad event. That makes me move over to the JavaScript/AJAX Tab in the Performance report. It tells me that there are a total of 50 XHR calls on that page:

3 Initial XHR calls followed by one XHR call for every product on the page

3 Initial XHR calls followed by one XHR call for every product on the page

Analyzing the XHR Calls

Right away I assume that the number of XHR calls is somewhat related with the number of phones that are displayed on the site. First however I look at the XHR calls that are made in the very beginning. A double click on the first XHR icon in the timeline opens the JavaScript that triggered these XHR calls and also shows me the list of individual XHR calls that were made at that point in time:

3 XHR calls are initially called to retrieve customer, shopping cart and product information

3 XHR calls are initially called to retrieve customer, shopping cart and product information

All 3 XHR calls return JSON objects where the third call – to retrieve product information – returns an array of 47 products including product name, price information and a product id:

First part of the XHR Response containing a JSON Array with product informations

First part of the XHR Response containing a JSON Array with product information

If we drill into the actual JavaScript PurePath we soon find the 47 XHR calls that are made – one for each product – to retrieve additional information:

The for loop is used to make an XHR call for every product to retrieve more product information

The for loop is used to make an XHR call for every product to retrieve more product information

We can see that every handler in the for each loop takes longer to execute and that most of the time spent in each of these loop iterations is waiting for the XHR Request to come back with another JSON object that holds some additional product information. Why this is taking longer with every call? A look at the Network View shows us what the problem is:

All requests (XHR + Image requests) are sent to the same domain and therefore have to wait to be served

All requests (XHR + Image requests) are sent to the same domain and therefore have to wait to be served

The increasing time component is the wait time for every request. A browser only has a limited number of physical network connections it opens to each domain. In my case it uses 2 connections per domain. With a total number of 47 XHR calls and 47 product images but only 2 connections available to make these calls we end up with a very high wait time for each of those requests.

Solution: Reducing network roundtrips by reducing requests

The solution is rather easy – at least in theory. The goal is to reduce the number of network roundtrips. Not only does this save you time lost with network latency – it also saves time on the server as it has fewer requests to handle and it solves the problem in the browser by not needing to wait so long for an open connection as we have far fewer requests. In this case – instead of making one XHR call for every one of the 47 products – I would just make a single call to retrieve the product information in one roundtrip for all of them. Or – even better – just include that information in the initial XHR call that gets the list of products. With that approach we can save 46 or even 47 roundtrips.

This would have a major impact on the web site performance. If we would then also merge the 47 images files into a single file using CSS Sprites we can get rid of another 46 roundtrips. I know – this is the theory – it might be not that easy to implement this on every page based on the architecture or maybe because there is not time or people that could actually do this – but – if I do the math here: instead of waiting 15 seconds till the page is fully loaded I assume the page can be loaded in 6 or 7 seconds. This would accelerate page loading by more than 50% speed up of this page. And – as we have recently learned from Velocity – Speed is Money!!

Conclusion
It is not the first time I’ve seen this exact implementation and therefore I assume it is not the last implementation out there that solves a problem like a product catalogue like this. Be aware of too many XHRs. Reduce the roundtrips. Another solution would be to use different domains for your XHR calls and your images. This gives the browser additional physical connections and speeds up the download. It’s not the perfect solution – but it is a good workaround :-)

As always – let me know what you think – and – here is some more material that you might be interested in: Best Practices on Web Performance Optimization, Best Practices on JavaScript/AJAX Performance or the Top 10 Performance Problems from Zappos, Monster and Co

Related Reading:

  1. Best Practices on JavaScript and AJAX Performance JavaScript can save your day or it can cause you...
  2. Best Practices on Web Performance Optimization (WPO) Over the last couple of years performance of web applications...
  3. Hands-On Guide: Verifying FIFA World Cup Web Site against Performance Best Practices Whether you call it Football, Futbol, Fussball, Futebol, Calcio or...
  4. Best Practices to Diagnose and Prevent AJAX Performance Issues in Complex Web2.0 Applications: Monster.com I am doing another Webinar on Best Practices for AJAX...
  5. Best Practices from Zappos to deliver WOW Performance Zappos - the leading eCommerce site for shoes and apparel –...
About Andreas Grabner
Andreas Grabner has been helping companies improve their application performance for 15+ years. He is a regular contributor within Web Performance and DevOps communities and a prolific speaker at user groups and conferences around the world. Reach him at @grabnerandi

Latest AJAXWorld RIA Stories
Today, we have more data to manage than ever. We also have better algorithms that help us access our data faster. Cloud is the driving force behind many of the data warehouse advancements we have enjoyed in recent years. But what are the best practices for storing data in the clo...
Andi Mann, Chief Technology Advocate at Splunk, is an accomplished digital business executive with extensive global expertise as a strategist, technologist, innovator, marketer, and communicator. For over 30 years across five continents, he has built success with Fortune 500 corp...
Bill Schmarzo, author of "Big Data: Understanding How Data Powers Big Business" and "Big Data MBA: Driving Business Strategies with Data Science" is responsible for guiding the technology strategy within Hitachi Vantara for IoT and Analytics. Bill brings a balanced business-techn...
DXWorldEXPO LLC announced today that ICOHOLDER named "Media Sponsor" of Miami Blockchain Event by FinTechEXPO. ICOHOLDER gives detailed information and help the community to invest in the trusty projects. Miami Blockchain Event by FinTechEXPO has opened its Call for Papers. Th...
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. ...
Untitled Document

Call 201 802-3020 or Click Here to Save $200!

Register Today and
Save $200

Your registrations includes: Golden Pass Delegates will receive full conference access on October 20-22, 2008 including: Lunch and Coffee Breaks, Collectible Bag and Archives of all sessions on DVD. Includes access to all Conference Sessions including the Technical Sessions, Exhibits, Keynotes, Vendor Technology Presentations, and Power Panels.


Sponsorship Opportunities

AJAXWorld offers the undisputed best platform to position your company as a leading vendor in the fast-emerging marketplace for AJAX and Enterprise Web 2.0.


Please call
(201)802-3020


Who Should Attend?

 CTOs & VPs of Engineering
 Directors of Technology
 Sr. User Interface Architects
 Front-End Engineers
 VCs & Industry Analysts
 Directors of Business Development
 Software Engineers
 Senior Architects
 Application Programmers & Software Developers
 Project Managers
 Web Programmers & Designers
 Companies & Organizations that need to stay in
  front of the latest Web technology

AJAXWorld Security Bootcamp

Introducing at AJAXWorld RIA Conference 2008 West the world's first-ever full, one-day immersive "AJAX Security Bootcamp" - led by one of the world's foremost AJAX security experts and teachers, HP's Billy Hoffman.

View the full one-day schedule



AJAXWorld 2008 West - Tracks

Track 01: Enterprise RIAs
Track 02: Frameworks & Toolkits
Track 03: Web 2.0 & Mashups
Track 04: Hot Topics
Track 05: The Future of the Web
Track 06: iPhone Developer Summit



Brought To You By:

AJAXWorld Magazine is the pre-eminent independent vendor-neutral resource for the fastest growing new segment of the software business: entirely Web-based applications and experiences.

Download the Latest Issue!

AJAXWorld Webcasts



SYS-CON EVENTS


AJAXWorld Keynotes & Power Panels

2008 SYS-CON TV Keynotes: Can We Fix the Web? By Douglas Crockford - by Douglas Crockford
2008 SYS-CON TV Keynotes: 2008: The Year of the RIA - by Anthony Franco
2008 SYS-CON TV Power Panel: The Business Value of RIAs
2008 SYS-CON TV Power Panel: What Lies Beyond AJAX
2007 SYS-CON TV Keynotes: Why Web 2.0 for the Enterprise Is Far More Than Just a Facelift - by Ted Farrell
2007 SYS-CON TV Keynotes: Fueling the Next Generation Web: A Peek Behind the Green Curtain - by Bob Brewin
2007 SYS-CON TV Keynotes: AJAX in the Balance - by Joe Stagner

AJAXWorld Sessions on SYS-CON.TV

· Bill Scott - Yahoo! UI Library
· David Heinemeier Hansson - AJAX on Rails
· Jesse James Garrett - Elements of User Experience
· Dion Hinchcliffe - Real World AJAX
· Eric Miraglia - Open Source AJAX Development
· Paul Rademacher - Mashing Up Your Web Application
· Adam Sah - Google Gadgets
· Doug Crockford - An Introduction to JavaScript
· David Linthicum - Enterprise Web 2.0
· Patrick Grady - The Imagination & Experience Web

AJAXWorld...All The AJAX Rock Stars in One Spot!


Past Events Archive

SOAWorld Conference & Expo 2008 East
soa2008east.sys-con.com
Virtualization Conference & Expo 2008 East
virt2008east.sys-con.com
AJAXWorld 2008 Conference & Expo East
ajaxmar08.sys-con.com
SOAWorld Conference & Expo 2007 West
www.soaworld2007.com
Virtualization Conference & Expo 2007 West
virt2007west.sys-con.com
AJAXWorld 2007 Conference & Expo West
ajaxoct07.sys-con.com
SOAWorld Conference & Expo 2007 East
soa2007east.sys-con.com
Virtualization Conference & Expo 2007 East
virt2007east.sys-con.com
AJAXWorld 2007 Conference & Expo East
ajaxmarch07.sys-con.com
Other SYS-CON Events
events.sys-con.com

Join Over 10,000 Early AJAX Adopters
Who Have Attended AJAXWorld
• A&R Edelman
• Academic Enterprise
• Accoona Corp [2 delegates]
• Acxiom
• Adams Capital Management
• Adaptive Edge
• Adaptive Path
• Adobe Systems Incorporated [21 delegates]
• Adobe Systems Romania
• Ajax13
• All Risks, Ltd.
• alliance
• Alliance For Community Care
• AlphaDetail Inc
• Altera Corporation
• Amazon.com [6 delegates]
• Appeon Corporation [2 delegates]
• Apple Computer [5 delegates]
• Apress [3 delegates]
• Arkivio
• ASA
• Astute Solutions
• Avaya Inc [2 delegates]
• Avenda Systems
• Avenue A | Razorfish [3 delegates]
• Axcella, LLC [2 delegates]
• Aximsoft
• Azimyth
• Backbase USA Inc. [4 delegates]
• BAE Systems [2 delegates]
• Bank of America [2 delegates]
• Barkley Evergreen & Partners Interactive
• Bayview Financial [2 delegates]
• BEA Systems [3 delegates]
• Billeo
• BMC Software, Inc. [2 delegates]
• Borland Software Corporation
• Bradford Technologies, Inc [2 delegates]
• Brilliance
• Brocade Communications Systems, Inc. [2 delegates]
• Brookside Capital LLC
• Brulant
• Bungee Labs, Inc [6 delegates]
• Bureau of Labor Statistics
• BUZ Interactive
• Cadena Software
• Calix Networks
• Callidus Software [2 delegates]
• Cambia Security
• Carnegie Mellon West
• Cautella, Inc.
• CBSA
• Celequest [3 delegates]
• Change Vision, Inc.
• Charles E. Kenney, CPA
• Charles Schwab & Co., Inc. [8 delegates]

   read more...


ADVERTISE   |   MAGAZINE SUBSCRIPTIONS   |   FREE BREAKING-NEWSLETTERS!   |   SYS-CON.TV   |   BLOG-N-PLAY!   |   WEBCAST   |   EDUCATION   |   RESEARCH

.NET Developer's Journal - .NETDJ   |   ColdFusion Developer's Journal - CFDJ   |   Eclipse Developer's Journal - EDJ   |   Enterprise Open Source Magazine - EOS
Open Web Developer's Journal - OPEN WEB   |   iPhone Developer's Journal - iPHONE   |   Virtualization - Virtualization   |   Java Developer's Journal - JDJ   |   Linux.SYS-CON.com
PowerBuilder Developer's Journal - PBDJ   |   SEO / SEM Journal - SJ   |   SOAWorld Magazine - SOAWM   |   IT Solutions Guide - ITSG   |   Symbian Developer's Journal - SDJ
WebLogic Developer's Journal - WLDJ   |   WebSphere Journal - WJ   |   Wireless Business & Technology - WBT   |   XML-Journal - XMLJ   |   Internet Video - iTV
Flex Developer's Journal - Flex   |   AJAXWorld Magazine - AWM   |   Silverlight Developer's Journal - SLDJ   |   PHP.SYS-CON.com   |   Web 2.0 Journal - WEB2

SYS-CON MEDIA:   ABOUT US   |   CONTACT US   |   COMPANY NEWS   |   CAREERS   |   SITE MAP
SYS-CON EVENTS  |  AJAXWorld Conference & Expo  |  iPhone Developer Summit  |  OpenWeb Developer Summit  |  SOA World Conference & Expo  |  Virtualization Conference & Expo
INTERNATIONAL SITES:   India  |  U.K.  |  Canada  |  Germany  |  France  |  Australia  |  Italy  |  Spain  |  Netherlands  |  Brazil  |  Belgium
 Terms of Use & Our Privacy Statement     About Newsfeeds / Video Feeds
Copyright ©1994-2008 SYS-CON Publications, Inc. All Rights Reserved. All marks are trademarks of SYS-CON Media.
Reproduction in whole or in part in any form or medium without express written permission of SYS-CON Publications, Inc. is prohibited.