NY Web Performance Meetup: dynaTrace AJAX Edition

Notes from Andreas Grabner’s (dynaTrace evangelist) presentation on the new features of the upcoming dynaTrace AJAX Edition (DAE) 2.0. dynaTrace AJAX Edition is a free tool that provides full JavaScript, network, rendering, DOM and XHR tracing for Internet Explorer 6, 7 & 8. With the latest version, the Ajax Edition automatically analyzes best practices in the areas of browser caching, network resources, server-side activity, JavaScript/Ajax and also provides additional key performance metrics that are essential for tracking the end-user perceived performance of a web site such as time to first impression, time to onload or time to fully loaded.

NY Web Performance Meetup page

Please note these are my live notes and were published immediately after the presentation. Hopefully I’ll have a chance to clean up them up at some point in the future.

Presentation bottom-line: Coming ASAP.

dynaTrace was founded in Austria five years ago. Headquarters in Boston. Started on the server-side. Large clients moving to Web 2.0, so developed dynaTrace Ajax Edition as a free tool. Version 2.0 is in beta, but that is the one that should be downloaded.

Currently works with IE 6, 7 and 8 exclusively. Will hopefully support FF by the end of the year.

Eclipse RPC application. Can set run-time configurations. DAE will launch browser for you. Will replace IE logo in upper left corner. This is how you know it’s the session window. Installs two add-ons to IE.

Everything that is done on the page is recorded. Network activity, JavaScript execution, rendering. Does add overhead to page. If the JS is very heavy, will add more overhead. Variance to overhead: 5-20%. Can turn down the overhead by collecting less data.

Jeans page for Sears took 13-14 seconds from Keynote. Sears unable to reproduce (4 secs). Keynotes uses IE 7 for monitoring, Sears uses IE 8 internally. Accounted for the discrepancy.

blog.dynatrace.com, where Andreas collects these stories.

After collecting data, can switch back to DAE. At top left (under browsers) is the live session. DAE shows all the URLs. Also does ranking like PageSpeed.. Can upload your rankings to ShowSlow

  • Browser caching performance rank
  • Network request performance rank
  • Server-Side performance rank
  • JavaScript/Ajax performance rank

Tabbed interface to each of these ranks. Rank pages provide suggestions similar to PageSpeed and links to dynaTrace’s best practices techniques (also Google and Yahoo!). These are the standard things that most of the service providers do.

The JS tab is where the magic is. Profiler. Shows JS calls, invocations and total time (in ms).

The jQuery class selector is really bad in IE 6 and 7. A little bit better in IE 8. Profile highlights jQuery calls with yellow arrow. Most of the time is spent using jQuery class lookups. If have to do jQuery class selectors, faster to use a tag qualifier: element.className instead of .className.

The more DOM elements and the deeper the nesting, the more expensive the call. If there will be multiple look-ups for the same selector, cache the nodelist in a variable.

These are the keys to IE performance.

The profiler also includes back traces and forward traces. Can really dig down and see what exact calls and the actual JS script that is taking the most time.

The DAE timeline isn’t a network waterfall, but it shows you how long the JS execution took and how long the rendering took. Timeline is color-coded and has nice zoom features. If you double click on a timeline block, will get the pure execution path (“purepaths”). DAE captures the entire trace, which is far more than most profilers.

Everything yellow is DOM. Arrow to left, retrieving property. Arrow down is a method call. To keep the overhead low, doesn’t capture the method arguments and return values by default. If need it, can be turned on.

Various times: duration, JS, total, exec. Duration is the total time in asynchronous path, JS ???, total time is time spent in synchronous path, exec time that was exclusively spent executing. If the time is large, but the exec is low, then need to drill down into the sub-methods called by the original method.

Turns out that manually drilling down is doable, but the tedious way. When click on a node, the contributor node window will show all the contributing methods and can sort by most expensive of calls (sometimes 1,000s of calls). When you get low enough, will probably hit jQuery. The middle window shows the entire stack trace, so easy to move back up to find the call you made that caused the bad performance.

Cannot see into Flash, but can get the network time, rendering time and CPU usage. When you start to use the Flash object, though, it’s invisible unless it downloads more network content or interacts with the HTML page/JS.

In question and answer, turns out that to run DAE for IE and Firefox and to compare them, you’ll have to pay for it. Otherwise it will only support one browser.

Integration with Selenium.

To do a side-by-side comparison, either copy (easy to do) and paste into Excel or else open two performance report tabs and manually bounce between them. To automate it, there’s the commercial solution.

When the browser closes, the live session is moved to the stored sessions. Session name will default to the runtime config, but can re renamed via a right-click.

Can right-click on the timeline and easily access a number of different drill-downs.

Due to limited number of network connections, there can be a wait time before an asset can be downloaded. DAE shows that as well.

By default, doesn’t capture images. Captures the URL and uses a browser component to go out and retrieve it from the web. Captures all HTML, JS and CSS. However, can specify additional MIME types you want captured.

How were they able to capture all this information? A lot of reverse engineering of IE. The rendering information isn’t as detailed as the JS; more difficult to reverse engineer.

Uses a high-precision timer (also used on their server-side product).

In code view, the code is automatically un-minimized.


One thought on “NY Web Performance Meetup: dynaTrace AJAX Edition

  1. Pingback: Tweets that mention JeffreyBarke.net » Blog Archive » NY Web Performance Meetup: dynaTrace AJAX Edition -- Topsy.com

Leave a Reply