Welcome!

AJAX & REA Authors: Mark Cravotta, RealWire News Distribution, Roger Strukhoff, Kevin Benedict, Gary Kaiser

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.


Cloud Expo Breaking News
There will be 50 billion Internet connected devices by 2020. Today, every manufacturer has a propriety protocol and an app. How do we securely integrate these "things" into our lives and businesses in a way that we can easily control and manage? Even better, how do we integrate these "things" so that they control and manage each other so our lives become more convenient or our businesses become more profitable and/or safe? We have heard that the best interface is no interface. In his session at Internet of @ThingsExpo, Chris Matthieu, Co-Founder & CTO at Octoblu, Inc., will discuss how these devices generate enough data to learn our behaviors and simplify/improve our lives. What if we could connect everything to everything? I'm not only talking about connecting things to things but also systems, cloud services, and people. Add in a little machine learning and artificial intelligence and now we have something interesting...
SYS-CON Events announced today that Cloudian, Inc., the leading provider of hybrid cloud storage solutions, 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. Cloudian is a Foster City, Calif.-based software company specializing in cloud storage. Cloudian HyperStore® is an S3-compatible cloud object storage platform that enables service providers and enterprises to build reliable, affordable and scalable hybrid cloud storage solutions. Cloudian actively partners with leading cloud computing environments including Amazon Web Services, Citrix Cloud Platform, Apache CloudStack, OpenStack and the vast ecosystem of S3 compatible tools and applications. Cloudian's customers include Vodafone, Nextel, NTT, Nifty, and LunaCloud. The company has additional offices in China and Japan.
It’s time to face reality: "Americans are from Mars, Europeans are from Venus," and in today’s increasingly connected world, understanding “inter-planetary” alignments and deviations is mission-critical for cloud. In her session at 15th Cloud Expo, Evelyn de Souza, Data Privacy and Compliance Strategy Leader at Cisco Systems, will discuss cultural expectations of privacy based on new research across these elements.
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 Internet of @ThingsExpo, Chris Gray, Director, Embedded and Internet of Things, will discuss 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 and analysis are providing the pull to meet customer expectations of a widely connected, multi-dimensional universe of people, things, and information.
SYS-CON Events announced today that Esri 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. Esri inspires and enables people to positively impact the future through a deeper, geographic understanding of the changing world around them. For more information, visit http://www.esri.com.
After a couple of false starts, cloud-based desktop solutions are picking up steam, driven by trends such as BYOD and pervasive high-speed connectivity. In his session at 15th Cloud Expo, Seth Bostock, CEO of IndependenceIT, cuts through the hype and the acronyms, and discusses the emergence of full-featured cloud workspaces that do for the desktop what cloud infrastructure did for the server. He’ll discuss VDI vs DaaS, implementation strategies and evaluation criteria.
Cloud computing started a technology revolution; now DevOps is driving that revolution forward. By enabling new approaches to service delivery, cloud and DevOps together are delivering even greater speed, agility, and efficiency. No wonder leading innovators are adopting DevOps and cloud together! In his session at DevOps Summit, Andi Mann, Vice President of Strategic Solutions at CA Technologies, will explore the synergies in these two approaches, with practical tips, techniques, research data, war stories, case studies, and recommendations.
Cloud Computing is evolving into a Big Three of Amazon Web Services, Google Cloud, and Microsoft Azure. Cloud 360: Multi-Cloud Bootcamp, being held Nov 4–5, 2014, in conjunction with 15th Cloud Expo in Santa Clara, CA, delivers a real-world demonstration of how to deploy and configure a scalable and available web application on all three platforms. The Cloud 360 Bootcamp, led by Janakiram MSV, an analyst with Gigaom Research, is the first bootcamp that introduces the core concepts of Infrastructure as a Service (IaaS) based on the workings of the Big Three platforms – Amazon EC2, Google Compute Engine, and Azure VMs. Bootcamp attendees will get to see the big picture and also receive the knowledge needed to make the best cloud decisions for their business applications and entire enterprise IT organization.
The Internet of Things promises to transform businesses (and lives), but navigating the business and technical path to success can be difficult to understand. In his session at 15th Internet of @ThingsExpo, Chad Jones, Vice President, Product Strategy of LogMeIn's Xively IoT Platform, will show you how to approach creating broadly successful connected customer solutions using real world business transformation studies including New England BioLabs and more.
“Distrix fits into the overall cloud and IoT model around software-defined networking. There’s a broad category around software-defined networking that’s focused on data center, and we focus on the WAN,” explained Jay Friedman, President of Distrix, in this SYS-CON.tv interview at the Internet of @ThingsExpo, held June 10-12, 2014, at the Javits Center in New York City. Internet of @ThingsExpo 2014 Silicon Valley, November 4–6, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading IoT industry players in the world.
Scott Jenson leads a project called The Physical Web within the Chrome team at Google. Project members are working to take the scalability and openness of the web and use it to talk to the exponentially exploding range of smart devices. Nearly every company today working on the IoT comes up with the same basic solution: use my server and you'll be fine. But if we really believe there will be trillions of these devices, that just can't scale. We need a system that is open a scalable and by using the URL as a basic building block, we open this up and get the same resilience that the web enjoys.
“The Internet of Things is a wave that has arrived and it’s growing really fast. The concern at Aria Systems is making sure that people understand the ramifications of their attempts to monetize whatever it is they build on the Internet of Things," explained C Brendan O’Brien, Co-founder and Chief Architect at Aria Systems, in this SYS-CON.tv interview at the Internet of @ThingsExpo, held June 10-12, 2014, at the Javits Center in New York City. Internet of @ThingsExpo 2014 Silicon Valley, November 4–6, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading IoT industry players in the world.
The Internet of Things is a natural complement to the cloud and related technologies such as Big Data, analytics, and mobility. In his session at Internet of @ThingsExpo, Joe Weinman will lay out four generic strategies – digital disciplines – to exploit emerging digital technologies for strategic advantage. Joe Weinman has held executive leadership positions at Bell Labs, AT&T, Hewlett-Packard, and Telx, in areas such as corporate strategy, business development, product management, operations, and R&D.
SYS-CON Events announced today that DevOps.com has been named “Media Sponsor” of SYS-CON's “DevOps Summit at Cloud Expo,” which will take place on June 10–12, 2014, at the Javits Center in New York City, New York. DevOps.com is where the world meets DevOps. It is the largest collection of original content relating to DevOps on the web today Featuring up-to-the-minute news, feature stories, blogs, bylined articles and more, DevOps.com is where the thought leaders of the DevOps movement make their ideas known.
There are 182 billion emails sent every day, generating a lot of data about how recipients and ISPs respond. Many marketers take a more-is-better approach to stats, preferring to have the ability to slice and dice their email lists based numerous arbitrary stats. However, fundamentally what really matters is whether or not sending an email to a particular recipient will generate value. Data Scientists can design high-level insights such as engagement prediction models and content clusters that allow marketers to cut through the noise and design their campaigns around strong, predictive signals, rather than arbitrary statistics. SendGrid sends up to half a billion emails a day for customers such as Pinterest and GitHub. All this email adds up to more text than produced in the entire twitterverse. We track events like clicks, opens and deliveries to help improve deliverability for our customers – adding up to over 50 billion useful events every month. While SendGrid data covers only abo...