Welcome!

Microservices Expo Authors: Yeshim Deniz, AppNeta Blog, Elizabeth White, Pat Romanski, Liz McMillan

Related Topics: Machine Learning , Java IoT, Industrial IoT, Microservices Expo, Microsoft Cloud, Agile Computing

Machine Learning : 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.


@MicroservicesExpo Stories
DevOps is often described as a combination of technology and culture. Without both, DevOps isn't complete. However, applying the culture to outdated technology is a recipe for disaster; as response times grow and connections between teams are delayed by technology, the culture will die. A Nutanix Enterprise Cloud has many benefits that provide the needed base for a true DevOps paradigm.
The IT industry is undergoing a significant evolution to keep up with cloud application demand. We see this happening as a mindset shift, from traditional IT teams to more well-rounded, cloud-focused job roles. The IT industry has become so cloud-minded that Gartner predicts that by 2020, this cloud shift will impact more than $1 trillion of global IT spending. This shift, however, has left some IT professionals feeling a little anxious about what lies ahead. The good news is that cloud computin...
We've all had that feeling before: The feeling that you're missing something that everyone else is in on. For today's IT leaders, that feeling might come up when you hear talk about cloud brokers. Meanwhile, you head back into your office and deal with your ever-growing shadow IT problem. But the cloud-broker whispers and your shadow IT issues are linked. If you're wondering "what the heck is a cloud broker?" we've got you covered.
DevOps is often described as a combination of technology and culture. Without both, DevOps isn't complete. However, applying the culture to outdated technology is a recipe for disaster; as response times grow and connections between teams are delayed by technology, the culture will die. A Nutanix Enterprise Cloud has many benefits that provide the needed base for a true DevOps paradigm. In his Day 3 Keynote at 20th Cloud Expo, Chris Brown, a Solutions Marketing Manager at Nutanix, will explore t...
What if you could build a web application that could support true web-scale traffic without having to ever provision or manage a single server? Sounds magical, and it is! In his session at 20th Cloud Expo, Chris Munns, Senior Developer Advocate for Serverless Applications at Amazon Web Services, will show how to build a serverless website that scales automatically using services like AWS Lambda, Amazon API Gateway, and Amazon S3. We will review several frameworks that can help you build serverle...
Everyone wants to use containers, but monitoring containers is hard. New ephemeral architecture introduces new challenges in how monitoring tools need to monitor and visualize containers, so your team can make sense of everything. In his session at @DevOpsSummit, David Gildeh, co-founder and CEO of Outlyer, will go through the challenges and show there is light at the end of the tunnel if you use the right tools and understand what you need to be monitoring to successfully use containers in your...
In today's enterprise, digital transformation represents organizational change even more so than technology change, as customer preferences and behavior drive end-to-end transformation across lines of business as well as IT. To capitalize on the ubiquitous disruption driving this transformation, companies must be able to innovate at an increasingly rapid pace. Traditional approaches for driving innovation are now woefully inadequate for keeping up with the breadth of disruption and change facing...
In his General Session at 16th Cloud Expo, David Shacochis, host of The Hybrid IT Files podcast and Vice President at CenturyLink, investigated three key trends of the “gigabit economy" though the story of a Fortune 500 communications company in transformation. Narrating how multi-modal hybrid IT, service automation, and agile delivery all intersect, he will cover the role of storytelling and empathy in achieving strategic alignment between the enterprise and its information technology.
Microservices are a very exciting architectural approach that many organizations are looking to as a way to accelerate innovation. Microservices promise to allow teams to move away from monolithic "ball of mud" systems, but the reality is that, in the vast majority of organizations, different projects and technologies will continue to be developed at different speeds. How to handle the dependencies between these disparate systems with different iteration cycles? Consider the "canoncial problem" ...
SYS-CON Events announced today that HTBase will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. HTBase (Gartner 2016 Cool Vendor) delivers a Composable IT infrastructure solution architected for agility and increased efficiency. It turns compute, storage, and fabric into fluid pools of resources that are easily composed and re-composed to meet each application’s needs. With HTBase, companies can quickly prov...
The rise of containers and microservices has skyrocketed the rate at which new applications are moved into production environments today. While developers have been deploying containers to speed up the development processes for some time, there still remain challenges with running microservices efficiently. Most existing IT monitoring tools don’t actually maintain visibility into the containers that make up microservices. As those container applications move into production, some IT operations t...
For organizations that have amassed large sums of software complexity, taking a microservices approach is the first step toward DevOps and continuous improvement / development. Integrating system-level analysis with microservices makes it easier to change and add functionality to applications at any time without the increase of risk. Before you start big transformation projects or a cloud migration, make sure these changes won’t take down your entire organization.
In recent years, containers have taken the world by storm. Companies of all sizes and industries have realized the massive benefits of containers, such as unprecedented mobility, higher hardware utilization, and increased flexibility and agility; however, many containers today are non-persistent. Containers without persistence miss out on many benefits, and in many cases simply pass the responsibility of persistence onto other infrastructure, adding additional complexity.
Culture is the most important ingredient of DevOps. The challenge for most organizations is defining and communicating a vision of beneficial DevOps culture for their organizations, and then facilitating the changes needed to achieve that. Often this comes down to an ability to provide true leadership. As a CIO, are your direct reports IT managers or are they IT leaders? The hard truth is that many IT managers have risen through the ranks based on their technical skills, not their leadership abi...
The essence of cloud computing is that all consumable IT resources are delivered as services. In his session at 15th Cloud Expo, Yung Chou, Technology Evangelist at Microsoft, demonstrated the concepts and implementations of two important cloud computing deliveries: Infrastructure as a Service (IaaS) and Platform as a Service (PaaS). He discussed from business and technical viewpoints what exactly they are, why we care, how they are different and in what ways, and the strategies for IT to transi...
Thanks to Docker and the DevOps revolution, microservices have emerged as the new way to build and deploy applications — and there are plenty of great reasons to embrace the microservices trend. If you are going to adopt microservices, you also have to understand that microservice architectures have many moving parts. When it comes to incident management, this presents an important difference between microservices and monolithic architectures. More moving parts mean more complexity to monitor an...
Microservices (μServices) are a fascinating evolution of the Distributed Object Computing (DOC) paradigm. Initial design of DOC attempted to solve the problem of simplifying developing complex distributed applications by applying object-oriented design principles to disparate components operating across networked infrastructure. In this model, DOC “hid” the complexity of making this work from the developer regardless of the deployment architecture through the use of complex frameworks, such as C...
As Enterprise business moves from Monoliths to Microservices, adoption and successful implementations of Microservices become more evident. The goal of Microservices is to improve software delivery speed and increase system safety as scale increases. Documenting hurdles and problems for the use of Microservices will help consultants, architects and specialists to avoid repeating the same mistakes and learn how and when to use (or not use) Microservices at the enterprise level. The circumstance w...
With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend @CloudExpo | @ThingsExpo, June 6-8, 2017, at the Javits Center in New York City, NY and October 31 - November 2, 2017, Santa Clara Convention Center, CA. Learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.
@DevOpsSummit at Cloud taking place June 6-8, 2017, at Javits Center, New York City, is co-located with the 20th International Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to wait for long developm...