Click here to close now.

Welcome!

Web 2.0 Authors: Tim Hinds, Elizabeth White, Adrian Bridgwater, Liz McMillan, Harry Trott

Related Topics: AJAX & REA, Java, XML, Microservices Journal, .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 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
The 17th International Cloud Expo has announced that its Call for Papers is open. 17th International Cloud Expo, to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, brings together Cloud Computing, APM, APIs, Microservices, Security, Big Data, Internet of Things, DevOps and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding business opportunity. Submit your speaking proposal today!
17th Cloud Expo, taking place Nov 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Meanwhile, 94% of enterprises are using some form of XaaS – software, platform, and infrastructure as a service.
The Internet of Things is not new. Historically, smart businesses have used its basic concept of leveraging data to drive better decision making and have capitalized on those insights to realize additional revenue opportunities. So, what has changed to make the Internet of Things one of the hottest topics in tech? In his session at @ThingsExpo, Chris Gray, Director, Embedded and Internet of Things, discussed the underlying factors that are driving the economics of intelligent systems. Discover how hardware commoditization, the ubiquitous nature of connectivity, and the emergence of Big Data a...
With major technology companies and startups seriously embracing IoT strategies, now is the perfect time to attend @ThingsExpo in Silicon Valley. Learn what is going on, contribute to the discussions, and ensure that your enterprise is as "IoT-Ready" as it can be! Internet of @ThingsExpo, taking place Nov 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 17th 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 an...
All major researchers estimate there will be tens of billions devices - computers, smartphones, tablets, and sensors - connected to the Internet by 2020. This number will continue to grow at a rapid pace for the next several decades. With major technology companies and startups seriously embracing IoT strategies, now is the perfect time to attend @ThingsExpo, June 9-11, 2015, at the Javits Center in New York City. Learn what is going on, contribute to the discussions, and ensure that your enterprise is as "IoT-Ready" as it can be
Container frameworks, such as Docker, provide a variety of benefits, including density of deployment across infrastructure, convenience for application developers to push updates with low operational hand-holding, and a fairly well-defined deployment workflow that can be orchestrated. Container frameworks also enable a DevOps approach to application development by cleanly separating concerns between operations and development teams. But running multi-container, multi-server apps with containers is very hard. You have to learn five new and different technologies and best practices (libswarm, sy...
SYS-CON Events announced today that DragonGlass, an enterprise search platform, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. After eleven years of designing and building custom applications, OpenCrowd has launched DragonGlass, a cloud-based platform that enables the development of search-based applications. These are a new breed of applications that utilize a search index as their backbone for data retrieval. They can easily adapt to new data sets and provide access to both structured and unstruc...
As the Internet of Things unfolds, mobile and wearable devices are blurring the line between physical and digital, integrating ever more closely with our interests, our routines, our daily lives. Contextual computing and smart, sensor-equipped spaces bring the potential to walk through a world that recognizes us and responds accordingly. We become continuous transmitters and receivers of data. In his session at @ThingsExpo, Andrew Bolwell, Director of Innovation for HP's Printing and Personal Systems Group, discussed how key attributes of mobile technology – touch input, sensors, social, and ...
WebRTC defines no default signaling protocol, causing fragmentation between WebRTC silos. SIP and XMPP provide possibilities, but come with considerable complexity and are not designed for use in a web environment. In his session at @ThingsExpo, Matthew Hodgson, technical co-founder of the Matrix.org, discussed how Matrix is a new non-profit Open Source Project that defines both a new HTTP-based standard for VoIP & IM signaling and provides reference implementations.
SYS-CON Events announced today that the "First Containers & Microservices Conference" will take place June 9-11, 2015, at the Javits Center in New York City. The “Second Containers & Microservices Conference” will take place November 3-5, 2015, at Santa Clara Convention Center, Santa Clara, CA. Containers and microservices have become topics of intense interest throughout the cloud developer and enterprise IT communities.
Buzzword alert: Microservices and IoT at a DevOps conference? What could possibly go wrong? In this Power Panel at DevOps Summit, moderated by Jason Bloomberg, the leading expert on architecting agility for the enterprise and president of Intellyx, panelists will peel away the buzz and discuss the important architectural principles behind implementing IoT solutions for the enterprise. As remote IoT devices and sensors become increasingly intelligent, they become part of our distributed cloud environment, and we must architect and code accordingly. At the very least, you'll have no problem fil...
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.
The 4th International Internet of @ThingsExpo, co-located with the 17th International Cloud Expo - to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA - announces that its Call for Papers is open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
"People are a lot more knowledgeable about APIs now. There are two types of people who work with APIs - IT people who want to use APIs for something internal and the product managers who want to do something outside APIs for people to connect to them," explained Roberto Medrano, Executive Vice President at SOA Software, in this SYS-CON.tv interview at Cloud Expo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
In their session at @ThingsExpo, Shyam Varan Nath, Principal Architect at GE, and Ibrahim Gokcen, who leads GE's advanced IoT analytics, focused on the Internet of Things / Industrial Internet and how to make it operational for business end-users. Learn about the challenges posed by machine and sensor data and how to marry it with enterprise data. They also discussed the tips and tricks to provide the Industrial Internet as an end-user consumable service using Big Data Analytics and Industrial Cloud.
The explosion of connected devices / sensors is creating an ever-expanding set of new and valuable data. In parallel the emerging capability of Big Data technologies to store, access, analyze, and react to this data is producing changes in business models under the umbrella of the Internet of Things (IoT). In particular within the Insurance industry, IoT appears positioned to enable deep changes by altering relationships between insurers, distributors, and the insured. In his session at @ThingsExpo, Michael Sick, a Senior Manager and Big Data Architect within Ernst and Young's Financial Servi...
Sensor-enabled things are becoming more commonplace, precursors to a larger and more complex framework that most consider the ultimate promise of the IoT: things connecting, interacting, sharing, storing, and over time perhaps learning and predicting based on habits, behaviors, location, preferences, purchases and more. In his session at @ThingsExpo, Tom Wesselman, Director of Communications Ecosystem Architecture at Plantronics, will examine the still nascent IoT as it is coalescing, including what it is today, what it might ultimately be, the role of wearable tech, and technology gaps stil...
The Workspace-as-a-Service (WaaS) market will grow to $6.4B by 2018. In his session at 16th Cloud Expo, Seth Bostock, CEO of IndependenceIT, will begin by walking the audience through the evolution of Workspace as-a-Service, where it is now vs. where it going. To look beyond the desktop we must understand exactly what WaaS is, who the users are, and where it is going in the future. IT departments, ISVs and service providers must look to workflow and automation capabilities to adapt to growing demand and the rapidly changing workspace model.
Since 2008 and for the first time in history, more than half of humans live in urban areas, urging cities to become “smart.” Today, cities can leverage the wide availability of smartphones combined with new technologies such as Beacons or NFC to connect their urban furniture and environment to create citizen-first services that improve transportation, way-finding and information delivery. In her session at @ThingsExpo, Laetitia Gazel-Anthoine, CEO of Connecthings, will focus on successful use cases.
One of the biggest impacts of the Internet of Things is and will continue to be on data; specifically data volume, management and usage. Companies are scrambling to adapt to this new and unpredictable data reality with legacy infrastructure that cannot handle the speed and volume of data. In his session at @ThingsExpo, Don DeLoach, CEO and president of Infobright, will discuss how companies need to rethink their data infrastructure to participate in the IoT, including: Data storage: Understanding the kinds of data: structured, unstructured, big/small? Analytics: What kinds and how responsiv...