Welcome!

Agile Computing Authors: Elizabeth White, Yeshim Deniz, Liz McMillan, Roger Strukhoff, ManageEngine IT Matters

Related Topics: IoT User Interface, Java IoT, Industrial IoT, Microservices Expo, Microsoft Cloud, Agile Computing

IoT User Interface: 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 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

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.


@ThingsExpo Stories
In this strange new world where more and more power is drawn from business technology, companies are effectively straddling two paths on the road to innovation and transformation into digital enterprises. The first path is the heritage trail – with “legacy” technology forming the background. Here, extant technologies are transformed by core IT teams to provide more API-driven approaches. Legacy systems can restrict companies that are transitioning into digital enterprises. To truly become a lea...
Internet of @ThingsExpo, taking place November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 19th Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devices - comp...
What are the new priorities for the connected business? First: businesses need to think differently about the types of connections they will need to make – these span well beyond the traditional app to app into more modern forms of integration including SaaS integrations, mobile integrations, APIs, device integration and Big Data integration. It’s important these are unified together vs. doing them all piecemeal. Second, these types of connections need to be simple to design, adapt and configure...
Adobe is changing the world though digital experiences. Adobe helps customers develop and deliver high-impact experiences that differentiate brands, build loyalty, and drive revenue across every screen, including smartphones, computers, tablets and TVs. Adobe content solutions are used daily by millions of companies worldwide-from publishers and broadcasters, to enterprises, marketing agencies and household-name brands. Building on its established design leadership, Adobe enables customers not o...
SYS-CON Events announced today the Enterprise IoT Bootcamp, being held November 1-2, 2016, in conjunction with 19th Cloud Expo | @ThingsExpo at the Santa Clara Convention Center in Santa Clara, CA. Combined with real-world scenarios and use cases, the Enterprise IoT Bootcamp is not just based on presentations but with hands-on demos and detailed walkthroughs. We will introduce you to a variety of real world use cases prototyped using Arduino, Raspberry Pi, BeagleBone, Spark, and Intel Edison. Y...
Just over a week ago I received a long and loud sustained applause for a presentation I delivered at this year’s Cloud Expo in Santa Clara. I was extremely pleased with the turnout and had some very good conversations with many of the attendees. Over the next few days I had many more meaningful conversations and was not only happy with the results but also learned a few new things. Here is everything I learned in those three days distilled into three short points.
“We're a global managed hosting provider. Our core customer set is a U.S.-based customer that is looking to go global,” explained Adam Rogers, Managing Director at ANEXIA, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
Why do your mobile transformations need to happen today? Mobile is the strategy that enterprise transformation centers on to drive customer engagement. In his general session at @ThingsExpo, Roger Woods, Director, Mobile Product & Strategy – Adobe Marketing Cloud, covered key IoT and mobile trends that are forcing mobile transformation, key components of a solid mobile strategy and explored how brands are effectively driving mobile change throughout the enterprise.
Ask someone to architect an Internet of Things (IoT) solution and you are guaranteed to see a reference to the cloud. This would lead you to believe that IoT requires the cloud to exist. However, there are many IoT use cases where the cloud is not feasible or desirable. In his session at @ThingsExpo, Dave McCarthy, Director of Products at Bsquare Corporation, will discuss the strategies that exist to extend intelligence directly to IoT devices and sensors, freeing them from the constraints of ...
SYS-CON Events announced today that Sheng Liang to Keynote at SYS-CON's 19th Cloud Expo, which will take place on November 1-3, 2016 at the Santa Clara Convention Center in Santa Clara, California.
Technology vendors and analysts are eager to paint a rosy picture of how wonderful IoT is and why your deployment will be great with the use of their products and services. While it is easy to showcase successful IoT solutions, identifying IoT systems that missed the mark or failed can often provide more in the way of key lessons learned. In his session at @ThingsExpo, Peter Vanderminden, Principal Industry Analyst for IoT & Digital Supply Chain to Flatiron Strategies, will focus on how IoT de...
Complete Internet of Things (IoT) embedded device security is not just about the device but involves the entire product’s identity, data and control integrity, and services traversing the cloud. A device can no longer be looked at as an island; it is a part of a system. In fact, given the cross-domain interactions enabled by IoT it could be a part of many systems. Also, depending on where the device is deployed, for example, in the office building versus a factory floor or oil field, security ha...
24Notion is full-service global creative digital marketing, technology and lifestyle agency that combines strategic ideas with customized tactical execution. With a broad understand of the art of traditional marketing, new media, communications and social influence, 24Notion uniquely understands how to connect your brand strategy with the right consumer. 24Notion ranked #12 on Corporate Social Responsibility - Book of List.
Businesses are struggling to manage the information flow and interactions between all of these new devices and things jumping on their network, and the apps and IT systems they control. The data businesses gather is only helpful if they can do something with it. In his session at @ThingsExpo, Chris Witeck, Principal Technology Strategist at Citrix, will discuss how different the impact of IoT will be for large businesses, expanding how IoT will allow large organizations to make their legacy ap...
Fact is, enterprises have significant legacy voice infrastructure that’s costly to replace with pure IP solutions. How can we bring this analog infrastructure into our shiny new cloud applications? There are proven methods to bind both legacy voice applications and traditional PSTN audio into cloud-based applications and services at a carrier scale. Some of the most successful implementations leverage WebRTC, WebSockets, SIP and other open source technologies. In his session at @ThingsExpo, Da...
What happens when the different parts of a vehicle become smarter than the vehicle itself? As we move toward the era of smart everything, hundreds of entities in a vehicle that communicate with each other, the vehicle and external systems create a need for identity orchestration so that all entities work as a conglomerate. Much like an orchestra without a conductor, without the ability to secure, control, and connect the link between a vehicle’s head unit, devices, and systems and to manage the ...
What does it look like when you have access to cloud infrastructure and platform under the same roof? Let’s talk about the different layers of Technology as a Service: who cares, what runs where, and how does it all fit together. In his session at 18th Cloud Expo, Phil Jackson, Lead Technology Evangelist at SoftLayer, an IBM company, spoke about the picture being painted by IBM Cloud and how the tools being crafted can help fill the gaps in your IT infrastructure.
For basic one-to-one voice or video calling solutions, WebRTC has proven to be a very powerful technology. Although WebRTC’s core functionality is to provide secure, real-time p2p media streaming, leveraging native platform features and server-side components brings up new communication capabilities for web and native mobile applications, allowing for advanced multi-user use cases such as video broadcasting, conferencing, and media recording.
In his session at @ThingsExpo, Kausik Sridharabalan, founder and CTO of Pulzze Systems, Inc., will focus on key challenges in building an Internet of Things solution infrastructure. He will shed light on efficient ways of defining interactions within IoT solutions, leading to cost and time reduction. He will also introduce ways to handle data and how one can develop IoT solutions that are lean, flexible and configurable, thus making IoT infrastructure agile and scalable.
Cognitive Computing is becoming the foundation for a new generation of solutions that have the potential to transform business. Unlike traditional approaches to building solutions, a cognitive computing approach allows the data to help determine the way applications are designed. This contrasts with conventional software development that begins with defining logic based on the current way a business operates. In her session at 18th Cloud Expo, Judith S. Hurwitz, President and CEO of Hurwitz & ...