The US Open is one of the major world sport events these days. Those tennis enthusiasts that can’t make it to the Centre Court in Flushing Meadows are either watching the games on television or following the scores on the official US Open Web Site.

The question is: How long does it take to get the current standings? And – is my Firefox faster than my friends Internet Explorer?

Comparing US Open 2011 Page Load Time

I made this test easy. I recorded page load activity in both Firefox 6 and Internet Explorer 8 when loading http://www.usopen.org. I am using dynaTrace AJAX Edition Premium Version to analyze and compare the activity side-by-side. The following screenshot shows the High-Level Key Performance Indicators for both browsers. The interesting observations for me are

  • 27 more Roundtrips on IE (Column Request Count) resulting in 700k more downloaded data
  • Slower JavaScript Execution Time on IE
  • Slower Rendering in Firefox
High Level Comparison between Internet Explorer and Firefox
High Level Comparison between Internet Explorer and Firefox

Comparing Page Activity in Timeline

Next step is to compare page load in the Browser Timeline. In the following screenshot you see the page activity for Internet Explorer (top) and Firefox (bottom). I highlighted the 3 for me significant differences:

  1. Loading behavior for Google, Twitter and Facebook JavaScript files much faster on Firefox
  2. In Internet Explorer we have 6 XHR calls whereas in Firefox we only see 5
  3. Long running onLoad Event handler in Internet Explorer
Easy to spot differences in the Timeline Comparison between Internet Explorer and Firefox
Easy to spot differences in the Timeline Comparison between Internet Explorer and Firefox

What is the difference in Network Roundtrips?

Next step is to compare the Network Requests. We have already learned through the High-Level KPIs that there is a significant difference in Network Roundtrips. Internet Explorer has 27 more resources requests than Firefox. The following screenshot shows me the Browser Network Dashlet in Comparison Mode. It compares the Network Requests from IE and FF and uses color coding to highlight the differences. Grey means that this request was done by IE but not by FF. Red means that IE had more requests to a specific resource than FF. If we look at this table we can observe the following interesting facts:

  • Internet Explorer tries to download flashcanvas.swf twice where this component is not loaded in Firefox (Top Row)
  • It requests certain JS, CSS and one JPG twice making it one request more than on Firefox (Rows in Red)
  • It requests certain files that are not requested by Firefox (Rows in Grey)
Network Comparison shows that Internet Explorer is requesting additional resources and some resources more than once
Network Comparison shows that Internet Explorer is requesting additional resources and some resources more than once

What is the extra AJAX Request?

The same Browser Network Comparison View allows us to focus on the AJAX Requests. Looking at the side-by-side data shows us that the Flash Object – that was requested twice – is requested once using AJAX/XHR. As this flash component is only requested in IE we see the extra XHR Request.

Comparing AJAX Requests between Firefox and Internet Explorer. Easy to spot the extra request that downloads the Flash Component
Comparing AJAX Requests between Firefox and Internet Explorer. Easy to spot the extra request that downloads the Flash Component

With a simple drill down we also see where this AJAX/XHR Request comes from. The following screenshot displays the Browser PurePath™ with the full JavaScript trace including the XHR Request for the flash component.

The AJAX Request for the flash component is triggered when flashcanvas.js is loaded
The AJAX Request for the flash component is triggered when flashcanvas.js is loaded

Why is the onLoad Event Handler taking longer on IE?

The Performance Report shows us the JavaScript Hotspots in Internet Explorer. From here we for instance see that the $ method (jQuery Lookup method) takes a significant time. The Report also shows us where this method gets called. When we drill from there to the actual Browser PurePath’s we see which calls to the $ method were actually taking a long time:

JavaScript Hotspot analysis brings us to problematic $ method calls that are slower on Internet Explorer
JavaScript Hotspot analysis brings us to problematic $ method calls that are slower on Internet Explorer

Want to analyze your own Web-site?

This was just a quick example on how to analyze and compare page load performance across browsers. For more recommendations on how to actually optimize page load time I recommend checking out our other blogs on Ajax/JavaScript.

To analyze individual medium complex Web 2.0 Applications download the free dynaTrace AJAX Edition to analyze individual pages.
For advanced scenarios and such as the following take a look at dynaTrace AJAX Edition Premium Version:

  • JavaScript heavy Web 2.0 Applications: Premium is unlimited in JavaScript activities it can process – the free AJAX Edition only works for medium complex Web 2.0 Applications
  • Compare performance and load behavior across browsers: Premium automatically compares different sessions – the free AJAX Edition only allows manual comparison
  • Identify regressions across different versions of your web site: Premium automatically identifies regressions across tested versions
  • Automate performance analysis: Premium automatically identifies performance problems that can be reported through REST or HTML Reports

I also encourage everybody to participate in the discussions on our Community Forum.