Welcome!

Machine Learning Authors: Elizabeth White, Yeshim Deniz, Shelly Palmer, Pat Romanski, Liz McMillan

Related Topics: Machine Learning , Java IoT

Machine Learning : News Item

dynaTrace AJAX Edition 3.0 Released

Free next-generation browser diagnostics - part 1

With its latest release, dynaTrace updates its Product Suite for Deep Dive, Automated Cross-Browser Web Performance Optimization with two products:

  • dynaTrace AJAX Edition 3.0 is the free standalone tool that has been downloaded by 30k+ users so far supporting both Firefox (3.6, 4.0) and Internet Explorer (6, 7 & 8) 8)
  • dynaTrace Development Team Edition is the Premium Upgrade and provides extended automation, end-to-end performance and automated regression analysis for modern Web 2.0 Applications

In this first part of the series I focus on the capabilities that support web developers and testers on their local workstation when analyzing performance or problems in Internet Explorer and Firefox. A second part will cover the benefits of the Premium Upgrade for Agile Development Teams when automating performance and regression analysis.

dynaTrace AJAX Edition 3.0 – Capabilities that can save your day
As a Web Developer and Tester of Web Applications it is challenging to keep up with verifying that the latest changes to your web site work well and don’t impact web page performance across different browsers. dynaTrace AJAX Edition 3.0 comes with the features and capabilities you need to make your day-to-day activity much easier

Improve Page Load Times
As we’ve come to understand the actual impact of Page Load Time on end user behavior (confirmed by studies from Microsoft, Yahoo, Google and Shopzilla), accelerating Page Load Time has become a top goal for every web site. Following Best Practices from Yahoo, Google and dynaTrace on how to reduce network roundtrips, optimize browser caching and speed up JavaScript execution can significantly improve Page Load Time. dynaTrace AJAX Edition provides a Performance Report that analyzes every visited page based on these known Best Practices. This Performance Report provides different sections and gives recommendations on how to improve page load time.

Particularly in Web 2.0 Applications that leverage JavaScript and DOM Manipulations, it is common for JavaScript Execution to significantly contribute to actual Page Load Time. The dynaTrace Performance Report lists problematic JavaScript handlers and functions that have a significant performance impact on the Page Load Time. Optimizing client side code can improve Page Load Times significantly. The following screenshot shows that the Yahoo News Home Page uses a very inefficient method to lookup DOM elements by class name. The Call Trace and the Source Code view on the right show who makes these inefficient calls, making it easy to start optimizing the code:

Performance Report highlights JavaScript Execution that slows down Page Load Times

Performance Report highlights JavaScript Execution that slows down Page Load Times

The other tabs in the Performance Report focus on optimizing Browser Caching, reducing Network Roundtrips and optimizing Server-Side request times. Following the guidelines in every tab of the report enable you to focus on the things that will really accelerate your page load times.

Identify Cross-Browser Issues
Firefox is the browser of choice for most web developers. The lack of tooling support for earlier versions of Internet Explorer caused many developers and also testers to do their work exclusively on Firefox. This resulted in web sites that worked well in Firefox but had issues on other browsers – especially Internet Explorer. dynaTrace AJAX Edition solves this problem by providing a single tool that captures the same in-depth browser diagnostics data on Internet Explorer 6, 7 & 8 and Firefox 3.6 and 4 (Support for Internet Explorer 9 will follow soon). Having one tool that provides insight into JavaScript execution, DOM manipulations, Rendering activities and Network behavior on these browsers makes it easy to identify cross-browser problems and enables developers to optimize their code.

The following screenshot shows the performance report of the same pages for both Firefox and Internet Explorer. The high-level analysis shows the difference in load times, as well as certain characteristics such as number of network requests, redirects or cached vs. un-cached resources.

Yahoo News seems to be optimized for Internet Explorer with additional roundtrips, redirects and uncached resources causing problems in Firefox

Yahoo News seems to be optimized for Internet Explorer with additional roundtrips, redirects and uncached resources causing problems in Firefox

Not only can we compare high-level performance metrics like those shown in the screenshot above. We can also compare the actual Network Requests, Caching Behavior and JavaScript execution on each browser and browser version. This helps us discover whether certain settings – such as Cache-Control – have not been set for a certain browser or if the included JavaScript libraries work correctly across browsers.

Optimize Page Rendering
Optimizing Page Load Time is only one aspect of accelerating web site performance. The most important key performance indicator is the First Impression Time. That is the time it takes from when a user enters a URL or clicks on a link until that user actually sees a visual response on the screen. In order to optimize Page Rendering you need information on when Rendering actually happens. dynaTrace provides this information for both Internet Explorer and Firefox. The Timeline View has a Rendering Column that shows when the browser executed certain Rendering tasks. The following screenshot actually shows us that the Yahoo News Page actually uses progressive rendering. This means that the HTML Content is flushed out early on, allowing the browser to already parse and display some of the HTML before the complete HTML document was downloaded:

Rendering happens while the initial HTML Document gets downloaded. Rendering also happens when additional resources such as images and css files get downloaded

Rendering happens while the initial HTML Document gets downloaded. Rendering also happens when additional resources such as images and css files get downloaded

Optimizing the First Impression Time (time of first Drawing event) and also optimizing Rendering activity on the page in general are now possible across browsers by using dynaTrace AJAX Edition.

JavaScript/DOM Tracing
The key capability of dynaTrace is not only to identify long running JavaScript handlers. dynaTrace traces all JavaScript executions including calls to the DOM (Document Object Model) as well as calls to XHR (XmlHttpRequest).

This deep tracing provides several benefits:

  • Unlike a profiler, dynaTrace actually sees the individual method calls with method arguments and return values. Outliers can therefore be identified and are not hidden in average values
  • Unlike a debugger, dynaTrace is low overhead and thus doesn’t impact execution time of the JavaScript significantly. This allows us to analyze the exact execution behavior of timers and intervals
  • Unlike other tools, dynaTrace actually traces calls into the DOM. The DOM is the most performance-critical component in the browser. Read and Write access can be very expensive and should be optimized.

When analyzing JavaScript/DOM Traces we use the dynaTrace PurePath view. We can open this view through the Context Menu on a slow JavaScript method listed in the Performance Report. Another option is to double click on a JavaScript execution block shown in the Timeline. The following screenshot shows a JavaScript trace of the slow running getElementsByClassName functions that are called on the Yahoo News Page. This method iterates through all DOM Elements. In order to do that it queries all elements using getElementsByTagName.

The yellow arrows indicate read, write property access as well as method calls on the DOM

The yellow arrows indicate read, write property access as well as method calls on the DOM

In addition to looking at Traces of individual JavaScript handlers, dynaTrace also provides the Hotspot view. The Hotspot view analyzes all JavaScript, DOM and Rendering activity on a given page and shows which methods have the highest execution time contribution and which methods are called most frequently. As the underlying data of this presented information are the Deep-Dive Traces, we can pick a method that we want to analyze further, for example, who calls a method with particular parameters or who calls a method too often:

In the Hotspot View we see which JavaScript, DOM or Rendering activity contributes how much to the overall page load time. Back Traces help to identify the caller

In the Hotspot View we see which JavaScript, DOM or Rendering activity contributes how much to the overall page load time. Back Traces help to identify the caller

Deep tracing that includes JavaScript, DOM and method arguments comes with low overhead. The overhead of the actual JavaScript instrumentation is shown in the PurePath view for every loaded JavaScript file. The overhead when collecting the actual method execution depends on the number of JavaScript and DOM calls. The depth of tracing is configurable through the preferences and gives you full control on how much data to collect. Caution: In Firefox, tracing DOM calls comes with a larger performance penalty than in Internet Explorer as it requires disabling DOM Quick Stubs.

Automate Web Performance Optimization
We have already blogged about how to use dynaTrace AJAX Edition in a Continuous Integration environment by integrating it with your Selenium, Watir, Silk, QTP or WebDriver scripts. The idea is that whenever you have a functional test that actively drives a browser instance you can add dynaTrace AJAX into the mix and let dynaTrace record the browser activity driven by the test tool.

dynaTrace Ajax captures browser activity driven by your functional testing tool

dynaTrace Ajax captures browser activity driven by your functional testing tool

The great news with dynaTrace AJAX Edition 3 is that this can now be leveraged for both Internet Explorer and Firefox enabling you to automate performance analysis across browsers without having to modify your tests scripts. If you are interested in automation please check out the following posts:

Compare with Your Competition
Following Best Practices on Web Performance Optimization as defined by Yahoo, Google and dynaTrace is a good thing, but doesn’t guarantee that you are ahead of your competition when it comes to web site performance. Best Practices are also not always applicable for all web sites. News Sites for instance have more images on a page that have a short expiration. Therefore it is OK that caching is used differently than on eCommerce sites where product images don’t change as frequently as the latest World News. Therefore dynaTrace not only allows you to compare your results against Best Practices but also against live websites. When you launch dynaTrace you will be prompted for your dynaTrace Community Account in order to download Live Performance Data

Enter your dynaTrace Community Credentials to get access to real live performance data

Enter your dynaTrace Community Credentials to get access to real live performance data

When opening the Performance Report you now have the option to compare your captured performance data with data from the Top Alexa websites. There are more categories to come over the next few months such as eCommerce, News, … The following screenshot shows the Performance Report comparing the results of Yahoo News to those of the Alexa 1000.

Compare your own results in the different performance categories with performance data captured daily from real websites

Compare your own results in the different performance categories with performance data captured daily from real websites

Comparing your performance metrics with real-life data gives you additional input on the areas on which you want to focus your optimization efforts. If your competition spends less time in Client Side JavaScript you may want to focus on optimizing your own JavaScript code. If you see that you are already doing a good job comparatively in leveraging the browser cache – even though you just scored Rank C – it is better to focus on other areas first.

Want to know more about dynaTrace AJAX Edition?
Start by downloading the free dynaTrace AJAX Edition and optimize your web pages by following the results of the Performance Report. Make yourself familiar with the deep diagnostics capabilities of dynaTrace AJAX by checking out the Top Client Side Performance Problems that have been solved with this tool.

And if you’re organization needs enterprise-class extended automation, end-to-end performance and automated regression analysis for modern Web 2.0 Applications, then you should read part two outlining the Premium Extensions to dynaTrace AJAX that provide what you need.

Related reading:

  1. Premium AJAX Edition 3 Extensions – Next Generation Web Performance Optimization– PART II // If you are serious about Web Development then I...
  2. Update dynaTrace AJAX Edition to get Rendering Times on ALL versions of Internet Explorer Analyzing Rendering Activity is one of the many features of...
  3. Elevating Web- and Load-Testing with MicroFocus SilkPerformer Diagnostics powered by dynaTrace MicroFocus and dynaTrace recently announced “SilkPerformer Assurance” and with that...
  4. dynaTrace Firefox Closed Beta Program started We had quite a number of people showing interest in...
  5. Sneak Peak on Firefox support with dynaTrace We have received lots of great feedback on our deep...

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

@CloudExpo Stories
SYS-CON Events announced today that DivvyCloud 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. DivvyCloud software enables organizations to achieve their cloud computing goals by simplifying and automating security, compliance and cost optimization of public and private cloud infrastructure. Using DivvyCloud, customers can leverage programmatic Bots to identify and remediate common cloud problems in rea...
Most DevOps journeys involve several phases of maturity. Research shows that the inflection point where organizations begin to see maximum value is when they implement tight integration deploying their code to their infrastructure. Success at this level is the last barrier to at-will deployment. Storage, for instance, is more capable than where we read and write data. In his session at @DevOpsSummit at 20th Cloud Expo, Josh Atwell, a Developer Advocate for NetApp, will discuss the role and value...
In his opening keynote at 20th Cloud Expo, Michael Maximilien, Research Scientist, Architect, and Engineer at IBM, will motivate why realizing the full potential of the cloud and social data requires artificial intelligence. By mixing Cloud Foundry and the rich set of Watson services, IBM's Bluemix is the best cloud operating system for enterprises today, providing rapid development and deployment of applications that can take advantage of the rich catalog of Watson services to help drive insigh...
SYS-CON Events announced today that Tintri, Inc, a leading provider of enterprise cloud infrastructure, 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. Tintri offers an enterprise cloud platform built with public cloud-like web services and RESTful APIs. Organizations use Tintri all-flash storage with scale-out and automation as a foundation for their own clouds – to build agile development environments...
Cloud promises the agility required by today’s digital businesses. As organizations adopt cloud based infrastructures and services, their IT resources become increasingly dynamic and hybrid in nature. Managing these require modern IT operations and tools. In his session at 20th Cloud Expo, Raj Sundaram, Senior Principal Product Manager at CA Technologies, will discuss how to modernize your IT operations in order to proactively manage your hybrid cloud and IT environments. He will be sharing bes...
A strange thing is happening along the way to the Internet of Things, namely far too many devices to work with and manage. It has become clear that we'll need much higher efficiency user experiences that can allow us to more easily and scalably work with the thousands of devices that will soon be in each of our lives. Enter the conversational interface revolution, combining bots we can literally talk with, gesture to, and even direct with our thoughts, with embedded artificial intelligence, whic...
Every successful software product evolves from an idea to an enterprise system. Notably, the same way is passed by the product owner's company. In his session at 20th Cloud Expo, Oleg Lola, CEO of MobiDev, will provide a generalized overview of the evolution of a software product, the product owner, the needs that arise at various stages of this process, and the value brought by a software development partner to the product owner as a response to these needs.
SYS-CON Events announced today that Cloudistics, an on-premises cloud computing company, has been named “Bronze Sponsor” of 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. Cloudistics delivers a complete public cloud experience with composable on-premises infrastructures to medium and large enterprises. Its software-defined technology natively converges network, storage, compute, virtualization, and management into a ...
SYS-CON Events announced today that delaPlex will exhibit at SYS-CON's @ThingsExpo, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. delaPlex pioneered Software Development as a Service (SDaaS), which provides scalable resources to build, test, and deploy software. It’s a fast and more reliable way to develop a new product or expand your in-house team.
While some vendors scramble to create and sell you a fancy solution for monitoring your spanking new Amazon Lambdas, hear how you can do it on the cheap using just built-in Java APIs yourself. By exploiting a little-known fact that Lambdas aren’t exactly single threaded, you can effectively identify hot spots in your serverless code. In his session at 20th Cloud Expo, David Martin, Principal Product Owner at CA Technologies, will give a live demonstration and code walkthrough, showing how to ov...
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.
SYS-CON Events announced today that Technologic Systems Inc., an embedded systems solutions company, will exhibit at SYS-CON's @ThingsExpo, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Technologic Systems is an embedded systems company with headquarters in Fountain Hills, Arizona. They have been in business for 32 years, helping more than 8,000 OEM customers and building over a hundred COTS products that have never been discontinued. Technologic Systems’ pr...
SYS-CON Events announced today that Tappest will exhibit MooseFS 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. MooseFS is a breakthrough concept in the storage industry. It allows you to secure stored data with either duplication or erasure coding using any server. The newest – 4.0 version of the software enables users to maintain the redundancy level with even 50% less hard drive space required. The software func...
New competitors, disruptive technologies, and growing expectations are pushing every business to both adopt and deliver new digital services. This ‘Digital Transformation’ demands rapid delivery and continuous iteration of new competitive services via multiple channels, which in turn demands new service delivery techniques – including DevOps. In this power panel at @DevOpsSummit 20th Cloud Expo, moderated by DevOps Conference Co-Chair Andi Mann, panelists will examine how DevOps helps to meet th...
SYS-CON Events announced today that EARP 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. "We are a software house, so we perfectly understand challenges that other software houses face in their projects. We can augment a team, that will work with the same standards and processes as our partners' internal teams. Our teams will deliver the same quality within the required time and budget just as our partn...
As DevOps methodologies expand their reach across the enterprise, organizations face the daunting challenge of adapting related cloud strategies to ensure optimal alignment, from managing complexity to ensuring proper governance. How can culture, automation, legacy apps and even budget be reexamined to enable this ongoing shift within the modern software factory?
SYS-CON Events announced today that Outscale 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. Outscale's technology makes an automated and adaptable Cloud available to businesses, supporting them in the most complex IT projects while controlling their operational aspects. You boost your IT infrastructure's reactivity, with request responses that only take a few seconds.
Most technology leaders, contemporary and from the hardware era, are reshaping their businesses to do software in the hope of capturing value in IoT. Although IoT is relatively new in the market, it has already gone through many promotional terms such as IoE, IoX, SDX, Edge/Fog, Mist Compute, etc. Ultimately, irrespective of the name, it is about deriving value from independent software assets participating in an ecosystem as one comprehensive solution.
SYS-CON Events announced today that A&I Solutions has been named “Bronze Sponsor” of 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. Founded in 1999, A&I Solutions is a leading information technology (IT) software and services provider focusing on best-in-class enterprise solutions. By partnering with industry leaders in technology, A&I assures customers high performance levels across all IT environments including: mai...
Five years ago development was seen as a dead-end career, now it’s anything but – with an explosion in mobile and IoT initiatives increasing the demand for skilled engineers. But apart from having a ready supply of great coders, what constitutes true ‘DevOps Royalty’? It’ll be the ability to craft resilient architectures, supportability, security everywhere across the software lifecycle. In his keynote at @DevOpsSummit at 20th Cloud Expo, Jeffrey Scheaffer, GM and SVP, Continuous Delivery Busine...