UPDATE (Apr 2014): My YouTube Tutorial on Web Performance Optimization with Dynatrace UEM

UPDATE (Nov 26, 2014): I recorded a YouTube Video that walks through all these steps. Watch it here: Browser Diagnostics with Dynatrace

I recently analyzed FIFA’s World Cup website for web performance best practices and highlighted the top problems FIFA had on their website (too many flag images, very large favicon, et Cetera). After completing the post, I realized we could use a freely available trial service to run some tests to see if they have improved things. You can use this same process to test your own pages.

dynaTrace AJAX Edition has always been my tool of choice when doing these types of analysis blogs. Good news is that dynaTrace AJAX Edition 4.4 is soon to be released. Even better is that the full blown dynaTrace is now also available as a Free Trial including Browser, Java, .NET, PHP and Web Server Agents allowing you to do both Browser Diagnostics but also doing real end user monitoring. For both cases, the analysis doesn’t stop in the browser but can go full end-to-end (Browser to Database).

One of the cool things I like about dynaTrace vs dynaTrace AJAX Edition is the improved timeline which also shows captured screenshot:

webperformancefree1
Love the improved timeline which also shows screenshots for individual drawing events

I will keep this blog short – just to explain how to use the dynaTrace Free Trial to perform an even better analysis as you were able to do with dynaTrace AJAX Edition.

Step 1: Download Free Trial

It starts by going to Your Dynatrace Free Trial page. You can register your account. Why? Because you will automatically get full access to our Community which includes access to the Forums, Documentation, Videos, Downloads, … – Once you registered you will receive an email to confirm your email and activate your account. If you are an existing dynaTrace AJAX Edition user you can register using the same email address. After confirming the email you can use your previous username/pwd combination to logon to the community. If you dont remember your password simply go to “Forgot Password“.

Step 2: Installation including Browser Agents

The Browser agents are currently supported for Internet Explorer and Firefox on Windows. The dynaTrace End-to-End Agents (Java, .NET, Apache, IIS, PHP et. Cetera) are supported for all major platforms (Windows, Linux, Solaris, et. Cetera).

If you want to do browser diagnostics please make sure that during the installation process select “Custom” and check that the browser agent is selected as shown in the following screenshot:

Make sure you install the browser agent as it is not picked by default
Make sure you install the browser agent as it is not picked by default

Step 3: Browser Diagnostics

You can start by following the walkthroughs on the community: Diagnose Browser Activity or Browser Diagnostics. After installation of dynaTrace you simply click on “Add Tier” and select “Web Browser”. Then just follow that wizard where at the end you can click on Start Tracing WebBrowser enter a URL that will then automatically be launched in either IE or FF.

3 easy Steps to configure dynaTrace to do a deep dive into your Internet Explorer or FireFox
3 easy Steps to configure dynaTrace to do a deep dive into your Internet Explorer or FireFox

This is what I did with FIFA’s World Cup website, and then clicked through the Browser Performance Report that highlights the hotspots they have on their website:

The individual tabs highlight what types of resources are on the individual pages, how they do with caching and also gives optimization tips on reducing network roundtrips
The individual tabs highlight what types of resources are on the individual pages, how they do with caching and also gives optimization tips on reducing network roundtrips

Looking at the FIFA World Cup site it still seems that they haven’t changed the site after my initial analysis. They still have many images (e.g: individual country flags) as well as a very large favicon (370k) on that page which can be optimized.

Step 4: Going End-to-End

If you want to analyzer your own website, and not only analyze external pages like I did with FIFA, you can install agents on your JVMs, .NET CLRs, Apaches/IIS, PHP Engines, et.Cetera to get full end-to-end browser diagnostics and also end user monitoring visibility.

Here are two 5 minute videos that show how to do end-to-end with dynaTrace for Java & .NET:

For all other technologies (e.g: PHP, Other Web Applications, Mainframe, et. Cetera) have a look at our Quick Start Guides.

Here are some screenshots of what you can expect to see – starting with a Browser PurePath showing you full visibility into every single JavaScript handler and its calls into the server-side:

End-to-End Diagnostics: From onClick event handler all the way into the Java Servlet Implementation
End-to-End Diagnostics: From onClick event handler all the way into the Java Servlet Implementation

The next shows end-to-end for real users that try to access your website including everything from their browser (without needing to install a browser plugin) all the way through your backend implementation. More details on this screenshot and the story can be found in my recent blog post Deployment Gone Bad.

webperformancefree6
End-to-End Monitoring: PurePath from Browser to database for all real users shows where your performance, architectural and functional problems are

Now it’s up to you to optimize your own application performance!

Let us know what your findings are – whether it is on an external app or your own.