Every time I meet-up with web developers, either through a customer engagement or when I am giving a presentation about web performance optimization, I ask this question: Who is using Firefox and who is using Internet Explorer as the main browser? The answer is easy to guess. I hardly ever get any hands raised for Internet Explorer. And honestly – I don’t blame them as there are so many great tools on Firefox such as Firebug or YSlow that are great to profile and debug your web application. The problem though is that a big majority of their end-users are going to use Internet Explorer (46% market share in Nov 2010) and might not be happy with their end-user-experience. Check out the following blog posts for more details on bad performing web sites in Internet Explorer: Top 10 Client-Side Performance Problems in Web 2.0.
As recently announced on our blog there is a solution to that problem – dynaTrace AJAX Edition is extending its browser support to Firefox. This not only allows you to profile, debug and trace your web site’s performance – the great thing is that it is a single tool that does this for the two major browsers allowing you to compare side-by-side how well your code works on both browsers and gives you an idea of where to optimize.
Compare a Twitter Search in FF and IE
Step 1: Performance Report
The first thing I do is open the Performance Report that shows the analysis of the recorded data based on our Web Performance Optimization Best Practices. Doing this for both sessions gives me a quick overview, including the most interesting key performance indicators:
There are several interesting things here: Firefox was slower with the onLoad time but faster with the Fully Loaded Time. It also requested 5 fewer resources than Internet Explorer. Now – we have to be careful with timings here as this is just a single test sample. It would be better to run multiple tests on each browser and look at average values across tests to rule out volatile results. But it is an interesting observation. We have to ignore the First Impression Time for now as the version of Firefox I use doesn’t yet support true Rendering Time capturing (coming soon).
Step 2: Network Differences
The other difference in network requests were two extra tweets that were not displayed in Firefox – probably because I executed the query at a slightly different time and these two older tweets didn’t make it in the default results list.
Step 3: Timeline of complete Page Load
The real surprise from my perspective – based on all the blogs I wrote about CSS Lookup Performance in IE – is that Firefox is slightly slower in iterating through the DOM to lookup those DOM elements, e.g.: “.status-body a,.vcard a”. What is less surprising is that renderResultsFromSummize is faster in Firefox. If we take a deeper look into that method we see that it actually modifies the DOM by creating all those DOM objects as passed in the string parameter through jQuery helper methods. Especially changing innerHTML seems to be much faster in Firefox than IE. There are a total of 98 innerHtml changes in my example taking 87ms on IE and only 45ms in FF.
As we are getting closer to “Feature Complete” with the dynaTrace AJAX Edition for Firefox we will post more findings about performance-related Firefox topics. Similar to what we did for Internet Explorer, we plan to look at different real-world sites and highlight which Best Practices to follow – similar to what we did with Fifa WorldCup, The Masters or Frankfurt Airport. We will also look at Best Practices on frameworks such as jQuery, Prototype, … If you have any performance-related topics that interest you – whether it is pure Firefox or how things are different between FF and IE – then let us know.