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 Rendering in 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:
- In Internet Explorer we have 6 XHR calls whereas in Firefox we only see 5
- Long running onLoad Event handler in Internet Explorer
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)
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.
Why is the onLoad Event Handler taking longer on IE?
Want to analyze your own Web-site?
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:
- 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.