Inspired by the Top 10 Performance Problems post which focuses on Server-Side performance problems taken from companies such as Zappos, Thomson, Monster and Novell I came up with the Top 10 Client-Side performance problems in Web 2.0 applications I’ve seen when working with our Dynatrace AJAX Edition users.
Further Reading: Best Practices on Blocking and long running script tags
Top 10 Problems that explain these symptoms
#1: Slow CSS Selectors on Internet Explorer
var element = $(“.shoppingcart”)
Further Reading: Best Practices on Slow CSS Selectors with jQuery/Prototype
#2: Multiple CSS Lookups for same object
Individual CSS Lookups can be expensive. Executing the same lookup multiple times on the same page adds more execution time than necessary. Instead of executing the same lookup multiple times it is recommended to store the result of a lookup in a variable and reuse it on that same page. The following image shows the number of CSS Lookups for individual CSS Selectors on a single page. Some of them are called up to 10 times
The 8 invocations to .ztBucket take a total of 660ms. Calling it only once and reusing the lookup result can reduce this total time to ~80ms
#3: Too many XHR Calls
A mistake that is often made is that too much information is fetched dynamically with too many calls. One example is a product page with 10 products. The developer may decide to use AJAX to load detailed product information for every product individually. This means 10 XHR calls for every 10 products that are displayed. This will of course work but it means that you have 10 roundtrips to the server that lets the user wait for the final result. The server needs to handle 10 additional requests that puts additional pressure on the server infrastructure.
Instead of making 10 individual requests it is recommended to combine these calls into a single batch call requesting the product details for all 10 products on the page.
#4: Expensive DOM Manipulations
Manipulating the DOM is necessary in highly interactive web sites. Dynamically loaded content needs to be added to the site or user preference changes need to be applied in order to change the look and feel of the website.
There are multiple ways to add new DOM elements – each with a different performance impact depending on the browser and the number of elements that are added. It is important to analyze different approaches (e.g: adding elements as HTML or creating individual DOM elements) and apply the approach that works best in each use case.
#6: Large DOM
The size of the DOM plays an important role in page performance. The larger the DOM:
- the more memory is required by the browser
- the longer manipulations take as style changes on top nodes need to be applied to more child nodes
- especially on Internet Explorer larger DOMs have a disadvantage when performing certain CSS Lookups, e.g: by class name
Further Reading: Optimizing Data Intensive Webpages by Example
#7: Excessive Event Handler Bindings
Frameworks like jQuery, Prototype or YUI make it easy to bind event handlers to certain types of DOM elements, e.g.: all Hyperlinks. Binding event handlers to DOM elements impacts performance in 3 ways:
- the binding itself takes time as objects need to be looked up and are either registered to a central event manager or DOM elements are modified by assigning the handler method to it
- whenever an event is triggered the event manager needs to lookup the elements that have registered for that event and then call the correct event handlers (only true when using event managers)
- event handlers need to be unbound when moving to a different page. This has to be done in order to avoid any DOM-related memory leaks
The following image shows the internals of an event manager that needs to lookup all elements to identify which element to handle the actual event
#8: Slow executing external services
#9: Excessive Visual Effects
#10: Too fine granular logging and monitoring
Yes – there is more to Web 2.0 Performance Analysis
Let me know what your top problems are and whether you would add or remove anything from my list.