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 )
- 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 covers 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. The steps to get started are easy – just follow the instructions on the Welcome Screen:
We also provide several videos that walk you through the individual features and capabilities: Dynatrace AJAX Edition 3 Tutorial Videos
Improve 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
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.
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:
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.
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 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.
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.
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:
- dynaTrace in Continuous Integration – The Big Picture
- 5 Steps to setup ShowSlow as Web Performance Repository for Dynatrace
- dynaTrace Continuously Monitors ShowSlow URLs
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
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.
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 your 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.