Welcome!

AJAX & REA Authors: Scott Hirsch, David H Deans, Carmen Gonzalez, Pat Romanski, Aria Blog

Related Topics: AJAX & REA, Java, XML, SOA & WOA, .NET, Web 2.0

AJAX & REA: Article

Analyzing Webpage Performance with AJAX Edition 4

What makes older versions of IE so slow as compared to newer versions of Firefox?

It's been a while since we released the last major version of Compuware dynaTrace AJAX Edition. With AJAX Edition 4 we introduce the capability to test across all versions of Internet Explorer (IE) starting with IE6 and all versions of Firefox starting with 3.6.

Why is this important? Well, check out the test results of several pages we tested on IE6, 7 and 8 and contrast them with tests of the same pages using Firefox 16 and 18. A product page on Zappos.com loads in 1.3 seconds in Firefox 18 as compared to 5.6 seconds in IE6. That is four times slower on IE's rather ancient browser. Despite a concerted effort by the industry to get people to use updated browsers (including this one by Microsoft), we're still seeing a big mix in the browser versions people use to access websites. That means it's important to analyze webpage performance across browser versions to ensure your site functions and performs as it's supposed to.

In this article I want to show you how to do it and what the typical differences in performance are.

Step 1: Download Free Compuware dynaTrace AJAX Edition
Go to the AJAX Edition webpage and click on the download link. Run the Windows installer and launch it from your Start menu. You will be prompted to register a new APM Community account; use your existing account or continue with a five-day registration-free period. After five days the product remains free to use but you need to register an account. Registering a community account gives you full access to the discussion forum on the Compuware APM Community Portal where you can network with AJAX Edition peers and Compuware application performance experts to learn best practices, post questions and find troubleshooting tips.

Step 2: Capture Data Across Multiple Browsers
Now we are ready to start capturing performance data.

Click on "Click here to start tracing" and select either IE or Firefox. As you will be testing a web page you will be prompted for a name and a URL that you assign to that name, e.g., Zappos and zappos.com. Click "Run" and AJAX Edition will launch your browser and navigate right to that URL.

The AJAX Edition toolbar in IE and Firefox (here it's a status bar) indicates that the browser is connected to AJAX Edition and capturing all performance-relevant data while the browser is connected.

Walk through a use case on the page that you are testing, e.g., navigate through the menus, do a search, put items in your shopping cart or try out the social plugins. AJAX Edition will automatically capture all Network Roundtrips, JavaScript Executions, Rendering Activity and AJAX Requests for later performance analysis.

You may need to modify your browser's settings for this step to work properly. Check out our tips page for more information.

Step 3: Analyze High-level KPIs
I recorded several steps on zappos.com with different browsers. I used IE6, 7, 8 and Firefox 16 and 18. As I don't have all these browsers installed on my local machine I used different machines with AJAX Edition installed locally. After recording my sessions I exported the data into a dtas file and imported it all into my local AJAX Edition instance for analysis. This is also a typical use case in test departments where tests are done on different machines with different configurations. A performance expert receives these sessions for analysis and comparison.

All sessions are now available for analysis. Double-clicking a session opens the Performance Report showing high-level KPIs for each URL visited.

If you want to know the details about how these KPIs are calculated you can read up on them on our Best Practices on Web Performance Optimization community page.

When I checked zappos.com I saw a huge difference in page load time. Sure, I had expected this, but now I can quantify exactly what the difference is, and how different the experience of using the site is for people accessing it on different browsers. The majority of the time turned out to be spent in JavaScript, which took significantly longer on older browsers such as IE 6, IE 7 and Firefox 16.

Check out the following table that shows the key metrics across the different browsers for one of the product pages. The Fully Loaded time is the important metric to look for and the Client Time (Java Script Time) is the one metric with the biggest contribution to that Fully Loaded time:

IE 8 and Firefox 18 are about four times faster in Fully Loaded Time as compared to IE 6, which spends a large amount of time in JavaScript execution.

When looking at the Timeline View of the fastest (IE8) and the slowest (IE6) browsers, it is easy to spot where the differences are during page load:

The long-running JavaScript blocks in IE6 cause the majority of the page load difference compared to its "younger brother," IE 8

It shows how much performance impact JavaScript running on an older browser has on page load time. If supporting older browsers is still a priority for your business you'd better test and optimize for it.

Step 4: Deep-dive Analysis
The AJAX Edition doesn't just leave us with a nice timeline view but also allows us to drill into the JavaScript executions that take so long. Double-clicking on these long-running JavaScript blocks opens the JavaScript PurePath Dashlet that allows us to navigate through the exact JavaScript execution. The following screenshot shows the PurePath dashlet with the highlights on the long-running JavaScript methods. Seems like the problem is related to encoding and decoding long strings that are extraordinarily slow on IE6:

The decode and encode methods are the major contributors to the slow JavaScript execution. The AJAX Edition highlights these methods and also shows the actual source code responsible for it.

Besides going deep into JavaScript, AJAX Edition also provides deep insight into XHR (AJAX) Calls and how these calls impact page performance. Another unique aspect is analysis options for Rendering and Layout activities such as CSS Evaluations, Layouting and Drawing.

If you want to learn more about the deep-five diagnostics options I recommend, check out the online video tutorials on the specific views: AJAX Edition Tutorials.

Step 5: Compare Against Your Competition
Optimizing your site to work well on different browsers is great, but what if you are still much slower than your competition? AJAX Edition has built-in integration with Speed of the Web, which allows you to compare your KPIs against other websites in your industry. Once you have registered a community account and activated your copy of AJAX Edition you can select a category on the first tab in the Performance Report. Your KPIs will then be compared against the latest tests done by Speed of the Web.

On Speed of the Web you can select a category and see how your web performance optimization efforts compare to your competition.

Speed of the Web not only provides the KPIs of the top sites in different industries, it also allows you to test your own site using the same testing infrastructure as used to compute these values used in the comparison. Go to the SpeedoftheWeb.org and enter your URL. Not only will you get an online result of a tested URL you've entered, you will also get an AJAX Edition Session for download as Speed of the Web uses AJAX Edition to run these tests.

Step 6: Go Beyond Your Browser
Not all performance problems can be fixed by optimizing your JavaScript code, using sprites or enabling proper caching. You may also want to automate most of this testing instead of manually analyzing all this data for every build. If you are interested in how to automate performance analysis as well as getting insight into server-side performance problems, check out some of our other blogs such as Top Performance Problems from Zappos, Monster and Co as well as Next Generation Web Performance Optimization.

More Stories By Andreas Grabner

Andreas Grabner has more than a decade of experience as an architect and developer in the Java and .NET space. In his current role, Andi works as a Technology Strategist for Compuware and leads the Compuware APM Center of Excellence team. In his role he influences the Compuware APM product strategy and works closely with customers in implementing performance management solutions across the entire application lifecycle. He is a frequent speaker at technology conferences on performance and architecture-related topics, and regularly authors articles offering business and technology advice for Compuware’s About:Performance blog.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@CloudExpo Stories
Compute virtualization has been transformational, yet security policy implementation and enforcement has lagged behind in agility and automation. There are a number of key considerations when implementing policy in private and hybrid clouds. In his session at 15th Cloud Expo, Holland Barry, VP of Technology at Catbird, will discuss the impact of this new paradigm and what organizations can do today to safely move to software-defined network and compute architectures, including: How normal ope...
Samsung VP Jacopo Lenzi, who headed the company's recent SmartThings acquisition under the auspices of Samsung's Open Innovaction Center (OIC), answered a few questions we had about the deal. This interview was in conjunction with our interview with SmartThings CEO Alex Hawkinson. IoT Journal: SmartThings was developed in an open, standards-agnostic platform, and will now be part of Samsung's Open Innovation Center. Can you elaborate on your commitment to keep the platform open? Jacopo Lenzi: S...
How do APIs and IoT relate? The answer is not as simple as merely adding an API on top of a dumb device, but rather about understanding the architectural patterns for implementing an IoT fabric. There are typically two or three trends: Exposing the device to a management framework Exposing that management framework to a business centric logic • Exposing that business layer and data to end users. This last trend is the IoT stack, which involves a new shift in the separation of what stuff hap...
SYS-CON Events announced today that SOA Software, an API management leader, will exhibit at SYS-CON's 15th International Cloud Expo®, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. SOA Software is a leading provider of API Management and SOA Governance products that equip business to deliver APIs and SOA together to drive their company to meet its business strategy quickly and effectively. SOA Software’s technology helps businesses to accel...
SYS-CON Events announced today that Utimaco will exhibit at SYS-CON's 15th International Cloud Expo®, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Utimaco is a leading manufacturer of hardware based security solutions that provide the root of trust to keep cryptographic keys safe, secure critical digital infrastructures and protect high value data assets. Only Utimaco delivers a general-purpose hardware security module (HSM) as a customiz...
Almost everyone sees the potential of Internet of Things but how can businesses truly unlock that potential. The key will be in the ability to discover business insight in the midst of an ocean of Big Data generated from billions of embedded devices via Systems of Discover. Businesses will also need to ensure that they can sustain that insight by leveraging the cloud for global reach, scale and elasticity.
SYS-CON Events announced today that ElasticBox is holding a Hackathon at DevOps Summit, November 6 from 12 pm -4 pm at the Santa Clara Convention Center in Santa Clara, CA. You can enter as an individual or team of up to 10 developers. A New Star Is Born Every Month! All completed ElasticBoxes will then be sent to a judging panel - 12 winners will be featured on the ElasticBox website in 2015. All entrants will receive five full enterprise licenses for one year + ElasticBox headphones + Elasti...
Once the decision has been made to move part or all of a workload to the cloud, a methodology for selecting that workload needs to be established. How do you move to the cloud? What does the discovery, assessment and planning look like? What workloads make sense? Which cloud model makes sense for each workload? What are the considerations for how to select the right cloud model? And how does that fit in with the overall IT tranformation? In his session at 15th Cloud Expo, John Hatem, head of V...
Cloud services are the newest tool in the arsenal of IT products in the market today. These cloud services integrate process and tools. In order to use these products effectively, organizations must have a good understanding of themselves and their business requirements. In his session at 15th Cloud Expo, Brian Lewis, Principal Architect at Verizon Cloud, will outline key areas of organizational focus, and how to formalize an actionable plan when migrating applications and internal services to...
SAP is delivering break-through innovation combined with fantastic user experience powered by the market-leading in-memory technology, SAP HANA. In his General Session at 15th Cloud Expo, Thorsten Leiduck, VP ISVs & Digital Commerce, SAP, will discuss how SAP and partners provide cloud and hybrid cloud solutions as well as real-time Big Data offerings that help companies of all sizes and industries run better. SAP launched an application challenge to award the most innovative SAP HANA and SAP ...
Ixia develops amazing products so its customers can connect the world. Ixia helps its customers provide an always-on user experience through fast, secure delivery of dynamic connected technologies and services. Through actionable insights that accelerate and secure application and service delivery, Ixia's customers benefit from faster time to market, optimized application performance and higher-quality deployments.
SYS-CON Events announced today that Calm.io has been named “Bronze Sponsor” of DevOps Summit Silicon Valley, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Calm.io is a cloud orchestration platform for AWS, vCenter, OpenStack, or bare metal, that runs your CL tools puppet, Chef, shell, git, Jenkins, nagios, and will soon support New Relic and Docker. It can run hosted, or on premise and provides VM automation / expiry, self-service portals,...
In her General Session at 15th Cloud Expo, Anne Plese, Senior Consultant, Cloud Product Marketing, at Verizon Enterprise, will focus on finding the right mix of renting vs. buying Oracle capacity to scale to meet business demands, and offer validated Oracle database TCO models for Oracle development and testing environments. Anne Plese is a marketing and technology enthusiast/realist with over 19+ years in high tech. At Verizon Enterprise, she focuses on driving growth for the Verizon Cloud pla...
SYS-CON Events announced today that Aria Systems, the recurring revenue expert, has been named "Bronze Sponsor" of SYS-CON's 15th International Cloud Expo®, which will take place on November 4-6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Aria Systems helps leading businesses connect their customers with the products and services they love. Industry leaders like Pitney Bowes, Experian, AAA NCNU, VMware, HootSuite and many others choose Aria to power their recurring revenue bu...
The Internet of Things (IoT) is going to require a new way of thinking and of developing software for speed, security and innovation. This requires IT leaders to balance business as usual while anticipating for the next market and technology trends. Cloud provides the right IT asset portfolio to help today’s IT leaders manage the old and prepare for the new. Today the cloud conversation is evolving from private and public to hybrid. This session will provide use cases and insights to reinforce t...
As Platform as a Service (PaaS) matures as a category, developers should have the ability to use the programming language of their choice to build applications and have access to a wide array of services. Bluemix is IBM's open cloud development platform that enables users to easily build cloud-based, creative mobile and web applications without having to spend large amounts of time and resources on configuring infrastructure and multiple software licenses. In this track, you will learn about the...
Blue Box has closed a $10 million Series B financing. The round was led by a strategic investor and included participation from prior investors including Voyager Capital and Founders Collective, as well as the Blue Box executive team. This round follows a $4.3 million Series A closed in December of 2012 and led by Voyager Capital. In May of this year, the company announced general availability of its private cloud as a service offering, Blue Box Cloud. Since that release, the company has dem...
SYS-CON Events announced today that Verizon has been named "Gold Sponsor" of SYS-CON's 15th International Cloud Expo®, which will take place on November 4-6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Verizon Enterprise Solutions creates global connections that generate growth, drive business innovation and move society forward. With industry-specific solutions and a full range of global wholesale offerings provided over the company's secure mobility, cloud, strategic network...
SimpleECM is the only platform to offer a powerful combination of enterprise content management (ECM) services, capture solutions, and third-party business services providing simplified integrations and workflow development for solution providers. SimpleECM is opening the market to businesses of all sizes by reinventing the delivery of ECM services. Our APIs make the development of ECM services simple with the use of familiar technologies for a frictionless integration directly into web applicat...
The only place to be June 9-11 is Cloud Expo & @ThingsExpo 2015 East at the Javits Center in New York City. Join us there as delegates from all over the world come to listen to and engage with speakers & sponsors from the leading Cloud Computing, IoT & Big Data companies. Cloud Expo & @ThingsExpo are the leading events covering the booming market of Cloud Computing, IoT & Big Data for the enterprise. Speakers from all over the world will be hand-picked for their ability to explore the economic...